Cloth Simulation
CanvasA spring-mass grid integrated with Verlet physics. The top row is pinned. Click and drag to grab and pull the cloth. Crank the wind up to see ripples propagate across the fabric.
concepts
Position-based physics: next position = 2×current − previous + acceleration×dt². Velocity is implicit in the delta between positions — no separate velocity variable needed.
Springs are satisfied iteratively: for each pair, compute the error and nudge both nodes toward their rest length. More iterations (stiffness slider) = stiffer cloth per frame.
Structural springs (horizontal + vertical) resist stretching. Shear springs (both diagonals) prevent the grid from collapsing sideways when the cloth folds.
Pinned nodes are skipped during integration and constraint correction — they never move. The cloth hangs from them. Release them to watch the cloth fall freely.
A sinusoidal term keyed to each node's x-position and time adds spatially-varying force. Nodes across the cloth experience different wind magnitudes at any given frame, seeding ripple waves.
core pattern
// Verlet step with turbulent wind
const turbulence =
Math.sin(n.x * 0.012 + time * 4)
* Math.abs(wind) * 0.45;
n.x += vx + (wind + turbulence) * 0.07;
// Satisfy one spring constraint
const dx = b.x - a.x;
const dist = Math.sqrt(dx*dx + dy*dy);
const diff = (dist - restLen) / dist * 0.5;
if (!a.pinned) { a.x += dx * diff; }
if (!b.pinned) { b.x -= dx * diff; }