Skip to content

M
makura-2025
Commit 9d319c99 by Arjun Jhukal
Options

spider color updated

parent 357e464b
Showing with 430 additions and 420 deletions
assets/js/spider-animation.js
jQuery(document).ready(function () { jQuery(document).ready(function () {
VerletJS.prototype.spider = function (origin) { VerletJS.prototype.spider = function (origin) {
var i; var i;
var legSeg1Stiffness = 0.99; var legSeg1Stiffness = 0.99;
var legSeg2Stiffness = 0.99; var legSeg2Stiffness = 0.99;
var legSeg3Stiffness = 0.99; var legSeg3Stiffness = 0.99;
var legSeg4Stiffness = 0.99; var legSeg4Stiffness = 0.99;
var joint1Stiffness = 1; var joint1Stiffness = 1;
var joint2Stiffness = 0.4; var joint2Stiffness = 0.4;
var joint3Stiffness = 0.9; var joint3Stiffness = 0.9;
var bodyStiffness = 1; var bodyStiffness = 1;
var bodyJointStiffness = 1; var bodyJointStiffness = 1;
var composite = new this.Composite(); var composite = new this.Composite();
composite.legs = []; composite.legs = [];
composite.thorax = new Particle(origin); composite.thorax = new Particle(origin);
composite.head = new Particle(origin.add(new Vec2(0, -5))); composite.head = new Particle(origin.add(new Vec2(0, -5)));
composite.abdomen = new Particle(origin.add(new Vec2(0, 10))); composite.abdomen = new Particle(origin.add(new Vec2(0, 10)));
composite.particles.push(composite.thorax); composite.particles.push(composite.thorax);
composite.particles.push(composite.head); composite.particles.push(composite.head);
composite.particles.push(composite.abdomen); composite.particles.push(composite.abdomen);
composite.constraints.push( composite.constraints.push(
new DistanceConstraint(composite.head, composite.thorax, bodyStiffness) new DistanceConstraint(composite.head, composite.thorax, bodyStiffness)
);
composite.constraints.push(
new DistanceConstraint(composite.abdomen, composite.thorax, bodyStiffness)
);
composite.constraints.push(
new AngleConstraint(
composite.abdomen,
composite.thorax,
composite.head,
0.4
)
);
for (i = 0; i < 4; ++i) {
composite.particles.push(
new Particle(composite.particles[0].pos.add(new Vec2(3, (i - 1.5) * 3)))
);
composite.particles.push(
new Particle(composite.particles[0].pos.add(new Vec2(-3, (i - 1.5) * 3)))
); );
var len = composite.particles.length;
composite.constraints.push( composite.constraints.push(
new DistanceConstraint( new DistanceConstraint(composite.abdomen, composite.thorax, bodyStiffness)
composite.particles[len - 2],
composite.thorax,
legSeg1Stiffness
)
); );
composite.constraints.push( composite.constraints.push(
new DistanceConstraint( new AngleConstraint(
composite.particles[len - 1], composite.abdomen,
composite.thorax, composite.thorax,
legSeg1Stiffness composite.head,
0.4
) )
); );
var lenCoef = 1; for (i = 0; i < 4; ++i) {
if (i == 1 || i == 2) lenCoef = 0.7; composite.particles.push(
else if (i == 3) lenCoef = 0.9; new Particle(composite.particles[0].pos.add(new Vec2(3, (i - 1.5) * 3)))
composite.particles.push( );
new Particle( composite.particles.push(
composite.particles[len - 2].pos.add( new Particle(composite.particles[0].pos.add(new Vec2(-3, (i - 1.5) * 3)))
new Vec2(20, (i - 1.5) * 30).normal().mutableScale(20 * lenCoef) );
var len = composite.particles.length;
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 2],
composite.thorax,
legSeg1Stiffness
) )
) );
); composite.constraints.push(
composite.particles.push( new DistanceConstraint(
new Particle( composite.particles[len - 1],
composite.particles[len - 1].pos.add( composite.thorax,
new Vec2(-20, (i - 1.5) * 30).normal().mutableScale(20 * lenCoef) legSeg1Stiffness
) )
) );
); var lenCoef = 1;
len = composite.particles.length; if (i == 1 || i == 2) lenCoef = 0.7;
composite.constraints.push( else if (i == 3) lenCoef = 0.9;
new DistanceConstraint( composite.particles.push(
composite.particles[len - 4], new Particle(
composite.particles[len - 2], composite.particles[len - 2].pos.add(
legSeg2Stiffness new Vec2(20, (i - 1.5) * 30).normal().mutableScale(20 * lenCoef)
) )
); )
composite.constraints.push( );
new DistanceConstraint( composite.particles.push(
composite.particles[len - 3], new Particle(
composite.particles[len - 1], composite.particles[len - 1].pos.add(
legSeg2Stiffness new Vec2(-20, (i - 1.5) * 30).normal().mutableScale(20 * lenCoef)
) )
); )
composite.particles.push( );
new Particle( len = composite.particles.length;
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 4],
composite.particles[len - 2],
legSeg2Stiffness
)
);
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 3],
composite.particles[len - 1],
legSeg2Stiffness
)
);
composite.particles.push(
new Particle(
composite.particles[len - 2].pos.add(
new Vec2(20, (i - 1.5) * 50).normal().mutableScale(20 * lenCoef)
)
)
);
composite.particles.push(
new Particle(
composite.particles[len - 1].pos.add(
new Vec2(-20, (i - 1.5) * 50).normal().mutableScale(20 * lenCoef)
)
)
);
len = composite.particles.length;
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 4],
composite.particles[len - 2],
legSeg3Stiffness
)
);
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 3],
composite.particles[len - 1],
legSeg3Stiffness
)
);
var rightFoot = new Particle(
composite.particles[len - 2].pos.add( composite.particles[len - 2].pos.add(
new Vec2(20, (i - 1.5) * 50).normal().mutableScale(20 * lenCoef) new Vec2(20, (i - 1.5) * 100).normal().mutableScale(12 * lenCoef)
) )
) );
); var leftFoot = new Particle(
composite.particles.push(
new Particle(
composite.particles[len - 1].pos.add( composite.particles[len - 1].pos.add(
new Vec2(-20, (i - 1.5) * 50).normal().mutableScale(20 * lenCoef) new Vec2(-20, (i - 1.5) * 100).normal().mutableScale(12 * lenCoef)
) )
) );
); composite.particles.push(rightFoot);
len = composite.particles.length; composite.particles.push(leftFoot);
composite.constraints.push( composite.legs.push(rightFoot);
new DistanceConstraint( composite.legs.push(leftFoot);
composite.particles[len - 4], len = composite.particles.length;
composite.particles[len - 2], composite.constraints.push(
legSeg3Stiffness new DistanceConstraint(
) composite.particles[len - 4],
); composite.particles[len - 2],
composite.constraints.push( legSeg4Stiffness
new DistanceConstraint(
composite.particles[len - 3],
composite.particles[len - 1],
legSeg3Stiffness
)
);
var rightFoot = new Particle(
composite.particles[len - 2].pos.add(
new Vec2(20, (i - 1.5) * 100).normal().mutableScale(12 * lenCoef)
)
);
var leftFoot = new Particle(
composite.particles[len - 1].pos.add(
new Vec2(-20, (i - 1.5) * 100).normal().mutableScale(12 * lenCoef)
)
);
composite.particles.push(rightFoot);
composite.particles.push(leftFoot);
composite.legs.push(rightFoot);
composite.legs.push(leftFoot);
len = composite.particles.length;
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 4],
composite.particles[len - 2],
legSeg4Stiffness
)
);
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 3],
composite.particles[len - 1],
legSeg4Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 6],
composite.particles[len - 4],
composite.particles[len - 2],
joint3Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 6 + 1],
composite.particles[len - 4 + 1],
composite.particles[len - 2 + 1],
joint3Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 8],
composite.particles[len - 6],
composite.particles[len - 4],
joint2Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 8 + 1],
composite.particles[len - 6 + 1],
composite.particles[len - 4 + 1],
joint2Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[0],
composite.particles[len - 8],
composite.particles[len - 6],
joint1Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[0],
composite.particles[len - 8 + 1],
composite.particles[len - 6 + 1],
joint1Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[1],
composite.particles[0],
composite.particles[len - 8],
bodyJointStiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[1],
composite.particles[0],
composite.particles[len - 8 + 1],
bodyJointStiffness
)
);
}
this.composites.push(composite);
return composite;
};
VerletJS.prototype.spiderweb = function (origin, radius, segments, depth) {
var stiffness = 0.6;
var tensor = 0.3;
var stride = (2 * Math.PI) / segments;
var n = segments * depth;
var radiusStride = radius / n;
var i, c;
var composite = new this.Composite();
for (i = 0; i < n; ++i) {
var theta =
i * stride + Math.cos(i * 0.4) * 0.05 + Math.cos(i * 0.05) * 0.2;
var shrinkingRadius = radius - radiusStride * i + Math.cos(i * 0.1) * 20;
var offy = Math.cos(theta * 2.1) * (radius / depth) * 0.2;
composite.particles.push(
new Particle(
new Vec2(
origin.x + Math.cos(theta) * shrinkingRadius,
origin.y + Math.sin(theta) * shrinkingRadius + offy
) )
) );
);
}
for (i = 0; i < segments; i += 4) composite.pin(i);
for (i = 0; i < n - 1; ++i) {
composite.constraints.push(
new DistanceConstraint(
composite.particles[i],
composite.particles[i + 1],
stiffness
)
);
var off = i + segments;
if (off < n - 1)
composite.constraints.push( composite.constraints.push(
new DistanceConstraint( new DistanceConstraint(
composite.particles[i], composite.particles[len - 3],
composite.particles[off], composite.particles[len - 1],
stiffness legSeg4Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 6],
composite.particles[len - 4],
composite.particles[len - 2],
joint3Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 6 + 1],
composite.particles[len - 4 + 1],
composite.particles[len - 2 + 1],
joint3Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 8],
composite.particles[len - 6],
composite.particles[len - 4],
joint2Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 8 + 1],
composite.particles[len - 6 + 1],
composite.particles[len - 4 + 1],
joint2Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[0],
composite.particles[len - 8],
composite.particles[len - 6],
joint1Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[0],
composite.particles[len - 8 + 1],
composite.particles[len - 6 + 1],
joint1Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[1],
composite.particles[0],
composite.particles[len - 8],
bodyJointStiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[1],
composite.particles[0],
composite.particles[len - 8 + 1],
bodyJointStiffness
)
);
}
this.composites.push(composite);
return composite;
};
VerletJS.prototype.spiderweb = function (origin, radius, segments, depth) {
var stiffness = 0.6;
var tensor = 0.3;
var stride = (2 * Math.PI) / segments;
var n = segments * depth;
var radiusStride = radius / n;
var i, c;
var composite = new this.Composite();
for (i = 0; i < n; ++i) {
var theta =
i * stride + Math.cos(i * 0.4) * 0.05 + Math.cos(i * 0.05) * 0.2;
var shrinkingRadius = radius - radiusStride * i + Math.cos(i * 0.1) * 20;
var offy = Math.cos(theta * 2.1) * (radius / depth) * 0.2;
composite.particles.push(
new Particle(
new Vec2(
origin.x + Math.cos(theta) * shrinkingRadius,
origin.y + Math.sin(theta) * shrinkingRadius + offy
)
) )
); );
else }
for (i = 0; i < segments; i += 4) composite.pin(i);
for (i = 0; i < n - 1; ++i) {
composite.constraints.push( composite.constraints.push(
new DistanceConstraint( new DistanceConstraint(
composite.particles[i], composite.particles[i],
composite.particles[n - 1], composite.particles[i + 1],
stiffness stiffness
) )
); );
var off = i + segments;
if (off < n - 1)
composite.constraints.push(
new DistanceConstraint(
composite.particles[i],
composite.particles[off],
stiffness
)
);
else
composite.constraints.push(
new DistanceConstraint(
composite.particles[i],
composite.particles[n - 1],
stiffness
)
);
}
composite.constraints.push(
new DistanceConstraint(
composite.particles[0],
composite.particles[segments - 1],
stiffness
)
);
for (c in composite.constraints) composite.constraints[c].distance *= tensor;
this.composites.push(composite);
return composite;
};
function shuffle(o) {
for (
var j, x, i = o.length;
i;
j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x
);
return o;
} }
composite.constraints.push( VerletJS.prototype.crawl = function (leg) {
new DistanceConstraint( var stepRadius = 100;
composite.particles[0], var minStepRadius = 35;
composite.particles[segments - 1], var spiderweb = this.composites[0];
stiffness var spider = this.composites[1];
) var theta = spider.particles[0].pos.angle2(
); spider.particles[0].pos.add(new Vec2(1, 0)),
for (c in composite.constraints) composite.constraints[c].distance *= tensor; spider.particles[1].pos
this.composites.push(composite); );
return composite; var boundry1 = new Vec2(Math.cos(theta), Math.sin(theta));
}; var boundry2 = new Vec2(
function shuffle(o) { Math.cos(theta + Math.PI / 2),
for ( Math.sin(theta + Math.PI / 2)
var j, x, i = o.length; );
i; var flag1 = leg < 4 ? 1 : -1;
j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x var flag2 = leg % 2 == 0 ? 1 : 0;
); var paths = [];
return o; var i;
} for (i in spiderweb.particles) {
VerletJS.prototype.crawl = function (leg) { if (
var stepRadius = 100; spiderweb.particles[i].pos.sub(spider.particles[0].pos).dot(boundry1) *
var minStepRadius = 35;
var spiderweb = this.composites[0];
var spider = this.composites[1];
var theta = spider.particles[0].pos.angle2(
spider.particles[0].pos.add(new Vec2(1, 0)),
spider.particles[1].pos
);
var boundry1 = new Vec2(Math.cos(theta), Math.sin(theta));
var boundry2 = new Vec2(
Math.cos(theta + Math.PI / 2),
Math.sin(theta + Math.PI / 2)
);
var flag1 = leg < 4 ? 1 : -1;
var flag2 = leg % 2 == 0 ? 1 : 0;
var paths = [];
var i;
for (i in spiderweb.particles) {
if (
spiderweb.particles[i].pos.sub(spider.particles[0].pos).dot(boundry1) *
flag1 >= flag1 >=
0 && 0 &&
spiderweb.particles[i].pos.sub(spider.particles[0].pos).dot(boundry2) * spiderweb.particles[i].pos.sub(spider.particles[0].pos).dot(boundry2) *
flag2 >= flag2 >=
0 0
) { ) {
var d2 = spiderweb.particles[i].pos.dist2(spider.particles[0].pos); var d2 = spiderweb.particles[i].pos.dist2(spider.particles[0].pos);
if ( if (
!(d2 >= minStepRadius * minStepRadius && d2 <= stepRadius * stepRadius) !(d2 >= minStepRadius * minStepRadius && d2 <= stepRadius * stepRadius)
) )
continue; continue;
var leftFoot = false; var leftFoot = false;
var j; var j;
for (j in spider.constraints) { for (j in spider.constraints) {
var k; var k;
for (k = 0; k < 8; ++k) { for (k = 0; k < 8; ++k) {
if ( if (
spider.constraints[j] instanceof DistanceConstraint && spider.constraints[j] instanceof DistanceConstraint &&
spider.constraints[j].a == spider.legs[k] && spider.constraints[j].a == spider.legs[k] &&
spider.constraints[j].b == spiderweb.particles[i] spider.constraints[j].b == spiderweb.particles[i]
) { ) {
leftFoot = true; leftFoot = true;
}
} }
} }
if (!leftFoot) paths.push(spiderweb.particles[i]);
} }
if (!leftFoot) paths.push(spiderweb.particles[i]);
} }
} for (i in spider.constraints) {
for (i in spider.constraints) { if (
if ( spider.constraints[i] instanceof DistanceConstraint &&
spider.constraints[i] instanceof DistanceConstraint && spider.constraints[i].a == spider.legs[leg]
spider.constraints[i].a == spider.legs[leg] ) {
) { spider.constraints.splice(i, 1);
spider.constraints.splice(i, 1); break;
break; }
} }
} if (paths.length > 0) {
if (paths.length > 0) { shuffle(paths);
shuffle(paths); spider.constraints.push(
spider.constraints.push( new DistanceConstraint(spider.legs[leg], paths[0], 1, 0)
new DistanceConstraint(spider.legs[leg], paths[0], 1, 0) );
);
}
};
window.onload = function () {
var canvas = document.getElementById("scratch");
var width = parseInt(canvas.style.width);
var height = parseInt(canvas.style.height);
var dpr = window.devicePixelRatio || 1;
canvas.width = width * dpr;
canvas.height = height * dpr;
canvas.getContext("2d").scale(dpr, dpr);
var sim = new VerletJS(width, height, canvas);
var spiderweb = sim.spiderweb(
new Vec2(width / 2, height / 2),
Math.min(width, height) / 2,
20,
7
);
var spider = sim.spider(new Vec2(width / 2, -300));
spiderweb.drawParticles = function (ctx, composite) {
var i;
for (i in composite.particles) {
var point = composite.particles[i];
ctx.beginPath();
ctx.arc(point.pos.x, point.pos.y, 1.3, 0, 2 * Math.PI);
ctx.fillStyle = "#7e7e7e";
ctx.fill();
} }
}; };
spider.drawConstraints = function (ctx, composite) { window.onload = function () {
var i; var canvas = document.getElementById("scratch");
ctx.beginPath(); var width = parseInt(canvas.style.width);
ctx.arc(spider.head.pos.x, spider.head.pos.y, 4, 0, 2 * Math.PI); var height = parseInt(canvas.style.height);
ctx.fillStyle = "#000"; var dpr = window.devicePixelRatio || 1;
ctx.fill(); canvas.width = width * dpr;
ctx.beginPath(); canvas.height = height * dpr;
ctx.arc(spider.thorax.pos.x, spider.thorax.pos.y, 4, 0, 2 * Math.PI); canvas.getContext("2d").scale(dpr, dpr);
ctx.fill(); var sim = new VerletJS(width, height, canvas);
ctx.beginPath(); var spiderweb = sim.spiderweb(
ctx.arc(spider.abdomen.pos.x, spider.abdomen.pos.y, 8, 0, 2 * Math.PI); new Vec2(width / 2, height / 2),
ctx.fill(); Math.min(width, height) / 2,
for (i = 3; i < composite.constraints.length; ++i) { 20,
var constraint = composite.constraints[i]; 7
if (constraint instanceof DistanceConstraint) { );
var spider = sim.spider(new Vec2(width / 2, -300));
spiderweb.drawParticles = function (ctx, composite) {
var i;
for (i in composite.particles) {
var point = composite.particles[i];
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(constraint.a.pos.x, constraint.a.pos.y); ctx.arc(point.pos.x, point.pos.y, 1.3, 0, 2 * Math.PI);
ctx.lineTo(constraint.b.pos.x, constraint.b.pos.y); ctx.fillStyle = "#fff";
if ( ctx.fill();
(i >= 2 && i <= 4) || }
(i >= 2 * 9 + 1 && i <= 2 * 9 + 2) || };
(i >= 2 * 17 + 1 && i <= 2 * 17 + 2) ||
(i >= 2 * 25 + 1 && i <= 2 * 25 + 2)
) { spider.drawConstraints = function (ctx, composite) {
ctx.save(); var i;
constraint.draw(ctx); ctx.beginPath();
ctx.strokeStyle = "#000"; ctx.arc(spider.head.pos.x, spider.head.pos.y, 4, 0, 2 * Math.PI);
ctx.lineWidth = 3; ctx.fillStyle = "#000";
ctx.stroke(); ctx.fill();
ctx.restore(); ctx.beginPath();
} else if ( ctx.arc(spider.thorax.pos.x, spider.thorax.pos.y, 4, 0, 2 * Math.PI);
(i >= 4 && i <= 6) || ctx.fill();
(i >= 2 * 9 + 3 && i <= 2 * 9 + 4) || ctx.beginPath();
(i >= 2 * 17 + 3 && i <= 2 * 17 + 4) || ctx.arc(spider.abdomen.pos.x, spider.abdomen.pos.y, 8, 0, 2 * Math.PI);
(i >= 2 * 25 + 3 && i <= 2 * 25 + 4) ctx.fill();
) { for (i = 3; i < composite.constraints.length; ++i) {
ctx.save(); var constraint = composite.constraints[i];
constraint.draw(ctx); if (constraint instanceof DistanceConstraint) {
ctx.strokeStyle = "#000"; ctx.beginPath();
ctx.lineWidth = 2; ctx.moveTo(constraint.a.pos.x, constraint.a.pos.y);
ctx.stroke(); ctx.lineTo(constraint.b.pos.x, constraint.b.pos.y);
ctx.restore(); if (
} else if ( (i >= 2 && i <= 4) ||
(i >= 6 && i <= 8) || (i >= 2 * 9 + 1 && i <= 2 * 9 + 2) ||
(i >= 2 * 9 + 5 && i <= 2 * 9 + 6) || (i >= 2 * 17 + 1 && i <= 2 * 17 + 2) ||
(i >= 2 * 17 + 5 && i <= 2 * 17 + 6) || (i >= 2 * 25 + 1 && i <= 2 * 25 + 2)
(i >= 2 * 25 + 5 && i <= 2 * 25 + 6) ) {
) { ctx.save();
ctx.save(); constraint.draw(ctx);
ctx.strokeStyle = "#000"; ctx.strokeStyle = "#000";
ctx.lineWidth = 1.5; ctx.lineWidth = 3;
ctx.stroke(); ctx.stroke();
ctx.restore(); ctx.restore();
} else { } else if (
ctx.strokeStyle = "#000"; (i >= 4 && i <= 6) ||
ctx.stroke(); (i >= 2 * 9 + 3 && i <= 2 * 9 + 4) ||
(i >= 2 * 17 + 3 && i <= 2 * 17 + 4) ||
(i >= 2 * 25 + 3 && i <= 2 * 25 + 4)
) {
ctx.save();
constraint.draw(ctx);
ctx.strokeStyle = "#000";
ctx.lineWidth = 2;
ctx.stroke();
ctx.restore();
} else if (
(i >= 6 && i <= 8) ||
(i >= 2 * 9 + 5 && i <= 2 * 9 + 6) ||
(i >= 2 * 17 + 5 && i <= 2 * 17 + 6) ||
(i >= 2 * 25 + 5 && i <= 2 * 25 + 6)
) {
ctx.save();
ctx.strokeStyle = "#000";
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.restore();
} else {
ctx.strokeStyle = "#000";
ctx.stroke();
}
} }
} }
};
spider.drawParticles = function (ctx, composite) { };
var legIndex = 0;
var loop = function () {
if (Math.floor(Math.random() * 4) == 0) {
sim.crawl((legIndex++ * 3) % 8);
}
sim.frame(16);
sim.draw();
requestAnimFrame(loop);
};
loop();
function PinConstraint(a, pos) {
this.a = a;
this.pos = new Vec2().mutableSet(pos);
} }
PinConstraint.prototype.relax = function (stepCoef) {
this.a.pos.mutableSet(this.pos);
};
PinConstraint.prototype.draw = function (ctx) {
ctx.beginPath();
ctx.arc(this.pos.x, this.pos.y, 6, 0, 2 * Math.PI);
ctx.fillStyle = "yellow";
ctx.fill();
};
}; };
spider.drawParticles = function (ctx, composite) {};
var legIndex = 0;
var loop = function () {
if (Math.floor(Math.random() * 4) == 0) {
sim.crawl((legIndex++ * 3) % 8);
}
sim.frame(16);
sim.draw();
requestAnimFrame(loop);
};
loop();
};
}); });
\ No newline at end of file
assets/js/spider-framework.js
...@@ -58,8 +58,8 @@ ...@@ -58,8 +58,8 @@
var m = normal.length2(); var m = normal.length2();
normal.mutableScale( normal.mutableScale(
((this.distance * this.distance - m) / m) * ((this.distance * this.distance - m) / m) *
this.stiffness * this.stiffness *
stepCoef stepCoef
); );
this.a.pos.mutableAdd(normal); this.a.pos.mutableAdd(normal);
this.b.pos.mutableSub(normal); this.b.pos.mutableSub(normal);
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
PinConstraint.prototype.draw = function (ctx) { PinConstraint.prototype.draw = function (ctx) {
ctx.beginPath(); ctx.beginPath();
ctx.arc(this.pos.x, this.pos.y, 6, 0, 2 * Math.PI); ctx.arc(this.pos.x, this.pos.y, 6, 0, 2 * Math.PI);
ctx.fillStyle = "rgba(0,153,255,0.1)"; ctx.fillStyle = "#fff";
ctx.fill(); ctx.fill();
}; };
function AngleConstraint(a, b, c, stiffness) { function AngleConstraint(a, b, c, stiffness) {
...@@ -286,7 +286,7 @@ ...@@ -286,7 +286,7 @@
assert( assert(
"normal", "normal",
Math.abs(normal.length() - 1) <= 1e-5 && Math.abs(normal.length() - 1) <= 1e-5 &&
normal.epsilonEquals(new Vec2(0.4472, 0.89443), 1e-4) normal.epsilonEquals(new Vec2(0.4472, 0.89443), 1e-4)
); );
assert("dot", new Vec2(2, 3).dot(new Vec2(4, 1)) == 11); assert("dot", new Vec2(2, 3).dot(new Vec2(4, 1)) == 11);
assert( assert(
...@@ -296,8 +296,8 @@ ...@@ -296,8 +296,8 @@
assert( assert(
"angle2", "angle2",
new Vec2(1, 1).angle2(new Vec2(1, 0), new Vec2(2, 1)) * new Vec2(1, 1).angle2(new Vec2(1, 0), new Vec2(2, 1)) *
(180 / Math.PI) == (180 / Math.PI) ==
90 90
); );
assert( assert(
"rotate", "rotate",
......
blocks/welcome-banner-spider.php
...@@ -2,7 +2,10 @@ ...@@ -2,7 +2,10 @@
<section class="py-80 HOME TOP-BANNER-SECTION home2"> <section class="py-80 HOME TOP-BANNER-SECTION home2">
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-lg-5 col-md-5 col-12 mx-auto left-text"> <div class="col-lg-6 col-md-6 col-12 mx-auto order-md-2">
<canvas id="scratch" style="width: 375px; height: 400px;"></canvas>
</div>
<div class="col-lg-5 col-md-5 col-12 mx-auto left-text order-md-1">
<div class="position-relative left-text-wrapper"> <div class="position-relative left-text-wrapper">
<h1><?php echo get_field('wb_title') ?></h1> <h1><?php echo get_field('wb_title') ?></h1>
<p><?php echo get_field('wb_subtitle') ?></p> <p><?php echo get_field('wb_subtitle') ?></p>
...@@ -18,15 +21,7 @@ ...@@ -18,15 +21,7 @@
</a> </a>
</div> </div>
</div> </div>
<div class="col-lg-6 col-md-6 col-12 mx-auto">
<canvas id="scratch" style="width: 500px; height: 400px;"></canvas>
<!-- <div class="jumbotron showcase parallax-window" data-parallax="scroll"
data-image-src="images/showcase-bg.jpg" data-position="-80% -90%" style="margin-top:70px;">
<div class="col-md-5" style="margin-top:-50px;">
<canvas id="scratch" style="width: 500px; height: 400px;"></canvas>
</div>
</div> -->
</div>
</div> </div>
</div> </div>
</section> </section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment