Ut Tensio, Sic Vis: Making Letters You Can Touch
The story behind The Elastic Limit
Inspired by Hooke’s law on Wikipedia
Built with Canvas 2D · opentype.js · Web Audio API (AudioContext, OscillatorNode)
Techniques Verlet Integration · Spring-Mass Physics · Chromatic Aberration
Direction Apply Hooke’s law literally to typography — parse font bezier paths into spring-connected node meshes that deform, stretch, and snap back with real elastic physics
Result Grab any letter in the word ELASTIC and drag it into an abstract smear of springs, chromatic fringe, and ascending pitch — release and watch Hooke’s law snap it back into the shape the type designer intended
The Story
In 1676, Robert Hooke published a law of physics as a Latin anagram: ceiiinosssttuv. Scrambled letters hiding a truth about elasticity. Two years later he revealed the solution: ut tensio, sic vis — as the extension, so the force. The restoring force of a spring is proportional to how far you stretch it, and always directed back toward rest.
The minus sign in F = -kx is everything. It means the system always wants to return. Stretch a spring and it pulls back. Compress it and it pushes out. Below the elastic limit, no deformation is permanent. The material remembers its shape.
We wanted to apply that law to letters. Not as a metaphor — literally. Take the glyph paths of a font, turn them into a mesh of spring-connected nodes, and let Hooke’s law govern their behavior. Grab an E and stretch it. The stems thin out, the crossbars elongate, the serifs distort. Release, and the restoration force snaps everything back into the shape the font designer intended. The letter remembers what it is.
The Take
The word “ELASTIC” sits centered on a black screen. It looks like text but it isn’t — every letter is a soft body made of hundreds of nodes connected by springs. The nodes are sampled directly from the font’s bezier path data. The springs are the constraints that hold the letter in its recognizable shape.
Click to begin. The word breathes gently — a subtle oscillation in the nodes that signals aliveness. A hint appears: “Grab a letter.” Touch any part of any letter and drag. The letterform stretches like rubber. The stroke thins as it elongates, because the same amount of “ink” is distributed across a longer path. Chromatic aberration bleeds at the edges — red and blue fringe splitting apart as the deformation increases. A low hum rises in pitch, climbing through an F# minor pentatonic scale as the tension builds.
Release. Hooke’s law takes over. The nodes snap back toward their rest positions, overshoot, oscillate, and settle. A percussive pluck sounds — its pitch determined by how much force was stored at the moment of release. Gentle pulls produce low, quiet plucks. Violent stretches produce high, sharp ones.
The word is always legible within a second of release. The springs always win.
The Tech
The pipeline has four stages: font parsing, physics mesh construction, Verlet simulation, and Canvas 2D rendering.
Font parsing uses opentype.js to load a variable TTF file (Space Grotesk Bold) and extract the raw path commands — MoveTo, LineTo, QuadraticCurveTo, CubicCurveTo, Close. These are the actual bezier curves the type designer drew. The word “ELASTIC” is rendered at a size calculated to fill 70% of the viewport width, centered vertically.
Mesh construction samples the bezier paths into discrete points spaced 6 pixels apart. Each point becomes a physics node. Sequential nodes along a contour are connected by springs with rest lengths matching their initial spacing. To prevent the contours from collapsing under deformation, structural skip-springs connect every node to its second, third, and fourth neighbor along the contour. This creates a web of constraints that gives each letter rigidity without making it stiff.
Verlet integration drives the physics. Each node stores two positions: current and previous. Velocity is implicit — the difference between current and previous position. On each frame: compute velocity as (current - previous) * damping, update previous to current, advance current by velocity. Then apply the restoration spring: for every node, compute the vector from current position back to rest position, and add stiffness * displacement. This is Hooke’s law: F = -kx, where k is 0.35.
After integration, three iterations of spring constraint solving keep the mesh coherent. For each spring: measure current length, compare to rest length, and push/pull both endpoints proportionally to correct the difference.
The grabbed node is a special case — its position is pinned to the pointer, and its previous position is set equal to current (zero velocity). When released, the velocity is zero but the displacement from rest is large, so the restoration spring immediately accelerates the node back. The overshoot-oscillate-settle behavior emerges naturally from the Verlet integration with damping at 0.92.
Canvas 2D rendering draws each contour as a closed path connecting its nodes with lineTo calls. Stroke width decreases with average displacement — the letterforms thin as they stretch, like actual rubber. When displacement exceeds a threshold, two additional passes draw the contour offset in red (#ff3366) and blue (#3366ff) to create chromatic aberration. A semi-transparent background clear on each frame (alpha 0.12) leaves fading motion trails during snap-back.
Audio maps to F# minor pentatonic across three octaves (F#2 to E5). The tension oscillator is a sine wave whose frequency climbs the scale as average node displacement increases — low hum at rest, ascending pitch under tension. On release, a triangle-wave pluck picks a note from the same scale based on stored force. Everything stays harmonically coherent.
The Experience
You open the page. A dark screen. White geometric text: THE ELASTIC LIMIT. Below it, pulsing: “Click to begin.”
You click. The overlay fades. There it is — ELASTIC — in bold white letters on black. The letters are breathing. Not metaphorically. The edges shimmer with a gentle oscillation, like something alive and at rest.
“Grab a letter.”
You touch the A. Your finger drags and the crossbar stretches with you. The left stem bends, the right stem follows, the whole letter deforms into something unrecognizable. The stroke is thinner now — the letter is being stretched beyond its intended proportions. At the edges, color bleeds. Pink on one side, blue on the other. A hum rises — low at first, then climbing as you pull harder. F-sharp, A, B, C-sharp, each note ascending with the tension.
You let go.
The A snaps back. Not instantly — it overshoots its rest position, wobbles, rings like a plucked string. A percussive note sounds, sharp and bright. The motion trails leave a fading ghost of the snap-back trajectory. Within a second, the A is the A again. Perfectly formed. As if nothing happened.
You try the whole word. Grab the E, drag it across the screen. The surrounding letters deform sympathetically through the structural springs. The word becomes an abstract smear of white lines and chromatic fringe. The hum is loud now, high in the scale. Release — and everything rushes back. Seven letters finding their shapes simultaneously, oscillating at slightly different frequencies, settling into the word ELASTIC.
Hooke was right. As the extension, so the force.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.