Generative Assets · Field guide
Site 147 · Data

SEISMO.

A quake leaves as two waves. SEISMO races them through a layered earth and reads the gap between their arrivals — the number that measures the distance to the source.

01 The concept

SEISMO is a fictional observatory instrument for a single seismograph station, KRP. Its one job is to make the invisible seismic wavefield legible: to show that a rupture radiates a fast compressional P-wave and a slower shear S-wave, that both bend and reflect at the layer boundaries of the crust and mantle, and that the delay between their arrivals is a direct measure of range. Click anywhere in the earth to set a new focus; the wavefield re-radiates and the drum re-reads the gap.

02 Palette

Every colour is argued from the subject — the dark interior of the earth and the two waves that cross it. The bright wave colours are reserved for lines and marks; body copy runs in a derived warm ink for legibility.

#100C10
Mantle-dark
The ground and the interior. Nearly black with a warm cast, so the wave colours read as heat against cold rock.
#E0A24A
P-wave · line/mark
Amber for the primary wave — the fastest, first, forward-driving arrival. Warm, urgent, unmissable.
#C6504E
S-wave · line/mark
Oxide red for the shear wave that follows — the one that shakes buildings and never crosses liquid.
#E6DAD2
Crust-ink · body
A warm off-white derived for text — over 12:1 on the mantle ground, so nothing legible ever sits in a bright accent.

03 Type

Space Grotesk
DisplayGeometric but not cold — engineered enough to feel like instrumentation, humane enough to carry a wordmark. Set wide and tracked for the SEISMO lockup.
JetBrains Mono
MonoA monospace built for numbers. It runs every readout, drum tick, velocity and gap — telemetry that must align in columns and never jitter as digits change.

04 Technique

Two stacked HTML canvases, no libraries. The cross-section is drawn in Canvas 2D; the seismograph drum is a second canvas below it. Both run from one clamped requestAnimationFrame clock that pauses when the tab is hidden.

The wavefronts are traced, not faked. Each quake shoots a fan of 132 rays from the hypocentre. Every frame a ray advances by the local layer velocity and, when it meets a boundary, refracts by Snell's law — because velocity rises with depth, rays bend away from vertical and dive, then turn back toward the surface exactly as real seismic rays do. A ray that reaches the free surface terminates as an arrival; connecting the tips of adjacent rays gives the wavefront, and a short position-history trails it as a wave packet. The P fan runs at 6.30 km/s, the S fan at 3.64 — so P visibly outruns S, layer after layer.

The drum is a physics readout. For each recorded event, the amplitude at any physical second is the sum of a background microseism, a damped P burst at its arrival, a larger S burst, and a long low-frequency surface-wave coda — the earth ringing like a bell after the sharp arrivals pass. The P and S onset times come from the epicentral distance and the two velocities; the strip marks them, brackets the gap, and multiplies it by roughly eight to recover the kilometres. Time is compressed sevenfold so a propagation that takes real minutes replays in seconds, while every number on screen stays in honest seconds and kilometres.

05 Iteration log

Pass 1 — Craft

  • Rays reflecting off the free surface tangled into zigzag spikes; changed them to terminate as arrivals at the surface, which cleaned the fronts and made them physically truer.
  • Caustic folds were drawing long spikes across the whole scene — added a segment-length break so the wavefront polyline splits at a caustic jump instead of spanning it.
  • The horizon line was striking through the tagline like a strikethrough; seated the surface below the masthead on wide screens.
  • Drum tick labels were rendering raw floats (-50.6437s); rounded them to clean whole seconds.
  • The S−P readout flickered to “—” on every new event; it now holds the last-arrived event so the number stays meaningful.

Pass 2 — Depth

  • Added a hover reticle: a crosshair and a dashed ray from the focus that reads the distance and the P/S travel time to any point you move over — the “gap is distance” idea made tangible across the whole section.
  • Tuned the wave packet to a bright leading front plus a single trailing crest, and added arrival pulse rings at the station as each phase lands.
  • Retuned amplitudes so the surface-wave coda swells as the largest, slowest motion — the ring after the arrivals.

Pass 3 — Hardening

  • Verified 375 px with no real overflow, :focus-visible on every control, and devicePixelRatio capped at 2.
  • Reduced-motion now freezes a mid-propagation frame that shows the full P–S gap on the drum, never a blank; resize re-seeds the field so a resized stage is never empty; rAF pauses on document.hidden.
  • Chanel rule: removed the extra ±0.5 amplitude guide lines from the drum, leaving a cleaner ±1 and midline.
  • Final copy read across the field notes and readouts.