Guide & colophon · No.140
Coriolis, made.
A single-purpose page whose job is to make a fictitious force legible. Its audience: anyone who was told cyclones spin because of the Coriolis effect and never got to see why. It does one thing — lets you toggle the frame and watch a straight throw become a curve.
The concept
On a slowly rotating disc, a puck is launched in a dead-straight line. In the ground-truth (inertial) frame it stays straight while the disc turns beneath it. In the rotating frame — co-moving with the disc — that same path bends into a spiral. The Coriolis force is the sideways push you must invent to explain the bend; change frames and it disappears. The page keeps pucks launching and curving at rest, so the effect is always on show.
Palette — argued from the field
Type
Technique — the signature
Physics runs in one honest place: world coordinates. Each puck stores a launch direction and speed; at time t its true position is a straight radial line from the centre. Nothing about the puck's motion is ever curved.
The bend is a rendering choice. The disc always rotates on screen at angular rate ω. Every trail point is drawn rotated by blend × ω × age about the centre — painting the historic path back onto the now-rotated disc. Older points have a larger age, so they swing further, and the straight line coils into a spiral.
drawn point = rotate( world , blend · ω · age )
blend = 0 → ground truth (straight, disc spins under it)
blend = 1 → rotating frame (the Coriolis spiral)
The toggle simply eases blend between 0 and 1, so the whole field un-coils or coils in one continuous move — the force literally appearing and vanishing. A gold dashed aim line tracks where the disc-thrower is still pointing; the gap to the green head is the deflection, and its angle (ω × age) is read out live. Drawn with the Canvas 2D API; no libraries, no images.
Iteration log
Pass 1 Craft
- Ink/line split enforced. First draft set secondary labels in the green path colour (~3:1 on slate). Demoted green and gold to lines/marks only and derived #C7CEDA body ink (≈9:1) with a 6:1 secondary — every text token now clears 4.5:1.
- Type scale tightened. Moved the h1 to a 300-weight display with −.028em tracking; set a deliberate 15 / 19 / clamp-hero scale rather than the default 16/24/32.
- Disc read. Added a bright rim tick and a spin-direction arc so the rotation is legible even when the paths are straight (ground truth) — otherwise the disc looked static.
Pass 2 Depth
- Featured puck. The oldest live puck is promoted — brighter trail, glow, and the gold aim line + deflection arc — giving the eye a clear protagonist among the ambient throws. Second-read detail: the deflection arc closes to nothing the instant you switch to ground truth.
- Deflection readout. Wired the live ω × age angle into the overlay so the abstract "force" gets a number that grows with spin and time.
- Motion timing. Tuned the blend ease (≈4.2/s critically-damped follow) so the coil/uncoil lands in just over a second — decisive but not snappy — and clamped the frame delta so a tab-away doesn't jump the sim.
Pass 3 Hardening
- 375px. Stage switches to a 3/4 portrait ratio; the deflection readout cell drops below 400px so the overlay never collides with the spin figure. Verified no real overflow.
- Reduced motion. A settled static frame seeds ten fully-drawn spiral trails at fixed ages (the signature visible, not blank) with the rAF loop never started; toggling the frame re-renders the static frame instead of animating.
- Robustness. DPR capped at 2, canvas sized to its container on debounced resize, rAF paused on document.hidden, and a Chanel-rule trim — removed a redundant second glow pass on ambient trails that muddied the field.
Verification
Checked headless with puppeteer-core driving real Chrome on an isolated port: zero console errors, the <h1> and disc visible, a driven throw asserted to change the canvas (screenshot-hash diff), and the 375-px layout confirmed free of true horizontal overflow.