HarmonicTable
HarmonicTable is a replica of the C-thru aXis built with Java and Processing that is playable with a mouse and keyboard. The end goal of this project is to port the application to a touchscreen.
Documentation
On the main screen any of the keys can be played by mouse
There are two tabs at the top, one for the main table screen, and one for setup. The basic setup options at this time are midi ports, starting note values, and a toggle for releasing notes.
Chord Mode – Chord mode allows the user to play chord when clicking or dragging notes around on the screen. To play a chord, hold down a key from the chart below while clicking a note to play the associated chord:
| Row 1 | |
|---|---|
| 1 | Major |
| 2 | Minor |
| 3 | Augmented |
| 4 | Diminished | Row 2 |
| q | 7th |
| w | Major 7th |
| e | Minor 7th |
| r | Minor Major 7th | Row 3 |
| a | Add 9 |
| s | Add 4th |
| d | 11th |
| f | 13th | Row 4 |
| z | Minor 9th |
| x | Minor 11th |
| c | Minor 16th |
| v | 6th |
In addition you can turn on chord lock by pressing the ‘b’ key. When enabled the user need not hold the key of the chord being played down, just press the key once and any note click will play the chord that is locked. At the top right of the menu bar a message displaying both the chord being played and the chord lock status are displayed.
This was built using the Processing libraries, along with the ControlP5 library and Ruin & Wesen’s rwmidi library for midi functionality.
Download
This is an executable jar, meaning if you have java installed on your machine (version 5 or above), you should be able to double-click it and you’re off and running.
If you have any questions or comments, leave them in the section below.
Historical posts in the project (oldest to newest):
Processing HarmonicTable: Part 1
Last modified on 2009-01-23 03:49:48 GMT. 1 comment. Top.
Earlier this year while reading Harmonic Experience by W. A. Mathieu, I was introduced to the concept of lattices to represent tones, chords and keys. These lattices can be used to represent the basics of music composition in a visual way that makes more sense than standard scales on staffs. Here is an example:

The lattice is effectively several staffs of music stacked on top of each other, so that the note can be displayed horizontally and vertically. Starting from any note in the lattice, moving horizontally (diagonally right or left), jumps by a 5th (for example C to G, or G to D). Moving vertically jumps by thirds (C to E, or G to B). Since nearly all music is the construction of 5ths in 3rds, this system makes it easy to create patterns visually for chords, cadences, scales etc, that will always look the same no matter where you start on the lattice. In the example above, you can see that Major chords are always point up triangles, Minor chords are the opposite, point down.
Until recently this system didn’t translate directly to an instrument. Any chord on a keyboard will have similar but different fingerings and patterns depending on the starting note, so one still has to memorize a ton of different patterns for one scale, chord, or modulation.
A few weeks into reading Harmonic Experience, providence saw fit to lead me to the C-Thru AXiS controller. The AXiS is a Harmonic Table based midi controller that creates a table much like the lattice in Harmonic Experience, separating notes not in semi-tones like a keyboad, but by 5ths and 3rds (and of course many other inter-relationships based on this). Here is the layout of the AXiS:
If you look the relationships between the keys become clear. They are reversed from Mathieu’s lattice, 3rds are horizontal (diagonally), and 5ths are always straight up. To play a Major triad on the AXiS, just play that triangle pattern using starting at any key. C Major will have the same pattern as Bb Major, etc. There are of course drawbacks to this system (playing inversions, etc), but for the most part it accomplishes the goal of simplifying the muscle memory aspects of playing music so the user can concentrate on composition and performance. you learn the pattern for a scale, chord or mode only once, then you may modulate it anywhere without the need to retrain your fingers.
The problem with AXiS is the price tag. Its around $1700 for one from what I can tell, which is a pretty steep entrance fee for a device I may not be able to get used to. They are in the process of creating a cheaper smaller version, but I want to try it now. The solution was to build one in processing. I’ve only just started, but combining the midi reference classes I’ve been working on along with (eventually) a touch screen, I think I should be able to pull something off that works well enough for me to test this thing out.
I started by looking for ways to draw regular hexagons, and came across this site. With a some basic trigonometry and a lot of cut-and-try with the vertex functions, I came up with this function:
int length=30;
float a = length/2;
float b = sin(radians(60))*length;
float c = length;
public void drawHex(){
beginShape();
vertex(0,b);
vertex(a,0);
vertex(a+c,0);
vertex(2*c,b);
vertex(a+c,2*b);
vertex(a+c,2*b);
vertex(a,2*b);
vertex(0,b);
endShape();
}
This will construct a regular hexagon based on the length of one side.
After that I used a series of translation matrices to draw them all over the screen:
public void draw(){
rowNumber=0;
setNoteNumber(rowNumber);
for (int j=2; j<20; j++){
pushMatrix();
translate(0+space, (height-(j*(b+space/2)+1)));
drawHex(getNextNote());
for (int i=1; i <12; i++){
translate(space+(2*a)+(2*c), 0);
drawHex(getNextNote());
}
popMatrix();
j++;
rowNumber++;
setNoteNumber(rowNumber);
pushMatrix();
translate(a+c+1.5f*space, (height-(j*(b+space/2))));
drawHex(getNextNote());
for (int i=1; i <12; i++){
translate(space+(2*a)+(2*c), 0);
drawHex(getNextNote());
}
popMatrix();
rowNumber++;
setNoteNumber(rowNumber);
}
}
I predefined the number of horizontal hexagons to 12 for each row, this means that STRAIGHT horizontally across a row I will have a perfect chromatic scale. The number of vertical keys I simply copied from the AXiS.After predefining the number of columns and rows, it meant that I could construct the size of the screen based on the length of one side of the hexagon. I also included a variable that allows me to declare an amount of fixed space in between the keys (in case my fingers are too big for the key’s surface). One variable, named length, can be changed to create a bigger surface with larger keys.
After implementing some simple code to write the note name into the key as well, I was finished with the layout. Here is a snapshot of it directly out of processing:

