Guide · No. 106 · Deep Time
How the canyon was carved.
ARROYO is a working erosion simulation, not a picture of one. Every drop of rain, every grain of moved rock, and every metre of incision is computed live in your browser — the canyon you see was cut by the model while the page was open.
01 — The concept
A flat desert plateau is placed under an endless sequence of storms. Each storm sends water running downhill; the water lifts sediment on the steep grades and drops it on the flats, exactly as real hydraulics do. Over thousands of storms, channels incise, tributaries capture one another's flow, and a braided dry wash forms on the floor. The single job of the page is to make a process that takes a hundred thousand years legible in a few seconds — for anyone curious about how deserts write their own maps. The audience is the merely-curious, not the geologist; the readouts translate the physics into plain numbers.
02 — Palette
Every colour is pulled from a sandstone canyon at low sun: bright rimrock, rock in deep shadow, and the sky-washed dust that softens every edge. The bright mesa tone is reserved for lines and marks; small text uses the darker dust-ink so it always clears its background.
03 — Type
A high-contrast old-style serif with a geological weight to it. Used for the headline and, at 800 with tabular numerals, for the years-elapsed odometer — the number should feel carved, not printed.
A neutral grotesque keeps the instrumentation quiet so the serif and the terrain carry the personality. Wide-tracked uppercase for the survey labels; plain sentence case for the body.
04 — Technique
No libraries, no images — a single <canvas> and about two hundred lines of maths.
- Droplet hydraulic erosion. A
300×188float heightfield starts as a tilted plateau with a slender central incision. Each frame drops fourteen water particles; every particle follows the interpolated gradient downhill, carrying a sediment load governed by its speed and water volume. Where it steepens it erodes (spread over a small brush so channels stay smooth); where it flattens or slows it deposits. This is the whole engine — the dendritic canyon is emergent, never drawn. - Convergent drainage. The plateau leans very slightly toward its centreline, so tributaries feed a single trunk and you see real stream capture — one gully beheading another — rather than uniform static.
- Relief rendering. The heightfield is shaded by its own surface normal against a low raking sun, colour-ramped from shadowed rock to sky-washed rim, then upscaled across the viewport. Topographic contour lines and a pale, braided dry-wash tint on the flat floors are computed per cell — the second-read detail.
- The cross-section. A live A–A′ slice plots the current surface against the dashed original rim, filled with a rock gradient and marked with a resistant stratum ledge, so you can read the incision as a depth, not just a texture.
- Honest bookkeeping. The odometer counts one storm per particle; the deepest-cut and incision readouts measure real height removed from the field, scaled to metres. At rest the canyon is already deep because 22,000 storms are run before the first frame — the page is never blank.
05 — Iteration log
Pass 1 Craft
Driving the warm-up erosion revealed the terrain read as uniform badlands noise — no dominant channel, and the cross-section was nearly flat. The initial field carried too much high-frequency roughness, so incision happened everywhere at once. Fix: cut the roughness right down and add a gentle convergent cross-tilt so drainage collects into a single trunk. Set the type scale and the frosted survey panel, and confirmed dust-ink on the panel clears 4.5:1.
Pass 2 Depth
The canyon was legible but shallow — only ~80 m cut, so the relief shadows read soft. Deepened the starter incision and the erosion strength and pushed the normal-shading exaggeration for a bolder canyon; deepest cut now climbs from ~80 m to ~115 m across the seven-second settle when driven. Added the topographic contour lines and the resistant-stratum ledge in the cross-section as second-read details — the terraces you only notice on the second look.
Pass 3 Hardening
Raised the heightfield resolution from 248 to 300 wide to kill the upscale stair-stepping on the mesa rim, and strengthened the pale braided-wash tint so the dry floor reads. Verified the 375 px layout (wordmark, nav and panel all within the viewport, no overflow), the reduced-motion path (a settled canyon rendered once, no loop, zero console errors), visible focus rings, devicePixelRatio capped at 2, resize re-fitting, and the animation loop pausing when the tab is hidden.
Designed & built by Sapience Analytics — part of the Generative Assets collection.
Back to the site · Index