Tony Bergstrom, Karrie Karahalios & John C. Hart, Graphics Interface 2007
The following interactive visualization is my interpretation of the Isochords (Bergstrom et al., 2007) system.
The twelve notes sit on a Tonnetz, a lattice diagram designed by Leonhard Euler (!) to represent the tonal space. Moving right on a Tonnetz is a perfect fifth, moving up a major third — so every major or minor chord falls out as a triangle:
“major” triads connect into an upward arrow whereas “minor” triads yield a downward arrow. … The triad's triangle becomes visible only when each of the three corners are activated.
— §1.1 and §4.1
So the harmony draws itself as the music plays. Watch the triangles bloom and fade across the grid, tracing the harmonic shape of the piece. Pick a sample below, or load your own MIDI file — the paper has the full account.
You can also drop a .mid file onto the grid. Nothing is uploaded — it's read in your browser.
→ Isochords: Visualizing Structure in Music by Tony Bergstrom, Karrie Karahalios & John C. Hart: the paper this page reproduces.
→ @tonejs/midi by Yotam Mann (MIT) parses the MIDI files you load; OpenSheetMusicDisplay (BSD) engraves the scores. Everything else here is plain HTML, CSS and JavaScript.
→ Bach Digital (Bach-Archiv Leipzig) — the authoritative catalogue of Bach's manuscript sources. Each piece above links to its work record there. It publishes facsimiles rather than machine-readable notation, so the notes played here come from the music21 corpus; the chorale engraving is © 2004 Margaret Greentree, used by permission, as noted on the score itself.
→ Pachelbel Rant by Rob Paravonian — please listen if you haven't.