Tymoczko's geometry of chords: a twisted prism and a Mobius strip you can hear.
Ignore octaves and which voice plays which note, and the space of n-note chords becomes the orbifold T^n/S_n. Two-note chords fill a Mobius strip with tritones down the middle and unisons on its single edge; three-note chords fill a triangular prism whose ends are glued with a third of a turn, with augmented triads on the axis and the 24 major and minor triads braided around it, linked by single-semitone moves. Each progression is voiced by searching every voice assignment and octave for the smallest total motion, and that voice leading is drawn as a straight segment folded into the quotient, so you can watch it bounce off the mirror walls where voices cross and leave one end of the prism to come back, twisted, through the other. The engraved staff beside it shows the same voices and how many semitones each move costs.
Try it. Drag to turn the space (sideways to swing it, up and down to spin it about its axis); the arrow keys swing and tilt it. Click any chord to travel there by the smoothest voice leading and hear it. Space starts the next progression, 2 and 3 switch between dyads and triads, M mutes; 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 an interactive visualization of Dmitri Tymoczko's chord geometry 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, with two-note chords:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window.
- A two-note chord is a pair of pitches (x1, x2) in semitones. Ignore octaves and voice order by sorting them so x1 <= x2 <= x1 + 12, then let the sum s = x1 + x2 wrap at 12 using the move (x1, x2) -> (x2, x1 + 12), which also turns the interval d = x2 - x1 into 12 - d.
- Map s to an angle theta = 2 pi s / 12 and d to a width w = (d - 6) / 6, and place the chord on a Mobius strip: radius R + w cos(theta / 2), height w sin(theta / 2). Check that the wrap rule and the half twist agree.
- Draw the strip as a rotating 3D wireframe, with a dot for each of the 78 chords with whole-number pitches.
Once that works, make it musical:
- Animate a chord moving between two pairs by the smallest total motion: try both voice assignments and the nearest octave for each note, then sample the straight line between them and reduce every sample back onto the strip. Break the line where it jumps across the glued edge.
- Play each chord with a short Web Audio sine-and-harmonics tone, started on the first click.
- Let the user click a dot to move there and drag to rotate.
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 three-note chords in the twisted triangular prism, an autoplay of famous progressions, or a staff that shows the voices moving.
