Home▸Physics & Mechanics▸Cloth Simulation (2D)

Cloth Simulation (2D)

A 2D mass-spring cloth: structural, shear and bend springs relaxed with Verlet integration under gravity and gusting wind, draggable and tearable with the mouse, with live stiffness, wind, gravity and grid-resolution controls.

Physics & Mechanics2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-07-cloth-simulation ↗ Open standalone

This 2D companion strips the cloth simulation down to a flat mass-spring mesh you can watch and manipulate directly: a grid of point masses linked by structural, shear and bend springs, integrated with Verlet position updates and relaxed with iterative constraint solving. Drag any node to see the fabric deform and settle, or switch to tear mode to rip the weave apart near a spring and watch the hole propagate under gravity and wind. The stiffness, wind strength, gravity and grid-resolution sliders make the underlying spring-mesh assumptions explicit — soften the springs and the cloth sags and jiggles like jersey; stiffen them and it behaves like canvas; raise the resolution and the simulation gets a finer, more fabric-like drape at the cost of more constraint solving per frame.

⚙ Under the hood

A 2D mass-spring cloth mesh with structural, shear and bend springs, relaxed with Verlet integration under gravity and gusting wind, draggable and tearable with the mouse.

cloth simulationmass-spring systemverlet integrationconstraint solvingwind2d

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)