Generative Assets · Field notes
Drawing the four seconds you can't see.
Every mark on APPROACH — the sweep, the salt lakes, each aircraft blip and its trailing history — is painted live in a single canvas 2D context. No images, no tiles, no map service. Here is how the console was built.
The concept
APPROACH is a working night-shift approach-control radar for a fictional regional airport — Marrandee Regional, out past the Western Australian salt lakes. The audience is anyone who has ever wondered what the person talking to the pilots actually does.
The page has one job: hand you the traffic. Seven aircraft arrive over a compressed shift; you drag vectors, assign speeds, hold three miles between everyone, five behind the heavy — and get Lifeflight down before its window closes. The tension is the product.
Palette
A radar CRT emits one colour. Everything is a phosphor green graded from near-black scope to hot strobe white — argued entirely from the subject, never a decorative choice.
Type
Two faces, split strictly by role: one speaks, the other reads out.
A grotesque with a variable width axis. Pushed to wdth 125 at heavy weights, it reads like stencilled operations signage — authoritative, a little institutional. The one moment of typographic bravery is the hero: APPROACH set wide, tracked out, glowing faintly like a lit sign in a dark annex.
Everything a controller reads sits in Plex Mono: flight strips, data blocks, the comms tape, the clock. Tabular figures keep distances and speeds from jittering as they count. Monospace is the honest voice of the instrument.
Technique
- Canvas 2DOne context paints the whole scope every frame: a pre-rendered terrain layer (lakes, rings, compass, fixes, runway) composited under live blips, trails, vectors and a film-grain pass.
- Conic sweepcreateConicGradient draws the rotating antenna beam; targets only refresh their position and brightness as the beam passes over them, so the picture ages between sweeps — exactly like the real thing.
- SimulationA compressed-time model turns aircraft toward the vectors you draw at standard rate, accelerates within limits, sequences onto the centreline, and continuously checks radar and wake separation.
- WebAudioNo audio files. Sweep ticks, confirm tones, conflict alerts and squelched radio bursts are all synthesised from oscillators and filtered noise at runtime.
The radar only tells the truth once every four seconds. A conic gradient anchored at the scope centre rotates once per revolution; on each frame the code walks the aircraft list and, for any target the beam has just crossed, snapshots its position, pushes a fading history dot, and resets its bloom to full. Between passes the blips sit still and dim while the simulation keeps moving underneath — so the gap you're steering through is the gap you can't see. That deliberate lag, not the green glow, is the whole feeling of the piece.
Build log — three passes
Craft
Found: the hero wordmark was clipping to "APPROAC" — the intro card was too narrow for a 72px title and its overflow was cropping the final letter.
Changed: widened the card, retuned the title's fluid scale and tracking, and set it to a single proud line that fits at every width. The signature moment now renders whole.
Depth
Added: a link between the two halves of the console. Hovering or keyboard-focusing a flight strip now paints a subtle targeting bracket around that aircraft's blip on the scope — a quieter cue than full selection.
Kept: the second-read details already earning their place — the untagged "primary" west of the field ("most nights it's birds") and the medevac's strobe-white return.
Hardening
Found: resizing from desktop to a 375px phone left the scope canvas pinned at 630px wide, forcing horizontal scroll — a grid track expanding to a stale canvas size.
Changed: constrained the mobile grid track and scope width so the canvas can shrink, wrapped the wake table in its own scroll lane, and cut one redundant line from the intro. Verified 375px, reduced-motion and console-clean under headless Chrome.