Cloth Simulator
liveA GPU-friendly 2D cloth simulation built entirely in vanilla JavaScript and HTML5 Canvas. A grid of particles connected by distance constraints forms realistic fabric that responds to gravity, wind, and user interaction. Drag to pull, right-click to tear, press W for gusting wind, or switch to burn mode and watch fire propagate across threads. Multiple preset scenes — flag, curtain, hammock, web, and cape — demonstrate different constraint layouts. Material presets (cotton, silk, denim, chain) adjust stiffness, weight, and tear threshold. All physics run at 60fps with configurable gravity direction and wind strength.
Screenshots
Tech Stack
Why It Works
Particle-constraint physics engine running at 60fps with no external libraries
Five interactive modes — grab, tear, burn, pin, and wind — for hands-on fabric manipulation
Six preset scenes showcase different constraint topologies and anchor configurations
Material system with adjustable stiffness, weight, and tear thresholds for realistic behavior
Want the how and why?
I write up builds like this one — the timeline, the method, and the parts worth copying. No fluff, just what actually happened.