Survey office papers · Sheet Nº 200
How Coastline was made
Coastline is a fictional admiralty chart for Richardson Sound — a coast that has no length, only a dimension. The page has one job: let you watch the coastline paradox happen. A pair of walking calipers surveys the same fixed coast seven times, the span halving each pass, and the measured length climbs from 151 to 401 nautical miles while a log-log inset fits the only stable number in sight: D ≈ 1.25.
01 · Palette
Everything is argued from the chart table. A night sheet, an engraved line, one instrument colour, and the blue reserved for water that is telling you its depth.
02 · Type
Playfair Display carries the voice of the cartouche — a high-contrast serif descended from the same engraving culture as the charts themselves. Its italic is the flourish reserved for the one number the survey can actually keep: the fitted D, set huge and sworn to.
Reddit Mono is the instrument hand: soundings, the HUD, longitude labels, and the survey record. Tabular digits make the record table read like a logbook, and the wide letter-spacing of the small caps does the quiet naval-officialdom work everywhere else.
03 · Technique
Canvas 2D, no libraries. The coast is midpoint displacement over a fixed seed: six hand-placed control points, eleven doubling passes, each new midpoint nudged by ±0.35·dx0.7 from a seeded mulberry32 stream — 10,241 vertices, identical on every load. The same seed (1957, the year Richardson's coastline data was published posthumously) draws the soundings and their re-survey pulse.
The signature element is the honest caliper walk. For each span ε the walker solves the exact circle–segment intersection (a quadratic in the segment parameter) to place the next tip on the coast precisely ε away, tip over tip, and the pass records L = N·ε + remainder. Seven spans, 32 nm halving to 0.5 nm, are walked at load; the animation replays those anchors with the divider swinging over the top on an eased arc. The log-log inset refits a least-squares line through only the passes completed so far — so the D on screen is always a fit of what has actually been walked, converging to D = 1.247, r² = 0.959 as the seventh pass lands. The big italic D in the page and the record table are written from the same arrays; nothing is typeset by hand.
The static sheet — sea gradient, land fill and hatch, graticule, depth contours, the full-resolution coast, the cartouche — renders once per resize into an offscreen canvas; each animation frame just composites it and draws the moving survey. DPR is capped at 2, the rAF loop pauses when the tab hides, and reduced motion renders a settled mid-survey frame with five passes already on the plot.
| Span ε | Steps | Length | Change |
|---|---|---|---|
| 32 nm | 4 | 151.0 nm | — |
| 16 nm | 9 | 151.8 nm | +0.5% |
| 8 nm | 21 | 175.8 nm | +15.8% |
| 4 nm | 50 | 203.8 nm | +15.9% |
| 2 nm | 134 | 269.2 nm | +32.1% |
| 1 nm | 312 | 312.8 nm | +16.2% |
| 0.5 nm | 801 | 400.9 nm | +28.2% |
04 · Iteration log
Pass 1 · Craft
Inherited a flagged defect: the land polygon reportedly closed diagonally at the sheet edges, cutting wedge artefacts into the fill. A whole-canvas pixel probe (recomputing the deterministic coast and classifying every cell as land/sea against the render) showed the border closure — out past both side edges, up the sides, across the top — was already sound: zero misclassified cells. The real renderer bug was elsewhere: the canvas was sized for devicePixelRatio but never transformed, so on any retina display the whole chart drew into the top-left quadrant at half size. Fixed with a proper DPR transform on both canvases. Also fixed: the coast was drawn at every fourth vertex, visibly clipping the summit by ~9 px — it now draws all 10,241 points; the Spain/Portugal border anecdote had the two countries swapped (Spain measured 987 km, Portugal, with the finer ruler, 1,214 km); and the no-JS fit line now prints the real fitted numbers instead of a placeholder promise.
Pass 2 · Depth
Moved the static sheet into an offscreen base canvas rendered once per resize, so each frame costs only the walk, HUD, soundings and inset — and the coast could afford full resolution. Linked the survey record to the walk: the row being walked lights up, passes not yet surveyed this cycle sit dimmed, and the caption counts surveys as the loop refuses to close. The HUD now ends the seventh pass with LENGTH DIVERGES — RESTARTING instead of pretending an eighth span exists. Second-read details kept from the first build: a random sounding pulses as if being re-surveyed every few seconds, and after one full cycle the cartouche gains a crooked stamp: SURVEY WILL NOT CLOSE.
Pass 3 · Hardening
Verified headlessly: zero console errors; exactly one h1 per page; 375 px with no horizontal overflow and the wordmark and nav inside the viewport; reduced motion renders the settled five-pass frame and holds it byte-identical across 1.4 s; the walk advances between probes and two screenshots 1.3 s apart differ; at DPR 2 the backing store is exactly 2× and the far corner of the sheet is painted. Removed one ornament per the Chanel rule — the chart frame's second offset outline. The maths gate: measured length strictly climbs as the span halves, and the fitted D lands at 1.247 with r² 0.959.