Skip to content

Commit 6468ab3

Browse files
subprotocolsubprotocol
committed
adding cloth experiment
1 parent 0889a78 commit 6468ab3

File tree

3 files changed

+131
-1
lines changed

3 files changed

+131
-1
lines changed

‎experiments/03-cloth.html

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Verlet Spider web - Sub Protocol</title>
5+
<meta name="author" content="Sub Protocol" />
6+
<meta charset="UTF-8" />
7+
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen, projection" />
8+
<script type="text/javascript" src="../js/common/vec2.js"></script>
9+
<script type="text/javascript" src="../js/common/constraint.js"></script>
10+
<script type="text/javascript" src="../js/common/simulation.js"></script>
11+
</head>
12+
<body>
13+
<canvas id="scratch" style="width: 800px; height: 500px; background: #000;"></canvas>
14+
<script type="text/javascript">
15+
16+
17+
window.onload = function() {
18+
var canvas = document.getElementById("scratch");
19+
20+
// canvas dimensions
21+
var width = parseInt(canvas.style.width);
22+
var height = parseInt(canvas.style.height);
23+
24+
// retina
25+
var dpr = window.devicePixelRatio || 1;
26+
canvas.width = width*dpr;
27+
canvas.height = height*dpr;
28+
canvas.getContext("2d").scale(dpr, dpr);
29+
30+
// simulation
31+
var sim = new VerletSimulation(width, height, canvas);
32+
33+
// entities
34+
var min = Math.min(width,height)*0.5;
35+
var segments = 20;
36+
var cloth = sim.cloth(new Vec2(width/2,height/3), min, min, segments, 6, 0.9);
37+
38+
cloth.drawConstraints = function(ctx, composite) {
39+
}
40+
41+
cloth.drawParticles = function(ctx, composite) {
42+
43+
var stride = min/segments;
44+
var x,y;
45+
for (y=1;y<segments;++y) {
46+
for (x=1;x<segments;++x) {
47+
ctx.beginPath();
48+
49+
var i1 = (y-1)*segments+x-1;
50+
var i2 = (y)*segments+x;
51+
52+
ctx.moveTo(cloth.particles[i1].pos.x, cloth.particles[i1].pos.y);
53+
ctx.lineTo(cloth.particles[i1+1].pos.x, cloth.particles[i1+1].pos.y);
54+
55+
ctx.lineTo(cloth.particles[i2].pos.x, cloth.particles[i2].pos.y);
56+
ctx.lineTo(cloth.particles[i2-1].pos.x, cloth.particles[i2-1].pos.y);
57+
58+
var off = cloth.particles[i2].pos.x - cloth.particles[i1].pos.x;
59+
off += cloth.particles[i2].pos.y - cloth.particles[i1].pos.y;
60+
off *= 0.25;
61+
62+
var coef = Math.round((Math.abs(off)/stride)*255);
63+
if (coef > 255)
64+
coef = 255;
65+
66+
ctx.fillStyle = "rgba(" + coef + ",0," + (255-coef)+ ",1)";
67+
68+
69+
70+
ctx.fill();
71+
}
72+
}
73+
74+
/*var i;
75+
for (i in composite.particles) {
76+
var point = composite.particles[i];
77+
ctx.beginPath();
78+
ctx.arc(point.pos.x, point.pos.y, 1.2, 0, 2*Math.PI);
79+
ctx.fillStyle = "#ff6000";
80+
ctx.fill();
81+
}*/
82+
}
83+
84+
// animation loop
85+
var legIndex = 0;
86+
var loop = function() {
87+
sim.frame(16);
88+
sim.draw();
89+
requestAnimFrame(loop);
90+
};
91+
92+
loop();
93+
};
94+
95+
96+
</script>
97+
</body>
98+
</html>

‎experiments/03-spiderweb.html renamed to ‎experiments/04-spiderweb.html

File renamed without changes.

‎js/common/simulation.js

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,38 @@ VerletSimulation.prototype.lineSegments = function(vertices, stiffness) {
101101
return composite;
102102
}
103103

104+
VerletSimulation.prototype.cloth = function(origin, width, height, segments, pinMod, stiffness) {
105+
106+
var composite = new this.Composite();
107+
108+
var xStride = width/segments;
109+
var yStride = height/segments;
110+
111+
var x,y;
112+
for (y=0;y<segments;++y) {
113+
for (x=0;x<segments;++x) {
114+
var px = origin.x + x*xStride - width/2 + xStride/2;
115+
var py = origin.y + y*yStride - height/2 + yStride/2;
116+
composite.particles.push(new Particle(new Vec2(px, py)));
117+
118+
if (x > 0)
119+
composite.constraints.push(new DistanceConstraint(composite.particles[y*segments+x], composite.particles[y*segments+x-1], stiffness));
120+
121+
if (y > 0)
122+
composite.constraints.push(new DistanceConstraint(composite.particles[y*segments+x], composite.particles[(y-1)*segments+x], stiffness));
123+
}
124+
}
125+
126+
for (x=0;x<segments;++x) {
127+
if (x%pinMod == 0)
128+
composite.pin(x);
129+
}
130+
131+
this.composites.push(composite);
132+
return composite;
133+
}
134+
135+
104136
VerletSimulation.prototype.tire = function(origin, radius, segments, spokeStiffness, treadStiffness) {
105137
var stride = (2*Math.PI)/segments;
106138
var i;
@@ -152,7 +184,7 @@ VerletSimulation.prototype.frame = function(step) {
152184
// gravity
153185
particles[i].pos.mutableAdd(this.gravity);
154186

155-
// interia
187+
// inertia
156188
particles[i].pos.mutableAdd(velocity);
157189
}
158190
}

0 commit comments

Comments
 (0)