TonnetzViz is an app that visualizes music in real time using the Tonnetz.

The Tonnetz is a diagram representing tonal space. It can be used to visualize harmonic relationships in music. Each node in the diagram corresponds to one of the 12 tones and is connected to 6 adjacent nodes. The ‘neighbours’ of each tone are related to it either by a third (major or minor), or by a perfect fifth, depending on their relative position in the diagram.

One of the interesting properties of the Tonnetz is that any combination of tones (e.g. a chord or a melodic idea) forms a ‘shape’ that is unchanged by transposition. For instance, in the default layout, every major triad is a downward-pointing triangle, and every minor triad is an upward-pointing triangle.

You can use TonnetzViz with any MIDI-enabled instrument (as long as your browser supports the Web MIDI API). Just connect the instrument to your computer, go to Controls, select the appropriate MIDI port and play. You can also connect TonnetzViz to a software sequencer using a virtual loopback MIDI port.

If you don't have a MIDI device, you can use your computer keyboard to control the app (see Controls). You can also turn on sound to hear what you are playing.

• Created by Ondřej Cífka in 2016
• Contributions by Achille Aknin and Jesús Martínez-Blanco
• Source code: GitHub
• Videos: YouTube