Elementary cellular automata woven into cloth on a loom and played as music.
Each row of an elementary cellular automaton is computed from the three cells above it by the rule's 8 bits, then woven as one pick of weft: a 1 lifts that column's warp thread, a 0 leaves the weft on top, just as a Jacquard loom reads a punched card. The row is also played: the width is split into lanes up a musical scale, cells that switch on pluck their lane's note, and the unwoven warp strings below the cloth vibrate. Rule 30 sounds random, Rule 90 weaves Sierpinski's triangle and sounds self-similar, and in Rule 110 the demo searches recent rows for the shifts that map the background onto itself, weaves the cells that break them in gold, and lets only those gliders play the melody. Each row is drawn once from an atlas of thread sprites into a ring-buffer canvas, so scrolling the cloth only copies finished rows and never redraws a thread.
Try it. Click for sound. Click the 8 rule bits to flip them and invent your own rule, or click the cloth to flip cells in the row about to be woven. Use the left and right arrows to tour famous rules, up and down for tempo, S or the scale button for scales, I or the instrument button for instruments, R for a random row, 1 for a single seed and M to mute.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a musical elementary cellular automaton with JavaScript, the HTML canvas element and the Web Audio API. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Use a dark background.
- Keep a row of about 100 cells (0 or 1) that wraps around at the edges. Compute each new row from the old one: for every cell, read left, self and right as a 3-bit number n, and the new value is bit n of the rule number (so Rule 30 is (30 >> n) & 1).
- Draw rows as small squares, newest at the bottom, scrolling the picture up one row at a time about 8 times a second. Seed Rules 30 and 90 with a single 1, and Rule 110 with a random row.
- Let the arrow keys switch between Rule 30, 90 and 110, and show the rule number in a corner.
Then make it sing:
- Create the AudioContext only after the first click and show a "Click for sound" hint until then.
- Split the row into about 15 lanes and map them to a pentatonic scale over three octaves. For each new row, find the lanes where cells just switched on, take the three busiest, and play each as a short oscillator note with a quick attack and exponential decay. Pan notes left to right by lane.
Once that works, make it beautiful:
- Draw each cell as a woven thread instead of a square: a vertical yarn with a highlight down its middle when the cell is 1, a horizontal yarn when it is 0.
- Render each row once into an offscreen ring-buffer canvas, so scrolling costs two drawImage calls.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as highlighting Rule 110's gliders and letting only them play the melody, clickable rule bits for exploring all 256 rules, or more instruments built from FM synthesis.
