Skip to content

Commit cf2783e

Browse files
committed
spider improvements
1 parent ed767be commit cf2783e

File tree

1 file changed

+105
-41
lines changed

1 file changed

+105
-41
lines changed

examples/04-spiderweb.html

Lines changed: 105 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616

1717
VerletJS.prototype.spider = function(origin) {
1818
var i;
19-
var legSeg1Stiffness = 0.95;
20-
var legSeg2Stiffness = 0.95;
21-
var legSeg3Stiffness = 0.95;
22-
var legSeg4Stiffness = 0.95;
19+
var legSeg1Stiffness = 0.99;
20+
var legSeg2Stiffness = 0.99;
21+
var legSeg3Stiffness = 0.99;
22+
var legSeg4Stiffness = 0.99;
2323

2424
var joint1Stiffness = 1;
2525
var joint2Stiffness = 0.4;
@@ -31,9 +31,21 @@
3131
var composite = new this.Composite();
3232
composite.legs = [];
3333

34-
composite.particles.push(new Particle(origin));
35-
composite.particles.push(new Particle(origin.add(new Vec2(0,-10))));
36-
composite.constraints.push(new DistanceConstraint(composite.particles[1], composite.particles[0], bodyStiffness));
34+
35+
composite.thorax = new Particle(origin);
36+
composite.head = new Particle(origin.add(new Vec2(0,-5)));
37+
composite.abdomen = new Particle(origin.add(new Vec2(0,10)));
38+
39+
composite.particles.push(composite.thorax);
40+
composite.particles.push(composite.head);
41+
composite.particles.push(composite.abdomen);
42+
43+
composite.constraints.push(new DistanceConstraint(composite.head, composite.thorax, bodyStiffness));
44+
45+
46+
composite.constraints.push(new DistanceConstraint(composite.abdomen, composite.thorax, bodyStiffness));
47+
composite.constraints.push(new AngleConstraint(composite.abdomen, composite.thorax, composite.head, 0.4));
48+
3749

3850
// legs
3951
for (i=0;i<4;++i) {
@@ -42,27 +54,33 @@
4254

4355
var len = composite.particles.length;
4456

45-
composite.constraints.push(new DistanceConstraint(composite.particles[len-2], composite.particles[0], legSeg1Stiffness));
46-
composite.constraints.push(new DistanceConstraint(composite.particles[len-1], composite.particles[0], legSeg1Stiffness));
57+
composite.constraints.push(new DistanceConstraint(composite.particles[len-2], composite.thorax, legSeg1Stiffness));
58+
composite.constraints.push(new DistanceConstraint(composite.particles[len-1], composite.thorax, legSeg1Stiffness));
4759

4860

49-
composite.particles.push(new Particle(composite.particles[len-2].pos.add((new Vec2(20,(i-1.5)*30)).normal().mutableScale(20))));
50-
composite.particles.push(new Particle(composite.particles[len-1].pos.add((new Vec2(-20,(i-1.5)*30)).normal().mutableScale(20))));
61+
var lenCoef = 1;
62+
if (i == 1 || i == 2)
63+
lenCoef = 0.7;
64+
else if (i == 3)
65+
lenCoef = 0.9;
66+
67+
composite.particles.push(new Particle(composite.particles[len-2].pos.add((new Vec2(20,(i-1.5)*30)).normal().mutableScale(20*lenCoef))));
68+
composite.particles.push(new Particle(composite.particles[len-1].pos.add((new Vec2(-20,(i-1.5)*30)).normal().mutableScale(20*lenCoef))));
5169

5270
len = composite.particles.length;
5371
composite.constraints.push(new DistanceConstraint(composite.particles[len-4], composite.particles[len-2], legSeg2Stiffness));
5472
composite.constraints.push(new DistanceConstraint(composite.particles[len-3], composite.particles[len-1], legSeg2Stiffness));
5573

56-
composite.particles.push(new Particle(composite.particles[len-2].pos.add((new Vec2(20,(i-1.5)*50)).normal().mutableScale(20))));
57-
composite.particles.push(new Particle(composite.particles[len-1].pos.add((new Vec2(-20,(i-1.5)*50)).normal().mutableScale(20))));
74+
composite.particles.push(new Particle(composite.particles[len-2].pos.add((new Vec2(20,(i-1.5)*50)).normal().mutableScale(20*lenCoef))));
75+
composite.particles.push(new Particle(composite.particles[len-1].pos.add((new Vec2(-20,(i-1.5)*50)).normal().mutableScale(20*lenCoef))));
5876

5977
len = composite.particles.length;
6078
composite.constraints.push(new DistanceConstraint(composite.particles[len-4], composite.particles[len-2], legSeg3Stiffness));
6179
composite.constraints.push(new DistanceConstraint(composite.particles[len-3], composite.particles[len-1], legSeg3Stiffness));
6280

6381

64-
var rightFoot = new Particle(composite.particles[len-2].pos.add((new Vec2(20,(i-1.5)*100)).normal().mutableScale(5)));
65-
var leftFoot = new Particle(composite.particles[len-1].pos.add((new Vec2(-20,(i-1.5)*100)).normal().mutableScale(5)))
82+
var rightFoot = new Particle(composite.particles[len-2].pos.add((new Vec2(20,(i-1.5)*100)).normal().mutableScale(12*lenCoef)));
83+
var leftFoot = new Particle(composite.particles[len-1].pos.add((new Vec2(-20,(i-1.5)*100)).normal().mutableScale(12*lenCoef)))
6684
composite.particles.push(rightFoot);
6785
composite.particles.push(leftFoot);
6886

@@ -143,7 +161,7 @@
143161
VerletJS.prototype.crawl = function(leg) {
144162

145163
var stepRadius = 100;
146-
var minStepRadius = 40;
164+
var minStepRadius = 35;
147165

148166
var spiderweb = this.composites[0];
149167
var spider = this.composites[1];
@@ -222,43 +240,90 @@
222240
// entities
223241
var spiderweb = sim.spiderweb(new Vec2(width/2,height/2), Math.min(width, height)/2, 20, 7);
224242

225-
var spider = sim.spider(new Vec2(width/2,-300));
243+
var spider = sim.spider(new Vec2(width/2,-300));
244+
245+
246+
spiderweb.drawParticles = function(ctx, composite) {
247+
var i;
248+
for (i in composite.particles) {
249+
var point = composite.particles[i];
250+
ctx.beginPath();
251+
ctx.arc(point.pos.x, point.pos.y, 1.3, 0, 2*Math.PI);
252+
ctx.fillStyle = "#2dad8f";
253+
ctx.fill();
254+
}
255+
}
256+
257+
226258
spider.drawConstraints = function(ctx, composite) {
227259
var i;
228-
for (i in composite.constraints) {
260+
261+
ctx.beginPath();
262+
ctx.arc(spider.head.pos.x, spider.head.pos.y, 4, 0, 2*Math.PI);
263+
ctx.fillStyle = "#000";
264+
ctx.fill();
265+
266+
ctx.beginPath();
267+
ctx.arc(spider.thorax.pos.x, spider.thorax.pos.y, 4, 0, 2*Math.PI);
268+
ctx.fill();
269+
270+
ctx.beginPath();
271+
ctx.arc(spider.abdomen.pos.x, spider.abdomen.pos.y, 8, 0, 2*Math.PI);
272+
ctx.fill();
273+
274+
for (i=3;i<composite.constraints.length;++i) {
229275
var constraint = composite.constraints[i];
230276
if (constraint instanceof DistanceConstraint) {
231277
ctx.beginPath();
232278
ctx.moveTo(constraint.a.pos.x, constraint.a.pos.y);
233279
ctx.lineTo(constraint.b.pos.x, constraint.b.pos.y);
234-
ctx.strokeStyle = "#000";
235-
ctx.stroke();
236-
} else {
237-
constraint.draw(ctx);
280+
281+
// draw legs
282+
if (
283+
(i >= 2 && i <= 4)
284+
|| (i >= (2*9)+1 && i <= (2*9)+2)
285+
|| (i >= (2*17)+1 && i <= (2*17)+2)
286+
|| (i >= (2*25)+1 && i <= (2*25)+2)
287+
) {
288+
ctx.save();
289+
constraint.draw(ctx);
290+
ctx.strokeStyle = "#000";
291+
ctx.lineWidth = 3;
292+
ctx.stroke();
293+
ctx.restore();
294+
} else if (
295+
(i >= 4 && i <= 6)
296+
|| (i >= (2*9)+3 && i <= (2*9)+4)
297+
|| (i >= (2*17)+3 && i <= (2*17)+4)
298+
|| (i >= (2*25)+3 && i <= (2*25)+4)
299+
) {
300+
ctx.save();
301+
constraint.draw(ctx);
302+
ctx.strokeStyle = "#000";
303+
ctx.lineWidth = 2;
304+
ctx.stroke();
305+
ctx.restore();
306+
} else if (
307+
(i >= 6 && i <= 8)
308+
|| (i >= (2*9)+5 && i <= (2*9)+6)
309+
|| (i >= (2*17)+5 && i <= (2*17)+6)
310+
|| (i >= (2*25)+5 && i <= (2*25)+6)
311+
) {
312+
ctx.save();
313+
ctx.strokeStyle = "#000";
314+
ctx.lineWidth = 1.5;
315+
ctx.stroke();
316+
ctx.restore();
317+
} else {
318+
ctx.strokeStyle = "#000";
319+
ctx.stroke();
320+
}
238321
}
239322
}
240323
}
241324

242325
spider.drawParticles = function(ctx, composite) {
243-
var i;
244-
for (i in composite.particles) {
245-
var point = composite.particles[i];
246-
ctx.beginPath();
247-
ctx.arc(point.pos.x, point.pos.y, 1.2, 0, 2*Math.PI);
248-
ctx.fillStyle = "#ff6000";
249-
ctx.fill();
250-
}
251326
}
252-
253-
sim.crawl(0);
254-
sim.crawl(1);
255-
sim.crawl(2);
256-
sim.crawl(3);
257-
sim.crawl(4);
258-
sim.crawl(5);
259-
sim.crawl(6);
260-
sim.crawl(7);
261-
262327

263328
// animation loop
264329
var legIndex = 0;
@@ -267,7 +332,6 @@
267332
sim.crawl(((legIndex++)*3)%8);
268333
}
269334

270-
271335
sim.frame(16);
272336
sim.draw();
273337
requestAnimFrame(loop);

0 commit comments

Comments
 (0)