Generative Assets · №108 · Deep Time · Colophon

How the orbit was drawn

PERIHELION renders a Keplerian comet orbit on a plain 2D canvas — no WebGL, no libraries. A single eccentricity governs both the ellipse you see and the ephemeris you read, so the numbers never lie about the picture.

The concept

A comet on a seventy-six-year ellipse falls sunward, catches fire for a few weeks, and is flung back out to the cold beyond Neptune. The page's single job is to make that duration legible: watch the ion and dust tails swell as the ephemeris climbs toward perihelion, then collapse to a bare grey dot at aphelion — always, both tails pointing away from the star. Audience: anyone who has looked up and wondered when it comes back. The answer, on the timeline: 1986, then 2061.

Palette — argued from the subject

Deep space

#0A0F1E

The ground: a blue-black that reads as vacuum, never a flat neutral grey.

Ion blue

#5AA8E0

Fluorescing CO⁺ gas. Reserved for the prompt tail, marks and rules — the line accent.

Sodium / dust

#F0C35A

Sunlight scattered off dust and the sodium D-line. The warm, curved, lagging tail.

Comet line

#3E6A8A

Orbit path and dividers only — a muted teal that recedes behind the live marks.

Ink

#B7C8DB

Body copy. A pale slate that clears 8:1 on space — small text never uses the accents.

Ink mute

#6E82A0

Tiny mono labels only, and still held above 4.5:1 so nothing dips below legible.

The trap here is the "space + one acid accent" default. PERIHELION splits the accent in two — cool ion, warm dust — because the comet physically has two tails of different origin, and keeps every readable character on a dedicated ink token so the bright colours are never asked to carry small text.

Type

Sora · 300 / 600 / 700 — display

Perihelion

A geometric sans with a faint astronomical-almanac coolness. The wordmark takes a blue-to-white clip gradient, echoing the comet's own colour temperature as it heats up.

Space Mono · 400 / 700 — ephemeris

2.69 AU · 24.7 km/s · 1986

Every number — distance, velocity, true anomaly, epoch — is set in a fixed-width face with tabular figures so the live readout ticks without the layout shivering. The name is a happy accident; it earns its place.

Technique — the signature

Kepler's equation, solved per frame. Mean anomaly advances linearly with time; Newton–Raphson iterates M = E − e·sin E to the eccentric anomaly E in ~5 steps. Position is (a·cos E, b·sin E) with the sun at a focus — so the comet loafs through aphelion and whips through perihelion, exactly as the second law demands.
One eccentricity, two readings. The same e = 0.85, a = 17.9 AU draws the ellipse and drives the vis-viva speed, heliocentric distance and true-anomaly readouts. Kepler's third law ties that axis to the ~76-year period; perihelion sits near 2.7 AU.
Two tails, two physics. The ion tail is drawn straight anti-solar and responds instantly to distance. The dust tail is a curved polygon that bends toward the orbital-trailing direction and lingers as the comet recedes — a slow-decaying activity term, because real dust lags behind while the ion gas is swept promptly by the solar wind.
Equal areas, made visible. Faint ticks are placed at equal steps of mean anomaly — equal time — so they bunch far from the sun and spread near it. That spacing is Kepler's second law, sitting quietly on the orbit line.
Honest engineering. DPR capped at 2, canvas resized to the container, the rAF loop paused on document.hidden. Reduced-motion renders a single settled frame at perihelion — full tails, stopped clock. A WebGL-free design means the CSS fallback scene is a gradient, not a blank.

Build log — three passes

1 Craft

The numbers were lying about the picture

First build decoupled a gentle drawn eccentricity from a steep "physics" one for the readouts. It looked fine but produced nonsense — a full tail while the panel read 7 AU and 150° true anomaly. Collapsed to a single e = 0.85 / a = 17.9 AU orbit so distance, speed, anomaly and shape all agree. Re-labelled perihelion/aphelion to the real q ≈ 2.7 AU, Q ≈ 33 AU. Tuned the loop so peak tails land on the 7-second resting frame.

2 Depth

Gave the two tails two different clocks

The signature earned its second read: the ion tail now cuts off promptly while the dust tail lingers and streams for a couple of seconds after perihelion, matching how the two tails actually behave — and giving the loop a longer, more alive tail window. Added a faint dashed radius vector to the sun so the eye can confirm the tails run exactly opposite it, and kept the equal-time ticks as the quiet Kepler detail.

3 Hardening

375px, reduced motion, and the resting state

Verified headlessly at 1440 and 375 (zero console errors, one h1, nav and wordmark inside the viewport, no overflow). Confirmed the signature drives: over a real seven-second run the comet advances, heliocentric distance falls, activity swells and the anti-solar alignment holds at 1.0. Re-placed the mobile composition so the comet passes cleanly through the wordmark. Reduced-motion bakes a static perihelion frame with a plausible tail — never blank.