OneTaskBy Tim King · Updated
Cloth Simulation
Drag, Tear and Blow a Hanging Sheet of Cloth in Your Browser
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Cloth Simulation works
This cloth simulation hangs a sheet you can drag and tear. A sheet of cloth hangs from a row of pins. Drag any part of it to tug it around, sweep the pointer quickly across it to cut the threads under your path, press Gust of wind to blow it sideways, or tick Steady wind and watch it billow. Change how many points it is made of, how it is pinned, how stiff the threads are and how much the air slows it, and press Cut the pins to let the whole thing drop.
Cloth simulation: getting a good result
Cloth in games and films is almost always modelled the same way: a grid of point masses joined by springs. Each point has a little weight, each thread between neighbours pulls the two points back towards their rest distance, and gravity, wind and your pointer push the points around. Run that a few hundred times a second and the grid drapes, swings and folds like fabric. This page does exactly that in a 2D physics engine in your browser, drawing the threads and leaving the points invisible.
Stiffness. The stiffness slider controls how hard each thread pulls back when it is stretched. Low values give a stretchy, jelly-like sheet that sags a long way under its own weight; higher values behave more like woven cloth. Push it too high on a very fine grid and the sheet starts to jitter, which is the classic failure of a spring-mass model when the springs are stiffer than the time step can handle — the reason real cloth solvers use constraint projection rather than plain springs.
Air drag. Every point loses a fraction of its speed each step, standing in for air resistance. With no drag the cloth keeps swinging like a pendulum after you let go; with a lot of drag it moves as if underwater. Drag is also what makes wind work: the steady wind option applies a gently pulsing sideways force, and the sheet settles at the angle where gravity, wind and thread tension balance.
Cutting. A quick sweep of the pointer removes every thread whose midpoint lies close to the path. Because there is no cross-bracing in the grid, a horizontal cut lets everything below it fall away as a separate piece, while a diagonal cut leaves a ragged flap swinging from a few threads. The stats count threads, cuts and points, and report the lowest point of the cloth so you can see how far it has sagged or fallen. Everything runs locally; Pause, Fullscreen and Save PNG work as usual, and Restart rebuilds the sheet.
FAQ
Why does the cloth start jittering when I raise the stiffness?
A spring-mass model can only handle springs up to a certain stiffness for a given time step. Push past that and each step overshoots the rest length, so the points oscillate instead of settling. Lower the stiffness a little, or use a coarser grid with fewer points, and the jitter stops.
How do I cut the cloth?
Sweep the pointer quickly across it. Any thread whose midpoint lies close to the path is removed. A slow drag moves the cloth instead of cutting it, so speed is what tells the two gestures apart.
What is the difference between Gust of wind and Steady wind?
Gust applies a single sideways shove and lets the cloth swing back. Steady wind keeps a gently pulsing force on every point until you untick it, so the sheet settles at an angle where gravity, wind and thread tension balance, and billows as the force pulses.
Why does a diagonal cut leave a flap while a horizontal one drops a whole piece?
The grid has no cross-bracing: each point is tied only to its four neighbours. A horizontal cut severs every vertical thread along a row, so everything below it is a separate piece. A diagonal cut leaves some threads intact on either side, and the piece hangs from those.
See also: all Simulations & Screensavers tools, Images, Audio, Video & Screen, PDF, SVG, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Pendulum Wave
A row of pendulums drifts into waves and back into line every cycle.
Bridge Builder
Build a truss bridge, then send a truck across and see if it holds.
Physics Sandbox
Drop shapes, drag them around and play with gravity, bounce and friction.
Bouncing Balls Screensaver
Full-screen bouncing balls with adjustable count, size, bounce and gravity.
3D Coin Flip
Toss a physics coin in 3D and watch it land heads or tails.