Lab experiment

Cloth Simulation

A grid of particles connected by distance constraints, integrated forward in time by Verlet’s method. There are no springs, no velocities stored anywhere — only current and previous positions. Gravity pulls down, constraints pull back, and the cloth emerges from the tension between the two. Grab it. Tear it. Watch what happens when you remove a thread from a fabric held together only by geometry.

Particles 0

Constraints 0

FPS 60

Mode: Grab

Preset:

Gravity 1.0

Wind strength 0.0

Stiffness 5

Grid size 25 x 25

Verlet Integration

Most physics simulations use Euler integration: update velocity by acceleration, then update position by velocity. It is simple, but it is unstable. Small errors compound every frame, and energy leaks into the system until everything explodes. Verlet integration, published by Loup Verlet in 1967 for molecular dynamics, takes a different approach. Instead of storing velocity explicitly, it infers velocity from the difference between the current position and the previous position. The update rule is elegant:

// Velocity is implicit: (x - old_x)
let vx = particle.x - particle.ox;
let vy = particle.y - particle.oy;
particle.ox = particle.x;
particle.oy = particle.y;
particle.x += vx * damping + ax * dt * dt;
particle.y += vy * damping + ay * dt * dt;

There is no velocity variable. The “memory” of motion lives entirely in the gap between two positions. This makes the integrator symplectic — it conserves energy over long time spans, unlike Euler’s method. For cloth and rope, where we need stability more than precision, Verlet is the standard choice. It was popularized in game development by Thomas Jakobsen’s 2001 GDC talk, which showed how a ragdoll could be built from nothing but points and distance constraints.

Constraint Satisfaction

A cloth is not just particles falling under gravity — it is particles connected to each other by structural links. Each link says: “these two particles should be exactly this far apart.” After Verlet integration moves all the particles, most of these distance constraints will be violated. Jakobsen’s insight was to fix them iteratively. For each constraint, measure the current distance between two particles, compute the error, and move each particle halfway toward satisfying the constraint:

let dx = p2.x - p1.x;
let dy = p2.y - p1.y;
let dist = Math.sqrt(dx*dx + dy*dy);
let diff = (dist - restLength) / dist;
p1.x += dx * 0.5 * diff;
p1.y += dy * 0.5 * diff;
p2.x -= dx * 0.5 * diff;
p2.y -= dy * 0.5 * diff;

One pass through all constraints won’t satisfy them all — fixing one constraint can break another. But repeating this process multiple times (the “stiffness” slider above controls the iteration count) converges toward a valid solution. More iterations means stiffer, more rigid cloth. Fewer iterations means stretchy, elastic fabric. This is Gauss-Seidel relaxation applied to geometric constraints, and it is the beating heart of cloth simulation.

The Tearing Problem

Real fabric tears when the stress exceeds the material’s tensile strength. In our simulation, each constraint has a rest length — the distance the two particles “want” to be apart. When the actual distance exceeds a multiple of the rest length (the tear threshold), we simply delete the constraint. The two particles are no longer connected, and the cloth splits.

This is one of the beauties of the constraint-based approach: tearing is trivial to implement. In a spring-mass system, removing a spring requires careful handling of the force network. In position-based dynamics, you just stop enforcing a constraint, and the topology updates itself. Click “Cut mode” above and drag across the cloth to see it in action. Notice how the tear propagates naturally — removing one constraint puts more strain on its neighbors, which may then tear in turn, creating realistic ripping patterns.

From Cloth to Physics Engines

The technique you see above is not a toy. Hitman: Codename 47 (2000) used exactly this approach for its ragdoll physics — Thomas Jakobsen was the physics programmer at IO Interactive. The same ideas power cloth simulation in Tomb Raider, Uncharted, and countless other titles. Havok’s cloth module, used across the AAA games industry, is built on iterative constraint satisfaction. NVIDIA’s PhysX uses a GPU-accelerated version for real-time cloth in games and film.

The key insight that made this practical for games is that approximate solutions are fine. A cloth does not need to satisfy every constraint perfectly every frame. A few iterations of relaxation produce visually convincing results at a tiny fraction of the cost of an exact solver. This tradeoff — visual plausibility over physical accuracy — is the foundation of real-time physics.

Position-Based Dynamics

In 2007, Matthias Müller, Bruno Heidelberger, Marcus Hennix, and John Ratcliff published “Position Based Dynamics”, which unified and generalized the ideas Jakobsen had pioneered. Instead of computing forces and integrating accelerations, PBD works directly on positions. Constraints are geometric projections: “move this point so that it satisfies this condition.” Distance constraints keep cloth together. Collision constraints keep objects apart. Volume constraints keep soft bodies from collapsing.

The PBD framework has become the dominant approach in real-time physics. NVIDIA’s FleX engine, which handles cloth, fluids, rigid bodies, and soft bodies in a single unified solver, is built entirely on position-based dynamics. The method scales beautifully to GPU parallelism because constraint projection is a local operation — each constraint touches only a few particles, so thousands of constraints can be solved simultaneously. What you see in the canvas above is the same fundamental algorithm that drives physics in modern AAA games, just running on a 2D grid in your browser.