How to play
This is a sandbox, so there is nothing to win. Grab the cloth and swing it around, then try to rip it. Pick a preset for a different set-up: a curtain, a flag, a hammock, a hanging sheet, a sheet falling onto a ball, or a coarse net. Lower Tear strength for fragile fabric, or push it to the end for cloth that never breaks. Reset rebuilds the preset and repairs the cloth.
Controls
- Grab: press and drag. Nearby points follow the pointer, the nearest most strongly. Let go while moving and the cloth is thrown. A pinned point can be dragged to move its pin.
- Cut: drag across the cloth to slice every link your stroke crosses, even a fast one.
- Pin: click or tap a point to pin it, and again to release it.
- Blow: press and hold for a local fan that pushes the cloth away from the pointer.
- Ball: with the ball on, drag it by the ring in its middle with Grab.
- Touch: every tool works with fingers, and two fingers grab two places at once, without scrolling the page.
- Keyboard: Space plays or pauses, S steps once, R resets, keys 1 to 4 choose a tool, W switches the wind on or off.
- Settings: gravity, wind, damping, stiffness, tear strength, grab radius, speed, resolution, display mode and colour. They are remembered in this browser. The Net shows as wireframe unless you pick a display mode.
How the simulation works
The cloth is a grid of point masses joined by springs. Each pair of neighbours is a link with a rest length. Horizontal and vertical links hold the shape. Optional diagonal links resist shearing, which makes the fabric stiffer.
Motion uses Verlet integration. Instead of storing a velocity, each point remembers where it was one step ago, and the next position is
Here c is air damping and a the acceleration from gravity and wind. Velocity is just the difference of two positions, so when a rule moves a point, its velocity changes with it. This is cheap and stable, hence its popularity for cloth, ropes and ragdolls. The simulation runs a fixed 60 steps per second, each split into two to six sub-steps, so it behaves the same on any screen.
After moving the points, the solver enforces the links. For a pair at distance d with rest length L, each end moves half the error along the line between them:
Fixing one link disturbs its neighbours, so the pass is repeated. The Stiffness slider sets how many passes each step gets. With few, the cloth stretches under its own weight. With many, it behaves like stiff fabric, at a higher cost.
Tearing is a simple rule: if a link is stretched beyond Tear strength times its rest length, it is removed for good. Neighbouring links then take more load, so a small rip tends to run on. The Cut tool removes every link that your stroke crosses.
Wind pushes on the cloth according to its orientation. The cloth is split into small triangles, and the force on each is proportional to (w·n)n, where w is the wind relative to the moving triangle and n its unit normal. A surface facing the wind feels a strong push, one edge-on feels almost none. Gusts and ripples travel downwind, and the cloth has a little depth, which makes a flag flutter. The Flag is a lighter fabric: wind moves it more, gravity less.
Filled display shades that depth: each point gets a brightness from the way the surface around it faces the light, blended smoothly between points, so folds show as soft bands. The reverse side is paler.
What is simplified: there is no collision between parts of the cloth, hardly any bending stiffness (only sharp creases are smoothed), the ball and walls are tested only in the 2D view, and the depth is only a thin slab. Stress view colours each link from green to red by its stretch.
Things to try
- Load the curtain and compare Stiffness 1 with 20. The Max stretch readout puts a number on it.
- Set Tear strength to about 1.3 and drag the hanging sheet down. Then try again at the slider's end.
- Choose the Flag, switch to Stress display and watch the tension change as gusts arrive. Turn the wind direction.
- Cut a horizontal line across the curtain and watch the lower half fall.
- Pin a few points of the draped cloth to make a lopsided tent.
- Switch diagonal links off to see how floppy the fabric becomes.
Frequently asked questions
Why does my cloth stretch like rubber?
Stiffness is the number of solver passes. At low values the correction cannot keep up with gravity. Raise it or turn on diagonal links.
Why does the cloth go through itself?
Self-collision is not modelled, because checking every pair of points would be too slow. Only the floor, walls and the ball are solid.
Is this a real fabric simulation?
It uses a simplified technique common in games: it shows tension, sagging, tearing and wind, not the exact folding of a real textile.
Why did the resolution change by itself?
If the page cannot keep up, it lowers the resolution to stay smooth. You can raise it again in Settings.
Does it work offline?
Yes. Everything runs in your browser and nothing is sent anywhere.