Appearance
Language
DeutschEnglish

Back to the overview

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.

Still image: an ink-blue banner with the white Moralo wordmark hangs from rings on a rod, finished with a violet edge at the bottom

The live demo needs JavaScript and WebGL 2. How the cloth is simulated is described below.

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. Where it tears, the weave frays thread by thread, and on the back the print shows through in mirror image.