Its of course much bigger. With the key surface complete now all I have to do is map the key locations to the midi note they’re associated with, and use some on press functions to trigger them. After that I just need to get access to a touch screen, anyone want to donate one?
Here is the preliminary code to draw the hexagons, as well as the code required to map midi notes:
In Part 2 I’ll have have midi functionality implemented and some testing done.
In Part 3 I’ll have it implemented with a touchscreen, most likely a laptop, at that point I’ll make the rest of the code available.
Processing HarmonicTable: Part 2
Last modified on 2009-01-23 03:48:16 GMT. 2 comments. Top.
Since the last post I’ve had to make far more changes than I expected. If you looked at the previous examples, there was using a loop to create the hex buttons, making translations to relative to other translations on the screen. In the process I completely lost track of the absolute position of the button, which basically made it impossible to detect the location of the mouse on the screen in order to tell which button I was pressing. As a result I had to create a separate class to represent the Hex Button, and store the absolute starting point of each hex button and the length of one side. This is all the information I needed to create and detect a hexagon anywhere on the screen. From there I just created an array of these buttons in the setup() block, and drew them all over the screen:
hexButtons = new ArrayList</p>
<HexButton>
<p>();
for (int j=2; j <20; j++){
resetNoteNumber(rowNumber);
for (int i=0; i<12; i++){
hexButtons.add(new HexButton(this, space+(i*xOffset), parseInt(height-(j*b)), length, noteNumber));
noteNumber++;
}
j++;
rowNumber++;
resetNoteNumber(rowNumber);
for (int i=0; i<12; i++){
hexButtons.add(new HexButton(this, space+parseInt(a+c)+(i*xOffset), parseInt(height-(j*b)), length, noteNumber));
noteNumber++;
}
rowNumber++;
}
As you can see I’m still making relative translations to locations on the screen, but I’m storing them in the class to be accessed later. This way I can still change the proportions and space variable at the top and not have to change a bit of code anywhere else to resize and reposition items. This greatly simplifies my draw() block:
public void draw(){
background(255);
for (int i = 0; i < hexButtons.size(); i++){
HexButton button = (HexButton) hexButtons.get(i);
button.drawHex(false);
}
}
Now detecting the position of the mouse is simple:
public void mousePressed(){
for (int i = 0; i < hexButtons.size(); i++){
HexButton button = (HexButton) hexButtons.get(i);
if (mouseX >= button.startX+a &amp;amp;&amp;amp; mouseX <= button.startX+a+c &amp;amp;&amp;amp; mouseY >= button.startY &amp;amp;&amp;amp; mouseY <= button.startY+(2*b)){
println(button.note);
activeNotes.add(button.thisNoteNumber);
midiOutput.sendNoteOn(0, button.thisNoteNumber, 100);
}
}
}
Notice I only bother performing this function when the mouse it pressed, this saves me some cycle since I have no intention of sending a midi note on unless the mouse is pressed (or dragged, which is using the same function as above). Also notice the activeNotes array. I’m storing notes that have already been pressed, so that I don’t retrigger a note unless the mouse is pressed again, which is necessary for mouse drags. After the mouse is released, I just send a note off to all notes in the acttiveNotes array.
I also revised the array to create the rows of notes across the screen. Previously it was hard coded, but with the following bit of code:
public void resetNoteNumber(int rowNumber){
if (rowNumber == 0){
noteNumber = noteNameMap.get(startingNote);
previousNote = noteNumber;
} else if (rowNumber % 2 == 0){
noteNumber = previousNote + 3;
previousNote = noteNumber;
} else {
noteNumber = previousNote + 4;
previousNote = noteNumber;
}
}
I can just change the starting note field in the class to be whatever I want, and it will always move up by rows in 5ths and 3rds. So I can make my starting note A2 instead of C2, and everything lines up without a hitch and without any code changes:
I tested it out with some seriously 80’s sounding FM pad, dragging across intervals, drawing random chord shapes in honeycomb patterns, etc. Here is a short output:
Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.
As usual here are the updated files:
HarmonicTable
HexButton
NoteReference
Its a lot of fun, even though I can only play it with the mouse. Last step is to get a touch screen. Anyone want to donate one?
Processing HarmonicTable 01
Last modified on 2009-01-23 15:54:55 GMT. 9 comments. Top.
UPDATE: This is no longer the latest version, I fixed some bugs for Mac users and reposted. To get the latest version click here.
Since I don’t have a touchscreen to test this with, I’m releasing the 01 version with mouse functionality, along with a few GUI functions to change the midi out port and the starting note number. At some point I’ll get a tablet and add the touchscreen functionality, or if someone has a tablet I can pass the source code on and they can test/implement that functionality.
There are two tabs at the top, one for the main table screen, and one for setup. The basic setup options at this time are midi ports and starting note values.
This was built using the Processing libraries, along with the ControlP5 library and Ruin & Wesen’s rwmidi library for midi functionality.
This is an executable jar, meaning if you have java installed on your machine (version 6), you should be able to double-click it and you’re off and running. I have only tested this on Windows and Linux, so if there are any Mac users out there, please let me know if there are any problems.
If you have any questions or comments, leave them in the section below.
Processing HarmonicTable 02
Last modified on 2009-01-23 15:53:40 GMT. 10 comments. Top.
Mac users pointed out some problems with 01, so I fixed the following:
- When dragging notes, the note would only sound once until the mouse was released.
- The software would not start up automatically on many Macs unless the java version was set to 6
- Unreported: Notes would only sustain as long as the mouse button was held. May be seen as a feature, see below for fix.
I fixed the dragging problem, and recompiled the software in Java 5 so that it will work in either 5 or 6, so Mac users should be able to start up without issue. I added a Release Notes toggle button on the setup screen, so you can sustain notes after the mouse is released. If you want notes to sustain only as long as the mouse is held, you can turn this Release Notes on.
There are two tabs at the top, one for the main table screen, and one for setup. The basic setup options at this time are midi ports, starting note values, and a toggle for releasing notes.
This was built using the Processing libraries, along with the ControlP5 library and Ruin & Wesen’s rwmidi library for midi functionality.
This is an executable jar, meaning if you have java installed on your machine (version 5 or above), you should be able to double-click it and you’re off and running. I have only tested this on Windows and Linux, some testing has been completed in Mac, but more needs to be done, so any Mac users out there send me your feedback.
If you have any questions or comments, leave them in the section below.
HarmonicTable 0.3
Last modified on 2009-03-20 19:38:16 GMT. 8 comments. Top.
Bit slow these days with work and other stuff to get around to some of the changes I’m been meaning to make to these projects, but here is a quick 0.3 stab. I had more changes planned for this release, along with some stuff for playing back patterns and keyboard playback support, but for now I only had time to make a few changes:
- Chord Mode – Chord mode allows the user to hold down a key on the keyboard and play a chord when a note is clicked. The chord map is on the release page.
- Chord Lock – By default when playing a chord by pressing a key, the chord only sounds while the key is held down. In chord lock mode you need only press the key of the chord you want to play, and any note you click after that will play that chord
- Various Performance Fixes – Nothing special here, moved some stuff around and improved map loops to speed the whole thing up a bit
That should cover it, you can download it here.




