Field Guide

How the meadow & the orbit were built

One live number, drawn twice — a canvas field of animals and an SVG phase-space loop, both fed by the same Lotka–Volterra integrator.

00 The concept

PREDATOR & PREY is a fictional interactive exhibit for a natural-history museum — a meadow that keeps its own books. Hares breed, lynx hunt, and the two populations oscillate forever by the 1926 Lotka–Volterra equations.

Its single job: make an abstract differential equation felt. The wave you see rippling across the field of animals is the very same signal traced, live, as a closed orbit in the phase-space panel. Cull one species and both representations lurch together — the coupling made visible.

01 Palette

Four colours, each argued from the meadow itself. The bright hare tan is reserved for lines, marks and orbit; body text rides on cream for contrast well past 4.5:1.

Meadow#2E3A1E

The field. A deep grazed green, dark enough to carry both species and cream text at full legibility.

Hare tan#D8B87A

Prey. The high-key mark colour — hares, the H(t) wave and the phase orbit. Never small body text.

Lynx rust#B85A2E

Predator. Warm and dangerous; used for the lynx, the L(t) wave and equilibrium accents.

Chart cream#E8E2D2

Ink. Every readable word and the current-state dot. A lightened rust #E08A5C carries any lynx-coded text so it clears contrast.

02 Type

Ḣ = αH

Spectral

A transitional serif with true italics and a mathematical calm. Carries the display wordmark and the equations set large as the moment of typographic bravery.

H* = γ/δ

JetBrains Mono

The instrument voice. Tabular numerals keep the live counters from twitching; every label, axis tick and eyebrow is set in it.

The pairing splits the page in two registers: Spectral is the naturalist's field notebook; the mono is the measuring apparatus bolted beside it.

03 Technique

The integrator. A fourth-order Runge–Kutta step advances the coupled equations Ḣ=αH−βHL, L̇=δHL−γL in fixed sub-steps of 0.0022 time-units, sixty times a second. It is a real ODE solver, not a scripted loop — the orbit is closed because the maths says so.
The canvas meadow. A static grass field (gradient, shade blotches and a thousand procedural tufts) is pre-rendered once to an offscreen canvas and blitted each frame. Hares and lynx are drawn on top: lynx seek the nearest hare, hares flee any predator within range and otherwise hop on a sine bob. Population counts reconcile the agent arrays every frame — births add, predation removes.
The SVG phase plot. Hares map to the x-axis, lynx to y. A <polyline> trail of the last 300 states is rewritten each frame; a second, sparse polyline slowly engraves every past loop at low opacity. Dashed nullclines and a ringed dot mark the equilibrium (20, 10) the meadow circles but never reaches.
The signature. Field, ribbon wave and orbit all read the same two variables. The bottom of the meadow scrolls H(t) and L(t) as a twin-line wave; the panel plots the identical pair as a point tracing its loop. Pressing Cull hares or Cull lynx multiplies one variable by 0.45 in place — instantly the wave drops, the orbit jumps to a different loop, and the other species follows a season behind. Two views, one lurch.
Discipline. DPR capped at 2, offscreen background rebuilt only on resize, the rAF loop paused on document.hidden with a clamped delta on resume. prefers-reduced-motion renders a settled mid-cycle frame — full orbit, scattered animals, no animation.

04 The three passes

Pass 1 — Craft

Rust #B85A2E on meadow green measured ~1.9:1 — below floor. Fixed by reserving rust for marks only and introducing a lightened #E08A5C for any lynx-coded text and axis labels.
Type scale was too even. Pushed the hero to clamp(3.1rem,11.5vw,8.6rem) and set the equations large in Spectral so the page has one clear typographic climax.
The panel felt like a floating widget. Anchored it as a true second grid column with a hairline border-left, reading as an instrument bolted to the field.

Pass 2 — Depth

Added the cumulative ghost orbit — a sparse polyline that engraves every past loop at 13% opacity. The closed curve darkens the longer you watch: the second-read detail.
Added a micro-interaction: hovering a species readout dims the other species across the whole field, so you can isolate the hares' scatter or the lynx's prowl.
Refined lynx behaviour to steer toward the nearest hare and hares to flee within a radius, so the field visibly tenses when predators are numerous — the wave you feel before you read it.

Pass 3 — Hardening

375px: the machine collapses to a single column — meadow above, instrument below — and the nav sheds its middle links so the wordmark and remaining items sit fully inside the viewport.
Reduced motion: confirmed the static path integrates ~900 steps then stops, drawing a full orbit and a scattered field with zero rAF; cull buttons re-render a fresh static frame instead of animating.
Removed an excess ornament — a pulsing halo behind the hero title — keeping motion budget on the one thing that matters, the machine.