Case Study · Episode 05 · Creative Coding

Every pixel earned: twelve studies in light, motion & sound

Lumen is a collection of twelve generative-art pieces written in vanilla JavaScript with the raw Canvas 2D API — no frameworks, no libraries, no shortcuts. Flocking birds, combable lattices, audio-reactive rings, a hand-rolled 3D sphere. Built with Claude Code, and playable right here on this page.

CollectionLumen · Generative Studies
StackVanilla JS + Canvas 2D · zero frameworks
Pieces12, sharing one hand-built toolkit
InteractionEvery piece responds to you
The Film

Twelve pieces, one minute

A sixty-second reel of the collection in motion — every study captured live, then cut to the Prompt Atelier house style.

Lumen — the reel · Prompt Atelier
Watch on YouTube ↗
Lumen — the reel · eight of the twelve pieces, hand-captured and edited in Remotion · watch on YouTube ↗
The Interactive

Pick a piece — it's alive

These are the actual pieces running live, not recordings. Each responds to your pointer — and most carry a control panel (top-left) for palettes, sliders, reseeding and PNG export.

click — toggle the pointer between predator and lure Open fullscreen ↗
Overview

No frameworks. On purpose.

Every flock, ripple and glow is computed by hand — position by position, frame by frame. That constraint is the point: when nothing is abstracted away, the agent has to actually understand the math, and you end up owning every line.

12Pieces, one toolkit
0Frameworks or canvas libraries
2DRaw Canvas API — even the 3D
100%Interactive — nothing is a loop
The Collection

All twelve, at a glance

Three families of four: reimagined course techniques, flow-and-flock systems designed from scratch, and rebuilds sparked by a fellow student's work. Every card opens the real piece.

Tessellate
Seeded geometry

Curated palettes, simplex drift, glow lighting — with sliders and PNG export.

PLAY ↗
 Silk
Curve terrain

Lines carved from a photograph's luminance; the pointer sends springy ripples through the cloth.

PLAY ↗
 Ember
Particle physics

Photos dissolved into full-color particles — brush through them, shatter and reform.

PLAY ↗
 Resonance
Audio analysis

Radial frequency arcs and a waveform ring — feed it your microphone or drop in a song.

PLAY ↗
 Murmuration
Flocking

Hundreds of boids with a spatial hash; click to switch your pointer from predator to lure.

PLAY ↗
 Undertow
Flow field

Ink particles etching permanent trails — leave it minutes and it develops a photograph.

PLAY ↗
 Bloom
Recursive growth

Click to plant; branches grow with noise curvature; a seeded Regrow replays your garden.

PLAY ↗
 Meridian
Hand-rolled 3D

A fibonacci sphere with rotation and perspective projection — no libraries. Drag to spin.

PLAY ↗
 Halo
Radial symmetry

A seeded mandala with a symmetry dial — 1.0 is a kaleidoscope, 0 lets every slice go feral.

PLAY ↗
 Tether
Agent constellation

Bouncing stars with proximity threads; your pointer's gravity gathers or scatters on click.

PLAY ↗
 Weave
Noise lattice

A grid of strokes turned by simplex noise — and combable: the pointer parts it like fur.

PLAY ↗
 Glyph
Typographic portrait

Your photos retyped in katakana, latin, digits or density — quietly shimmering as it retypes.

PLAY ↗
Behind the Scenes

One small toolkit carries all twelve

The real engineering isn't in any single piece — it's in the shared library underneath, built once and reused everywhere.

Seeded randomness

Every composition is reproducible: the same seed always paints the same picture. That's what makes "Reseed" and Bloom's "Regrow" possible — art you can replay.

Simplex noise, hand-carried

One noise implementation drives Silk's wind, Undertow's currents, Weave's turns, Meridian's storms and Halo's drift — five different feelings from one function.

A DPR-aware sketch runner

One tiny sketch.js handles retina scaling, resize and the animation loop for every piece — so each study is only its idea, not its plumbing.

Spatial hashing

Murmuration's flock stays at 60fps because each boid only looks at neighbors in its grid cell — a classic optimization the agent had to implement, not import.

Trails that never clear

Undertow skips the canvas clear entirely — the piece accumulates, etching itself over minutes like a photographic plate developing.

3D with no library

Meridian projects a fibonacci sphere through hand-written rotation matrices and perspective division — 3D as math, not as a dependency.

The Lineage

Credit where it's due

These pieces didn't appear from nothing, and pretending otherwise would be against the house rules. The techniques were first explored in Bruno Imbrizi's Domestika course Creative Coding 2.0 in JS, with a second wave sparked by experiments across brunoimbrizi.com and a fellow student's course repo. Everything here was then redesigned and rewritten from scratch — new compositions, new interactions, new code — which is exactly how creative coding has always worked: you learn a technique, then you make it yours.

Toolbox

Everything used, and what it did

Vanilla JavaScript
Every system hand-written — flocking, physics, projection
NO FRAMEWORKS
Canvas 2D API
The only drawing surface — glow, trails, composites
BUILT-IN
Claude Code
Wrote the toolkit and all twelve pieces, iterating live
AGENT
Web Audio API
Resonance's analyser — mic, drag-and-drop, or a track
BUILT-IN
Vite
Dev server during the build — the pieces ship as plain static files
DEV ONLY
The Source ↗
All twelve pieces + the shared toolkit, readable
GITHUB