Guide · Colophon
Building Pycnocline How we drew the ocean's hidden density staircase in a canvas and made a probe find the exact depth where it stops sinking.
The concept
PYCNOCLINE is a desk-side oceanography instrument that makes stratification visible. Warm, light water floats on cold, dense water across a sharp seam — the pycnocline — and the page's single job is to let anyone watch a probe find its layer: set a density, drop it, and it sinks precisely to the depth where the water weighs what it does, then hangs there while internal waves heave the boundary beneath it. It is built for students, science communicators, and anyone who has ever wondered why the sea has floors you cannot see.
The trap is to draw the ocean as one flat blue. The truth is a stack: density climbs with depth, fastest through a thin band, and everything suspended in the sea — silt, plankton, a tuned instrument — settles onto the isopycnal that matches it. Nothing rests on nothing.
The signature — a probe that finds its exact layer
The whole piece turns on one behaviour. Each frame the probe reads the density of the water at its position and feels a buoyant force proportional to the difference: heavier than its surroundings, it sinks; lighter, it rises. Because density increases downward, there is exactly one depth where the two match — a stable equilibrium — and the probe falls to it, overshoots, and bobs back, damped by drag and tightened by the steep pycnocline gradient, until it hovers on an invisible line.
Steep water gives a strong restoring force, so a probe tuned to mid-pycnocline density locks tight; in the near-uniform mixed layer the same probe hovers loosely, drifting with the current. That difference in "grip" is the physics you feel — the pycnocline is stiff, the layers around it soft.
Technique
- Canvas 2D, no library. Everything is procedural — background gradient, isopycnal contours, marine snow, the probe. A tanh density profile ρ(f) runs from 1022 kg/m³ at the surface to 1028 at the floor, steepest at the pycnocline; its analytic inverse (atanh) gives the neutral depth for any density in closed form.
- Buoyancy integrator. Semi-implicit Euler on a = G·(ρprobe − ρwater)/ρprobe − c·v, with the timestep clamped to 1/30 s so a tab-switch never launches the probe. The steep gradient sets the restoring stiffness; the drag term sets the damping — together an under-damped bob that settles in a couple of seconds.
- Internal-wave field. Two counter-propagating sinusoidal wave trains, their vertical heave envelope-peaked at the pycnocline and decaying into the uniform layers above and below. Every isopycnal — and everything riding it — is displaced by the same field, so the whole interior breathes in phase.
- Marine snow. Dozens of faint motes, each assigned its own density, each parked on its matching isopycnal and drifting sideways with the current — a second-read detail that says the same thing as the probe: everything finds its layer.
- Resting state. At load the probe eases the last stretch into its hover, then holds; with no input the internal waves keep the interface alive, so a static screenshot already reads as a settled, moving sea. prefers-reduced-motion renders one settled frame with the probe placed exactly on its isopycnal and no loop.
Palette
Argued from the sea, not decoration. The bright teal is reserved for the interface — lines and marks; body copy takes a light brine ink so it clears 4.5:1 on the deep-tank ground — the ink/line split, run in the dark direction.
Type
Spectral carries the personality — a literary serif with the calm of a field notebook, set light for body and medium for the wordmark and headings. IBM Plex Mono is the instrument's data voice: densities, depths, the layer name and the live state readout.
Iteration log
- First drops overshot to the floor and stuck: the buoyant scale G was too large for the drag, so the probe blew past equilibrium before the restoring force caught it. Retuned G and DRAG against the analytic pycnocline stiffness to an under-damped settle — two visible bobs, then a hover.
- The isopycnal lines were a uniform grey wash; nothing marked the pycnocline. Weighted line alpha and width by distance to the seam so the interface reads as the brightest band and the uniform layers fall back.
- Body copy in the field notes sat in the teal accent (~3:1). Demoted teal to lines and marks only and set copy in the derived brine ink, clearing 4.5:1 on the deep-tank ground.
- Added the marine-snow layer — dozens of neutral-buoyancy motes each parked on their own isopycnal — so the "everything finds its layer" idea reads across the whole tank, not just at the probe.
- Brightened the probe's own isopycnal into a slow dashed line spanning the tank — the invisible boundary it found, made briefly visible, and animated so it reads as travelling water rather than a static rule.
- Gave the probe a tether cable fading up to the surface and a buoyancy halo, so a dropped instrument reads as suspended from above rather than floating free.
- Verified 375 px: wordmark and nav inside the viewport, scrollWidth = 375, no real overflow; the HUD folds away on the narrowest screens so the dial and tank keep the space.
- Reduced-motion renders a settled static frame — probe on its isopycnal, waves at a fixed phase — with the rAF loop never started; dragging the dial redraws that one frame.
- Capped devicePixelRatio at 2, debounced resize, paused the loop on document.hidden with a clamped delta on resume; confirmed :focus-visible on the dial and buttons and zero console errors across 1440 / 768 / 375.