BEHIND THE SCENE

Obsidian is a fictional museum with a strict acquisitions policy: no artwork may exist as a file. Each of the six pieces is an algorithm — 20 to 40 lines — that paints itself onto a canvas when you arrive. This page is the catalogue of techniques.

01 — Walking the hall: horizontal scroll done honestly

Hijacking the wheel event breaks trackpads and accessibility. Instead the gallery uses the sticky-rail pattern: the gallery wrapper is given a height equal to the rail's overflow width plus one viewport; inside it, a position:sticky full-screen room holds the rail, and vertical scroll progress is mapped to translateX. Native scrollbar, native momentum, keyboard and screen-reader friendly — but you walk sideways past the frames.

progress = -rect.top / (wrapperHeight - viewportHeight);
rail.style.transform =
  `translateX(${-progress * (railWidth - viewportWidth)}px)`;

02 — The six algorithms

• Nº01 · Flow field — a value-noise function converted to angles (noise(x,y) × 4π); 2,600 particles each walk the field at 6% opacity, accumulating ink like commuter routes. Seeded randomly, so every visitor gets a different city.
• Nº02 · Moiré — two systems of concentric rings, centres oscillating apart. The interference pattern you perceive is drawn by neither system — it emerges between them. The only animated piece; the maths does the performing.
• Nº03 · Orbits — 140 bodies given tangential velocity around one attractor with inverse-square gravity. Trails persist because each frame clears at only 2% alpha — long-exposure photography, simulated.
• Nº04 · Contours — marching-squares over layered value noise: 18 elevation thresholds traced as isolines, every fifth in accent yellow, like a survey map of nothing.
• Nº05 · Voronoi — 64 seeds, but distance is measured in Manhattan metric, which turns the usual organic cells into faceted shards; near-equidistant pixels paint dark, becoming the lead in the stained glass.
• Nº06 · Colour field — 900 translucent horizontal strokes with feathered gradient ends, drawn into three colour strata. Layered 5%-alpha passes are what give Rothko-style fields their depth; the algorithm just breathes them on.

03 — Museum grammar

Each canvas sits in a frame (padded panel, deep drop shadow on a slightly lighter wall colour) with a proper wall label: number, title, medium, and a one-line curatorial note. The labels are half the design — Topography of a Bad Night's Sleep recontextualises a marching-squares demo into an artwork. Titling is a rendering technique.

04 — The rest of the room

• Header sits in mix-blend-mode:difference so it survives any artwork behind it.
• Seven progress dots dock at the bottom only while you're inside the hall.
• Type is Syne — geometric with art-school eccentricity — against IBM Plex Mono labels; one acid accent (#E8FF47) against gallery black.

05 — Reproduce it

Every algorithm here is a classic of creative coding: flow fields, moiré, n-body, marching squares, Voronoi, layered alpha. Implementations are all in this page's parent — view source, copy one, change the palette and the seed, and hang your own hall.