Grant Muller

Processing HarmonicTable: Part 2

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


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++; } [/sourcecode] 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: [sourcecode language='java'] public void draw(){ background(255); for (int i = 0; i < hexButtons.size(); i++){ HexButton button = (HexButton) hexButtons.get(i); button.drawHex(false); } } [/sourcecode] Now detecting the position of the mouse is simple: [sourcecode language='java'] 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); } } } [/sourcecode] 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: [sourcecode language='java'] 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; } } [/sourcecode] 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:

HarmonicTable Sample

As usual here are the updated files:


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?


  1. You know that could really work with a wii. Could make some interesting sounds with just using the wii as a mouse. To ensure that it doesnt make sounds that you dont like you can use it with ableton which has a scale control.

    nice work, sir!

    1. Huh! I hadn’t thought of that…that’s a great idea! That is DEFINITELY going on the list of features to implement. I use Ableton’s scale control a lot actually when recording keyboards, cause I’m not that great at playing them 🙂

Leave a Reply to zsl Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.