Design, 3D and generative art

What each specimen gives you

• A live sample, drawn in the browser rather than shown as a picture.
• Controls built from the specimen's own settings, so a palette, a seed or a speed can be changed and seen at once.
• Standalone code that reproduces exactly what is on screen, with a copy button.
• A permanent accession number, its source and its license, so a specimen can be cited in a brief.

How a page with 1,520 live pieces stays fast

• Loaded by cabinet: each cabinet's code arrives only when one of its specimens is about to be seen.
• Mounted near the screen only, a few per frame, and stopped again when scrolled away. Animation also pauses in background tabs.
• A WebGL budget: browsers keep about 16 live 3D contexts, so the archive holds at most 9 and unloads the ones farthest from the middle of the screen.
• Sealed styles: every specimen renders in its own shadow root, so no specimen's CSS can leak into another.

Built like a jeweler would build it

• Stones cut to real proportions. The round brilliant uses angles from the top of the grading scale, and every shape's size comes from its standard weight formula, so a 3 ct oval and a 3 ct emerald show their real difference face up.
• Settings from real jewelry CAD. Prong thickness, head height and the swell of the band under the head were measured from openly licensed casting models and matched.
• Halos, side stones, pavé bands, split shanks, cathedral arches and twists, each fitted around the chosen center stone rather than placed as a fixed part.
• A casting file. The ring downloads as an STL at true size, metal alone or with every stone in its seat, which a jeweler's CAD program opens.

Why the stones look real

• Light is traced through each stone wavelength by wavelength, with each gem's measured refractive index and dispersion. That is where the coloured flashes of fire come from.
• Four lighting rooms, from a catalogue light tent to store spotlights and candlelight, because a stone only sparkles against light and dark around it.
• A light performance map shows the stone from above the way a gem lab's ASET scope does, so a badly proportioned stone looks bad here too.
• Photo mode path-traces the metal for a catalogue-quality still, and video mode records a turntable clip.

Help with the decision, not just the picture

• What it should cost: a range built from current online retail listings, scaled by the stone's grade, plus the metal's weight in grams worked out from the ring's own volume.
• Try-on: a hand-tracking model finds the ring finger in a photo or the live camera and sits the ring on it, with a soft shadow on the skin. It all runs on the phone.
• Compare: pin up to three builds and see them side by side, or copy a short design code to share one.
• True size shows the ring at its real size on screen.

Ready for a real store

The builder drops into a jeweler's own site. I built four invented jewelry shops around it, each in a different style, where every product photo in the catalogue is rendered from the builder itself, so a store can add a design without a photo shoot. The pitch to a store: a modern site, online booking and a ring builder its customers can play with.

The scenes

The first eight are originals: the lantern, a fog-bound graveyard, a bubbling cauldron over magenta fire, eyes in the dark that follow your cursor, a lightning-lit manor, drifting ghosts, a spider on its web and the catacombs. The next seven are classic horror: the Overlook hallway with its hexagon carpet and the twins, the cursed tape climbing out of the TV, Nosferatu's shadow on the stairs, Frankenstein's laboratory, the Psycho drain dissolving into an eye, the Exorcist streetlamp, and The Birds gathering on the wires.

How it's drawn

Each scene writes a brightness and a colour channel into a grid of character cells, and one renderer turns brightness into characters from a density ramp. Some scenes are simulations, such as the fire, the rain and the flocking birds; the pumpkin is a signed-distance model ray-marched per cell. A blurred copy of the canvas, blended on top, gives the glow.

What's in it

• Aurora curtains that drift and fold, built from layered noise per column.
• Mountain ridgelines traced in slash and caret characters, snow catching the light.
• A star field wheeling around the pole, a faint Milky Way and the odd shooting star.
• A mirror lake that reflects everything, broken by swells and by your ripples.
• Fireflies, swaying reeds and lanterns, each with its own reflection.

The breathing

The aurora brightens and dims on a ten-second cycle, which is a calm breathing pace, so you can breathe along with it. An optional ambient pad is synthesised live in the browser and swells with the same cycle; there are no audio files.

The eight modes

• Wormhole and Hypno spiral, both steered by the cursor.
• Kaleidoscope, eight mirrors around a blooming centre.
• Plasma, the classic demoscene colour waves.
• Fractal, a Julia set whose seed you bend with the cursor.
• Interference, ripples from moving sources, one following you.
• Turing, reaction-diffusion growing coral and mazes; drag to seed it.
• Liquid, noise folded into itself until it flows like oil on water.

In the browser and on the Mac

On the web, each cell picks one of 504 colours (36 hues by 14 brightness levels), and characters are drawn in batches by colour. In AgentForge it is a TRIP tab in ASCII Studio, written in Swift: glyphs are pre-tinted into tiles once, so each frame is a set of memory copies into one image, with a borderless fullscreen view on top.

The model

The building is a set of signed-distance shapes: the west front and its towers, the nave and side aisles under a pitched lead roof, the transept, the rounded east end, repeating flying buttresses and the spire. Rose windows, portals and belfry louvres are painted onto the faces where they belong, and the cathedral casts a moving shadow on the plaza.

The light

By day the sun lights each wall in turn as the building rotates. At night floodlights come up from below and the rose windows glow blue and red. The palette blends smoothly through the cycle.

What changes

• Detail: 40 to 150 rows of characters, from chunky to fine.
• Weight: light, regular, semibold or bold.
• Characters: a classic ramp, a dense 70-character ramp, or solid block shading.
• Time of day: day, golden hour or night, or a slow cycle.

The city

Office windows light up in a random scatter at night, streetlights come on along the avenues, and by day the tower's shadow sweeps across the streets. The antenna is too thin to ray-march, so it's drawn as a line with a depth test against the scene.

The plates

• The Great Migration, month by month between the Serengeti and the Masai Mara.
• A starling murmuration that ripples when a falcon dives in.
• Geese in V-formation, taking turns at the front.
• A salmon run up a waterfall, past a bear, to the spawning gravel.
• The monarch migration across four generations to Mexico.
• Lynx and hare populations rising and crashing.
• Ant trails forming from pheromones.
• Metamorphosis from egg to butterfly.

For the classroom

Each plate names the stage it's in as it happens ("Aug · crossing the Mara River · crocodiles wait"), gives the real scale behind the compressed time, and pauses with a click so a teacher can talk through a moment. Several plates are simulations rather than scripts: the flock, the ants and the predator–prey cycle all run on simple rules.