At some point I asked myself: how bad of an idea is it to use HTML checkboxes as pixels?
Turns out, not that bad. Checked = lit, unchecked = dark. A grid of <input type="checkbox"> elements, sized down and packed together, is a surprisingly usable 1-bit display. No canvas. No WebGL. Just the DOM doing things it was not designed for.
How It Works Link to heading
The underlying model is the same across all twenty demos: maintain an array of checkbox elements, run a function each frame that maps each position to on or off, write checked directly. Here it is rendering a clock in a 5×7 bitmap font:
Each demo fills the viewport with a CSS grid of checkboxes. The grid recalculates on resize so it’s always fullscreen. Scroll to zoom (adjusts checkbox size). All rendering happens by flipping .checked on and off each animation frame.
The constraint is the whole point. You get one bit per “pixel”: on or off. Every effect has to be solved as a black-and-white threshold problem. That’s actually fun to think through.
The Demos Link to heading
Twenty demos total, grouped by what they’re actually doing:
- Simulations: Slime Mold, Langton’s Ant, Game of Life, Maze. Actual algorithms with state; the checkboxes just report what happened.
- Visual Effects: Spirals, Wave Interference, Mandelbrot, Fireworks, The Matrix, Ripples, Raindrops, Wave, Random Noise, Marquee, DVD. Pure math per cell per frame, thresholded to on/off.
- Games: Pong and Snake. Both fully playable.
- Images & Video: Floyd-Steinberg error diffusion on images and live camera feed. The webcam one in particular is worth opening.
Performance Link to heading
Holds up fine at typical viewport sizes. Each checkbox is a real DOM element, so if you shrink them small enough to put 10,000+ on screen it starts to breathe harder. The slime mold sim is the most compute-intensive since it runs agent logic on top of rendering.
If a demo is lagging, scroll up to zoom in. Bigger checkboxes means fewer elements, which means better performance. Scroll down to zoom out if you want it to look cooler and don’t mind the slowdown. Basically the entire resolution dial is just the scroll wheel.
The dither and webcam demos use an offscreen canvas to sample pixel data from their source. That’s the one place something canvas-shaped sneaks in, but the output still goes to checkboxes.