toneZ is a tonnetz diagram viewer built for browser in html5 + css3 + javascript using p5.js for graphics and the Tone.js for sound.
The tonnetz (German for 'Tonal Lattice' or 'Tonal Net') is a lattice 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.
See Tonnetz, Isochord and Neo-Remannian Theory for more info.
You just need to serve the main folder and then navigate to the index.html file to run the software.
Alternatively, you can also use the web app directly online HERE (GitHub Host service).
If your browser supports the Web MIDI API, you can use toneZ with any MIDI-enabled instrument otherwise you can use your computer's keyboard to control the app with the built-in keyboard mapping depicted below.
In this mode, you can find the standard tonnetz grid enhanced with the possibility of showing all the different diatonic scales in all keys and modes.
You can also enable the "show voicings" options in order to visualize for each note its 3rd and 7th grade according to the current key and mode.
Furthermore, you can also find a synthesizer composed by a selectable oscillator and a built-in and customizable ADSR envelope.
Here you can have fun learning the tonnetz system on your MIDI keyboard. The program shows some triads on the grid and you will have to find and play the right chords on the keyboard. Beware! Every wrong note makes you lose a life!
This project is compatible with most common browsers. However, MIDI functionality is available just for a few browsers (Google Chrome and Microsoft Edge).
- HTML5 + CSS3 + Javascript
- p5.js
- Tone.js
- Bootstrap 4.5
This project is licensed under the GNU General Public License v3 - see LICENSE.txt for details.
toneZ - browser tonnetz visualizer.
Copyright (C) 2020 Antonio Giganti & Lorenzo Talone
- Video Demo - on YouTube
- Video Demo using VCV Rack - on YouTube
- GitHub repository