← everything I built
Cloth Simulator
liveA piece of cloth hanging on the screen that behaves like real fabric. It is built from a grid of points joined to their neighbours, and everything it does follows from that. It sags under its own weight, swings when you pull it, and rips when you pull too hard. Drag it with the mouse, tear a hole in it, turn the wind on, or set it alight and watch the flames travel along the threads. There are ready made setups to try, including a flag, a curtain, a hammock, a spider web and a cape, and you can switch the material between cotton, silk, denim and chain, which changes how heavy and how stretchy it is.
what it does
- The cloth is not an animation. Every point is worked out as you watch, sixty times a second, with no outside code doing the job.
- Five things to do to it: grab it, tear it, burn it, pin it, and blow wind at it.
- Ready made setups to try: a flag, a curtain, a hammock, a spider web and a cape, each hanging from different points.
- Four materials to switch between. Cotton, silk, denim and chain each have their own weight, stiffness and tearing point.
Built with
HTML5 CanvasVanilla JavaScriptCSS3Physics Engine
want the how and why?
I write up builds like this one. What I did, what went wrong, and what is worth copying.
Read the writing →