string-mat

A browser visualization of real string and cloth material science. Each string carries genuine engineering parameters, strings are woven into a mat, and you can grab, pull, collide, tension, and tear the whole thing with your mouse while the physics stays honest.

Real materials, real units

The simulation runs in SI units from end to end. Sliders are labeled in GPa, MPa, kg/m³, and mm, converted at the edge and simulated in true physical values, never in fudge factors. The presets are real materials with real numbers: cotton, wool, nylon, steel, Kevlar, rubber, and spider silk. Pick spider silk and it behaves like spider silk, not like a tuned game rope.

The solver

At the core is an XPBD (extended position-based dynamics) string solver using small substeps and a forward-and-backward stretch sweep, tri-point bending, floor contact with friction, tearing, and a kinematic grab for the mouse. Stretch compliance, bending stiffness, particle mass, and the tearing threshold all derive directly from the material's modulus, cross-section, and ultimate strength, so the same physics reads a tension force straight off the strain.

Weaving a mat

The woven mat treats each crossing as a node where two yarns slide against each other, with Coulomb stick-and-slip friction at the crossings and a weak shear resistance holding the weave square. A movable ball can be dragged into the cloth to drape it, and each yarn can tear on its own. The friction that holds real fabric together is modelled from both yarns' tensions pressing at the crossing, which is exactly why a hard yank grips instead of slipping straight through.

Physics lessons worth keeping

Some behaviours only emerge when you get the details right. The strings are initialized at their equilibrium shape (an exact catenary between pins) and warmed up with tearing switched off, because a straight-line start snaps taut on the first frame and shreds itself. When something does tear, only one segment breaks per frame, so a real crack propagates and relaxes rather than exploding into confetti. Draped fabric even relaxes its resting stress over several seconds as friction slowly creeps, the way a real cloth settles.

Technical notes

The solver is deliberately dependency-free so it runs headlessly in plain Node for smoke tests with no build step. Rendering uses instanced Three.js geometry with stress-based coloring that warms from the base color through amber to red as a strand approaches its breaking point. Built with TypeScript and Vite, deployed to Cloudflare Workers as static assets. Every physics decision traces back to a verified research report kept alongside the code.