Tried to submit this through your contact form, but it kept freezing…
Regarding HarmonicTable – I have a multitouch screen I can use to test code for you. I’ve been using the current version on a pen tablet and by single-touch so far.
I’m not a programmer, but if you don’t mind I have some suggestions. You could enable 1-finger chords without having to use a keyboard by making hot zones at the intersections of the hexes. Once you get multitouch working, it would make it so you need less fingers to play 7ths and other big chords.. and again wouldn’t need the keyboard hotkeys.
Using this program on a touchscreen is far superior to having a physical controller like the Axis-49. On an axis you need to use all your fingers to go up and down scales, hitting individual buttons. Touchscreen lets you slide between notes. I’m not sure yet what can be done with it, but if you have multi-touch working and each finger can slide, you can probably play some very unique harmonies.
Finally, someone with a touchscreen! I would love to have you test some code in the new year. The keyboard hotkeys are basically just so I can play chords on a non-touchscreen interface. Ideally it would work exactly as you suggest (hot zones at the intersections of hexes). This is of course difficult logic to write, and even more difficult to test without access to a touchscreen, which is why I’m happy to hear you’d be willing to test this out
I’ll contact you offline and we’ll work something out. Thanks for the note about the contact form…looks like a problem with the Ajax script, I just fixed it (until the next time I upgrade it).