Lab
Experiments for the flip-dot wall, grouped into a few areas. Everything on this page runs on the live grid: real input, real simulation, real audio, real data, nothing canned.
Play
01 Simulation
Game of Life
Conway on the wall. Paint some cells, press play, and the rules take it from there. Yellow discs were just born, white ones have survived a generation.
Paint cells with the pointer, then press Play. Seed drops a random soup.
02 Game
Bricks
Breakout with a flip-disc ball. The paddle follows your pointer, or use the arrow keys.
Press Start. The paddle follows your pointer over the board, or use the arrow keys.
03 Drawing
Doodle
A pixel pad in the eight disc colors. Pick a color, draw with the pointer, wipe it clean when you are done.
Pick a color and draw. The outline swatch erases.
04 Geometry
Wireframe
Solids projected onto the grid. Drag to spin, fling it and it coasts to a stop. Edges near you flip white, edges on the far side flip violet.
Drag the field to spin the solid, or use the arrow keys. Pick a solid with the buttons below.
05 Depth
Tunnel
An endless corridor projected onto the grid. Drag to steer through it; the rings rush toward you and recycle out the back.
Drag or use the arrow keys to steer the vanishing point through the tunnel. Hold the field or press space to boost.
Sound
06 Audio
Scope
A little theremin. Hold the field and slide: left to right picks the pitch, top to bottom sets the volume. The trace is the actual waveform coming out of the oscillator.
Hold the field to play: left to right picks the note, up and down sets the volume. Arrow keys change the note, hold Space to sound it.
07 Music
Steps
A little step sequencer. Tap notes into the grid and press play: the wall loops your pattern as real synth blips, at whatever tempo you set.
Point or drag to place notes, then Play.
08 Levels
Meters
Gauges, a spectrum, and a chart in the dot-widget idiom. Hold the meters and slide: left to right sets the pitch, up and down sets the level. The dial, the bars, and the line all read the same real audio.
Hold the meters and slide: left to right sets the pitch, up and down sets the level. Arrow keys change pitch and level, hold space to sound it.
09 Spectrum
Radial
The audio spectrum as a starburst. Hold and slide to sound a tone: the spokes are the real frequency bins, the spectral peak swings around the ring.
Hold and slide: left to right sets the pitch, up and down sets the level. Arrow keys change pitch and level, hold space to sound it.
Data
10 Diagnostics
System
The wall reporting on itself: the grid it is drawing on, its palette, the audio engine, the network, and the input hardware you are using right now. Every line is read live from the browser.
A live system menu. Use the arrow keys to move between Display, Sound, Network, and Input; each section reads its values straight from the browser.
11 Map
Constellation
The projects on this site as a graph: each is a node, and a line joins any two that share a tag, a technology, or a category. Drag a node, or hover to trace its links.
Move the pointer over the graph to highlight the nearest node, drag a node to move it, or use the arrow keys to step through the nodes.
12 Sweep
Radar
The projects as blips on a sweeping scope. The arm turns, and each project flares as it passes. Hover to pick one out.
Move the pointer over the scope to ping the nearest project. The sweep pings each project in turn as it passes.
13 News
Ticker
A scrolling marquee of what I am up to, drawn in flip discs. The lines are the real status lines from the home page plus the latest post.
REBUILDING A 1963 YAMAHA YG1T / AT WORK: CLIENT BUILDS FOR MONOGRAM / LATEST POST: A 20HZ SERVERLESS WORLD / LATEST POST: Running a 20Hz game world on serverless functions
Images
14 Dither
Halftone
Real project photos dithered into the dot grid, one disc at a time. Tap to advance, or drag to scrub through the set.
Tap or press space to advance, hold and drag to scrub through the set. Arrow keys step between images.
15 Masters
Gallery
Public-domain masterworks, from Vermeer to Hokusai, dithered into flip discs. Tap to advance, or drag to scrub through the set.
Tap or press space to advance, hold and drag to scrub through the set. Arrow keys step between images.
Time
16 Time
Clock
A dot-matrix clock. Big digits for the hour and minute, a sweep along the bottom for the seconds. It reads your device clock, live.
17 Rhythm
Breathe
Box breathing on the wall. Press start and follow the rings: in for four, hold for four, out for four, hold for four. The counters are the actual timer.
Press start to run a box breathing timer: breathe in for four, hold for four, breathe out for four, hold for four. The rings expand and contract with each phase.