Showcase 02 · Physics
Cloth
A banner with the Moralo mark hangs as real cloth in the wind. Grab it, pull it and throw it. With too much force it tears exactly where you pull.
The live demo needs JavaScript and WebGL 2. How the cloth is simulated is described below.
- Particles
- 0
- Threads
- 0
- Iterations
- 0
- Torn
- 0
- Frames/s
- –
- Physics
- Verlet · WebGL 2
How it works
The cloth is a grid of particles connected by threads: straight threads hold it together, diagonal ones resist shearing, long springs give it stiffness. Every step, Verlet integration carries each particle on from its last movement, then all threads are pulled back to their length several times. A thread stretched too far snaps, and the hole opens exactly where you pull.
The wind is a field that changes over space and time and presses on every triangle along its surface normal. The pointer is a sphere the cloth drapes around. The graphics card draws the cloth with computed normals, a woven surface and soft light. The mark is the texture, and its colours come from the design tokens.