Verlet Cloth Banner

About this animation

A printed fabric banner is laced through real holes in its hem onto a steel wire strung between two stand-offs, and every part of it is simulated: the cloth and the wire are particles integrated with Verlet in three dimensions, then lit in hand-written WebGL2. Verlet is the reason cloth code stays short enough to read — there is no velocity stored anywhere, only the previous position, and motion is whatever gap sits between that and the current one. The same property is the trap. Teleport a particle to the pointer without moving its history and it covers the whole jump in one step, and the sheet detonates; so a grabbed point is pinned to the hand but never moved further per step than a hand could move it, which makes that gap its honest speed, and it is thrown at exactly that speed when you let go. The links are relaxed several times per step, weighted by inverse mass: structural links hold the weave, two diagonals per cell brace the shear, and softer skip-one links resist bending so it folds like fabric rather than foil. The timestep is fixed behind an accumulator with the frame delta clamped, because implied velocity is measured per step and one long frame would otherwise throw the cloth off screen. Wind pushes each point along its own normal, in proportion to how squarely it faces the gust, which is what makes ripples travel and the free corners flutter. Nothing on the cloth is pinned. Each grommet is itself a node of the wire, so the banner hangs on the wire and the wire bows under the banner with no special case, and pulling the hem pulls the wire. Between grommets the wire is one straight link, because a taut wire runs straight between the loads it carries and kinks at each one. Relaxation alone would let a chain carrying a whole banner stretch like rubber, so every wire node is also tethered to both anchors and can never be further from either than the wire's own length to it: steel can bend but not stretch. The holes are cut out of the cloth in the shader, and the wire laces through them, in front of the cloth on one span and behind it on the next; the hem rows are kept on their own side of it, the one place wire and cloth collide. Rendering takes four passes: the silhouette of cloth and wire slid along the light onto the wall plane, a wall that blurs it into a penumbra beside a soft key light, a round steel cable built as a ribbon each frame, and the cloth itself — two-sided, with a plain-weave normal that fades before it can shimmer, a satin sheen, light through the weave where it turns away and occlusion in the deep folds. The print is a canvas texture in the page's own font, the ink flips to stay readable on any tint, and without WebGL2 it falls back to a flat-shaded cloth.