Tone Grid
What if we weren't stuck playing the 12 notes that make up the 12 tone equal temperament system? What if we were able to play notes that were based on exact ratios between notes instead of the irrational relationships that are a necessity of any equal temperament system? Yes, there are instruments that have the ability to play notes based on just temperament or microtonal scales, but those tend to be very restrictive in what ratios can be played. What if were able to play ANY whole number ratio between notes? Like if we start with a root note of, say 440 Hz, and then multiply that value by any ratio or fraction, we would get interval with a rational relationship instead of the irrational one in any equal temperament. So when I learned that you could arrange all possible all possible rational numbers in a grid (video link), I was like: why couldn't we use this to arrange all possible rational note relationships and turn this into an instrument you could play?
I had this idea over a decade ago, and have tried several times since then to create this. But my limitations with coding held me back from making it what I wanted it to be. I also didn't have a good way to share what I made with others. But then in the summer of 2024 I learned about OpenProcessing.org, a platform where you can create programs using Processing, and then have the code run in any browser, making it easy to share and open on mobile devices with just a link.
So I spent a few days programming it. And here is the simplified version of what I made embedded below:
Note that I'm finding it doesn't play the sound reliably on mobile devices. So you're best off on a desktop. Or it might be dependent on the browser you are using (for me it works on iPad but only in Firefox, not Chrome or Safari, but doesn't work on my phone at all). Sometimes you also need to press the unmute button in the top right before it starts playing sound OR click the code button (</>) and then the play button to reset it and it work.
Also, here is the Link to open it as a separate page which might work better. I'm still trying to figure out how to make this work more reliably.
If you do open this link in a separate tab or window, you can click the code button and play with some of the variables!
I had this idea over a decade ago, and have tried several times since then to create this. But my limitations with coding held me back from making it what I wanted it to be. I also didn't have a good way to share what I made with others. But then in the summer of 2024 I learned about OpenProcessing.org, a platform where you can create programs using Processing, and then have the code run in any browser, making it easy to share and open on mobile devices with just a link.
So I spent a few days programming it. And here is the simplified version of what I made embedded below:
Note that I'm finding it doesn't play the sound reliably on mobile devices. So you're best off on a desktop. Or it might be dependent on the browser you are using (for me it works on iPad but only in Firefox, not Chrome or Safari, but doesn't work on my phone at all). Sometimes you also need to press the unmute button in the top right before it starts playing sound OR click the code button (</>) and then the play button to reset it and it work.
Also, here is the Link to open it as a separate page which might work better. I'm still trying to figure out how to make this work more reliably.
If you do open this link in a separate tab or window, you can click the code button and play with some of the variables!
Input methods:
1) Mouse - individual notes can be clicked on with the mouse
2) Keyboard - notes can be played using keyboard as a grid (1-8, q-i, a-k,z-m). Multiple notes can be played at once (up to 6).
3) Touch - notes can be played on a touch screen. Multiple notes can be played at once (up to 10 at the same time).
**Change base frequency by 1 Hz: up and down arrow keys (or by modifying "baseTone" manually in the code)
**Cycle through waveform types: left and right arrow keys (triangle wave, sine wave, sawtooth wave, square wave) or by changing "formSelect" to 0, 1, 2, or 3 in the code.
Full Version
Note that above is the Lite version of the app. Its controls and labels are limited to try and have it work better on mobile devices. If you want to check out the full version I'm still working on here it is: openprocessing.org/sketch/2329486
This version displays the closest 12-TET note to each of the ratios, the number of cents off each note it is, and has controls which allow you to better select the root note in a panel on the right
How to Play the Instrument:
I have no clue... i just made the thing. But here are a few patterns I've identified:
Note that 3:5 and 3/5 are the same thing. Sometimes I use the ratio and sometimes I use the fraction but they are equivalent here.
1) For individual notes:
Planned Future Features/Fixes - who knows if I'll ever get around to these
I have no clue... i just made the thing. But here are a few patterns I've identified:
Note that 3:5 and 3/5 are the same thing. Sometimes I use the ratio and sometimes I use the fraction but they are equivalent here.
1) For individual notes:
- The main diagonal will always be the root note (1:1, 2:2:, 3:3 are all the same ratio = 1).
- The same note can exist multiple places on the grid because of equivalent ratios (for example 6:4 = 3:2).
- Doubling a pitch brings it up an octave and halving a pitch brings it down an octave. So 2:1 is an octave higher than 1:1, and 4:1 is 2 octaves higher (doubling the doubling, which is 4x). Just as 1:2 is an octave down from 1:1 and 1:4 is 2 octaves down (a half of a half is a quarter).
- The top row moving right is the harmonic series, whole number multiples of the base frequency (1:1, 2:1, 3:1...)
- The second row is also the harmonic series but an octave lower, because it is just half the first row (1:2, 2:2, 3:2, 4:2...)
- The fourth row is the harmonic series, two octaves lower (1:4, 2:4, 3:4, 4:4...)
- The eighth row is the harmonic series, three octaves lower (1:8, 2:8, 3:8...), this extends to any rows that are powers of 2.
- The first column going down is apparently called the "undertone series", which is the inverse of the harmonic (overtone) series
- Note that because 12-TET is based on irrational ratios, every note on this grid will be out of tune with 12-TET instruments except for the root note and its octaves.
- If you play multiple of the same note at the same time you sometimes get a volume change (decrease or increase). This is from interference because they may be out of phase with each other depending on when you press the notes.
- Check out the wikipedia page for just intonation for various ratios commonly used to describe intervals used in modern music: https://en.wikipedia.org/wiki/Just_intonation. Here are some useful ratios:
- Just diatonic minor scale ratios - 1:1 9:8 6:5 4:3 3:2 8:5 9:5 2:1, so if starting with the root as A440 Hz, these correspond to A, B, C, D, E, F, G, A
- Just diatonic major scale ratios - 1:1 9:8 5:4 4:3 3:2 5:3 15:8 2:1, so if starting with the root as A440 Hz, these correspond to A, B, C#, D, E, F#, G#, A
- With 10 boxes in the grid you can play all notes from the just diatonic minor scale, but for the just diatonic major scale you need to extend it to at least 15 cells because of the ratio for the just major 7th (15:8). You can do this by going into the code, find "let rowCount = 10;" and then change the 10 to 15 or 16 or whatever you want. What a weird interval the major 7th is.
- If you play 2 notes in the same row, you get the same interval if you move the shape vertically, the same thing applies if you play 2 notes in the same column and move horizontally
- A just major chord has a ratio of 4:5:6 so to play, any 3 cells with those ratios would work. For example 4/3, 5/3, 6/3 or 4/4, 5/4, 6/4 if you want to have the root of the chord as the root of the grid. There are plenty of other shapes that can give this ratio too.
- A just minor chord has a ratio of 10:12:15. This can interestingly be played as the inversion of the major chord on the grid, for example 3/4, 3/5, 3/6, or 6/4, 6/5 6/6 if you want to have the root chord as the root of the grid.
- The same thing applies as with intervals, if you play a chord in the same row or column, and move the shape horizontally or vertically, it maintains the intervals and therefore maintains what chord you are playing (with different roots)
- Other interesting things: a harmonic 7th chord has ratios 4:5:6:7, a minor chord with a septimal minor has the ratio 6:7:9 (a chord you can't really play in 12-TET), and a diminished chord has a ratio of 5:6:7
Planned Future Features/Fixes - who knows if I'll ever get around to these
- Fix bug where changing waveform or other things while notes are playing causes it to crash
- Hover over the keyboard at the bottom to display closest notes on the grid
- Fix phase issues when playing unison notes
- Proper synthesis of notes, be able to select instrument to play instead of just waveforms
- Make it work on mobile
