Seventeen experiments on a wall of flipping dots

This site is drawn almost entirely as flip-dot discs, one continuous grid owns each page and every heading and paragraph you see is discs flipping on that grid. That started as a typography system, and once it worked I kept wondering what else the grid could do. The answer is the lab page, seventeen small demos grouped into five areas: things you play with, things that make sound, things that show data, things that show images, and things that keep time.

The reason there are seventeen and not four is that a demo costs almost nothing to add. No demo owns a canvas. The page reserves a rectangle of rows in the wall's layout model and the demo gets a band driver for that rectangle, a small object that reports the band's disc dimensions and gives it two ways to draw, commit a full byte array or flip a sparse list of cells. Everything hard lives in the wall itself: pausing when the band scrolls off screen, pausing when the tab hides, honoring reduced motion, and rebuilding on resize. A new demo is one client component and a shared height constant.

The data demos follow a rule I set for the whole site: real content only, nothing canned. The constellation draws my actual projects as a graph, one node per project and an edge wherever two share a tag, a technology, or a category, computed from the markdown files at build time. The radar pings those same projects as blips. The ticker scrolls the status lines from my home page plus the latest post title. The system readout is the wall reporting on itself, grid size, palette, audio state, and whatever input hardware you are using, all read live from the browser.

The one rendering lesson that shaped everything: every disc change plays a visible flip animation, so a demo that repaints at 60fps is perpetually mid-flip and reads as noise instead of motion. The fix is to repaint continuously changing visuals at 10 to 12fps and let each flip finish, which felt like a downgrade until I saw it, the wall reads as mechanical because the flips resolve. The oscilloscope also locks its drawn window to a rising zero-crossing so a steady tone stands still instead of crawling. For the few things that genuinely move fast, the spinning wireframe and the tunnel, the engine has an instant flag that skips the animation entirely, crisp motion beats a smear.

The sound demos are real WebAudio, not recordings. The scope traces the actual waveform coming out of the oscillator you are controlling, the meters and the radial burst read real FFT bins, and the step sequencer loops whatever pattern you tap in as synth blips. I think the theremin is the one people will actually spend time on, pitch on one axis and volume on the other turns out to be immediately playable.

The galleries dither photos into the grid's eight colors with a Bayer ordered dither, one for my project photos and one for ten public domain masterworks, Vermeer and Hokusai and Van Gogh at a 4px disc pitch. I expected the old paintings to fall apart at that resolution and they mostly do not, The Great Wave survives almost anything.

Drawing on a dot grid also forced a small visual language. A dotted or sampled line reads as broken on a display that is already made of dots, so every curve and rule is a solid run of adjacent lit discs and the grid pitch supplies the texture. Each widget gets one hero numeral, red is reserved for status and position markers, and brightness is done with density. Those few rules are why seventeen separate demos read like one instrument.

The whole set is at /lab. I will probably keep adding to it, the marginal cost of a demo is down to an afternoon and the grid keeps suggesting new ones.