About This Demo

Controls:

• Click and release.

This is a physics-based fabric simulation using HTML5 Canvas. There is no physics library; the entire engine is hard-coded.

The way it works is that every joint has a position, velocity, and acceleration. These are integrated via addition:

points[i].x+=points[i].vx;
points[i].y+=points[i].vy;

points[i].vx+=points[i].ax;
points[i].vy+=points[i].ay;

The top row of points are ignored in these calculations, making them static. Each line represents a constraint. Constraints follow Hooke’s Law. The fabric properties simply emerge from this basic system.