Verlet Cloth Tearing
A mesh of particles held together by distance constraints, integrated by Verlet’s method. There are no springs here — only positions, previous positions, and the geometry that binds them. Click and drag across the fabric to tear it apart. Each constraint breaks when stretched beyond its threshold, and the tear propagates through the mesh like a rip through real cloth. Wind pushes, gravity pulls, and the fabric responds to everything you throw at it.
Verlet Integration
Most physics engines store velocity explicitly and integrate it forward each frame. Verlet integration takes a different approach: velocity is implicit, encoded as the difference between the current position and the previous position. The update rule is simple and elegant — move each particle by how much it moved last frame, plus acceleration times dt². This makes the integrator naturally stable. Small numerical errors do not compound into explosions the way they do with Euler’s method.
Constraint-Based Tearing
Each pair of neighboring particles is connected by a distance constraint — a rule that says “these two points should be exactly this far apart.” After integration, constraints are violated, so we run multiple passes of relaxation: for each constraint, measure the actual distance, compute the error, and nudge each particle halfway toward the correct separation. More iterations means stiffer cloth.
Tearing is beautifully simple in this framework. Each constraint tracks how far it has been stretched relative to its rest length. When the stretch ratio exceeds a threshold, the constraint is deleted. The two particles are no longer connected, and the cloth splits. Because removing one constraint increases strain on its neighbors, tears propagate naturally — you get realistic ripping behavior from a single threshold parameter.
Rendering the Mesh
The cloth is drawn as a triangulated mesh. Each quad in the grid is split into two triangles, and each triangle is shaded based on the strain of its edges — the ratio of current length to rest length. Unstrained fabric appears in a neutral tone. As strain increases, the color shifts toward a warm gold, giving a visual indication of where the cloth is about to tear. This makes the simulation not just interactive but readable — you can see the stress concentrations before the tear even happens.
Position-Based Dynamics in Practice
This simulation implements a subset of Position-Based Dynamics (PBD), the framework published by Müller et al. in 2007 that unified Verlet integration with iterative constraint projection. The same ideas power cloth, rope, soft bodies, and ragdolls in production game engines. NVIDIA’s FleX, Havok Cloth, and Unity’s Burst-based cloth solver all descend from this lineage. What you see here is the same algorithm, just running on a 2D canvas in your browser.