Cloth simulation
How Verlet integration and position-based constraints turn a grid into cloth.
Each grid point stores current position, previous position, accumulated acceleration, inverse mass, and pin state in typed arrays. Verlet integration derives velocity from the current/previous displacement, applies damping and acceleration, then advances position.
Constraint families
- Structural: horizontal and vertical neighbors preserve the weave.
- Shear: diagonal neighbors resist diamond-shaped collapse.
- Bend: particles two cells apart resist tight folding without making the cloth rigid.
The solver projects distance errors iteratively. Pinned particles have zero inverse mass and do not move during integration or constraint projection.
Texture resolution is separate
A 2048 × 1365 image does not create millions of particles. The texture remains a high-resolution GPU image while segments: { x: 32, y: 20 } creates only 693 simulated points. Raise segment count for finer silhouettes and folds, not for sharper artwork.
Fixed time
The animation loop accumulates elapsed display time and advances the solver in fixed ticks. A capped frame delta prevents a hidden or stalled tab from triggering an unstable catch-up burst.