A sheet of Verlet points and springs that sags, swings and rips.
The cloth is a grid of points joined by distance constraints. Each frame, Verlet integration moves every point by its own momentum plus gravity, then a few relaxation passes nudge each pair of points back toward their rest length. A constraint stretched too far snaps, so tears spread realistically. A gentle wind keeps it alive.
Try it. Drag to pull the cloth. Right-click and drag, or Shift-drag, to cut it. Press R to rehang it.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a tearable cloth simulation with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it a dark background.
- Create a grid of about 40 x 25 points spaced 12 pixels apart, hanging from the top of the screen. Pin every few points in the top row so they never move.
- Join each point to its right and lower neighbors with a distance constraint whose rest length is the grid spacing.
- Move the points with Verlet integration: a point's velocity is its current position minus its previous position, so each step store the old position, add that velocity plus gravity, and you're done. Use a fixed time step of 1/60 s.
- After moving, run 5 relaxation passes over every constraint, nudging both ends halfway toward the rest length (skip pinned points).
- If a constraint stretches past about 3 times its rest length, delete it. That is all tearing takes.
- Drag with the mouse to pull the points near the cursor along with it, and right-click drag to cut constraints near the cursor. Draw every constraint as a line.
Once that works, make it beautiful:
- Fill each grid cell as two triangles instead of drawing lines, and skip a triangle when one of its edges has torn.
- Shade each cell by how squashed it is compared with its rest area so folds look darker, and use a stripe pattern from the grid coordinates so the fabric reads like tartan.
- Add a gentle gusting wind with a little noise across the sheet, and press R to rehang it.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as wrapping a photo texture onto the cloth, adding diagonal constraints for stiffer fabric, or letting the cloth collide with a ball.
