Rope Type
Grab a letter and fling it
Rope Type
What it is
A word spelled out in glowing beads strung on soft-body rope. Grab any bead and fling it and the whole phrase sags, swings and snaps back; take the scissors to a strand and watch that piece fall.
The physics is a from-scratch 2D Verlet integrator with Jakobsen distance constraints — each letter is a chain of point masses hanging from a rail — running on a plain canvas with no physics library and no WebGL.
Verlet integration stores each point's previous position instead of its velocity, so a constraint can simply move a point and the motion that results is correct on the next step. That is what makes rope cheap: relax every distance constraint a few times per frame and the strand behaves like a strand, with no springs to tune and nothing to blow up. Cutting is just deleting a constraint, which is why the severed piece falls under the same rules that were already holding it up.
The letters are sampled into chains rather than drawn as glyphs: each one is walked to find points along its stroke, and those points become the masses. That is why the phrase can sag and swing as a single object and still be legible — the shape you read is the shape the physics is holding, not a picture of a shape with rope behind it.
How to use it
- Drag any bead to pull the rope.
- Switch to the scissors and drag across a strand to cut it.
- Reset to restring the phrase.
More experiments
- Shatter Type — Canvas, Computational Geometry, Voronoi
- Chladni Plate — canvas, physics, simulation
- Rolling Shutter — Canvas, Photography, Optics