Euler's lattice of tones, where chords flip like cards and the plane folds into a torus.
Every vertex is a note: a step right adds a fifth and a step up and right adds a major third, so every upward triangle is a major triad and every downward one a minor triad. The neo-Riemannian moves P, L and R keep an edge and flip the triangle across it, moving one note by a semitone or a whole tone, and the autopilot plays progressions as the shortest P/L/R words found by breadth-first search over the 24 triads, leaving a trail of shaded triangles (Beethoven's chain of falling thirds becomes a straight band). Because the pitch at (i, j) is 7i + 4j mod 12, the lattice repeats, and one period cell holds all 12 notes and 24 triads: it shears to a rectangle, rolls into a tube and bends into a ring, gluing opposite sides into the torus the Tonnetz really is. On the torus the surface turns around the tube like a smoke ring to bring each chord to the front.
Try it. Click a triangle to play it (a neighbour across an edge flips over). P, L and R apply the transformations, T folds or unfolds the torus, Space plays the next progression, M mutes; drag the torus to turn it. Sound starts on the first click.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a playable Tonnetz (Euler's lattice of musical notes) with JavaScript and the HTML canvas element. 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.
- Draw a triangular lattice. Give vertex (i, j) the pitch class (7i + 4j) mod 12 and label it with its note name, so a step right is a perfect fifth and a step up and to the right is a major third.
- Each upward triangle with corners (i, j), (i+1, j), (i, j+1) is a major triad and each downward triangle is a minor triad. Tint them two different pale colors.
- Clicking a triangle selects it and plays its three notes with Web Audio (a few oscillators with a soft envelope, started on the first click).
Once that works, add the neo-Riemannian moves:
- P, L and R each keep one edge of the selected triangle and flip it to the neighbour across that edge (C major to C minor, E minor and A minor). Work out which neighbour each one is for up and down triangles, and bind them to the P, L and R keys.
- Animate the flip: the free corner swings through the shared edge to its mirror image, like a card turning over.
- Keep a trail of recently visited triangles that fades over time, and let the view pan smoothly to follow the selection.
- Add an autoplay mode that repeats a word such as RLRLRL, so the walk leaves a band of shaded triangles.
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 finding the shortest P, L, R path between any two chords, folding one period of the lattice into a 3D torus, or a ribbon that shows the progression as it plays.
