comment 0

Music Machine – Clock Component

The Music Machine is a concept I created for the Workshops in Creative Coding I module on Goldsmiths’ MA Computational Arts course. The presentation of this concept can be viewed here, but I will also provide a short summary:

  • I aim to create an audiovisual instrument where the interface is the piece
  • Users can utilise a number of components to build their own ‘music machine’
  • The combination of many simple processes/components/rhythms should encourage the exploration of polyrhythm and emergent complexity

For the first assignment of this module, I decided to build a single component: the ‘clock’ component. Here is a video of my result, including a walkthrough of the code:

Music Machine: Clock Component Walkthrough from Greg White on Vimeo.

 !! Download the source code from my GitHub.

And now a more detailed explanation:


To create a prototype ‘clock’ component for my Music Machine audiovisual instrument concept.

My initial intentions were:

  • Create a clock component that would produce sounds when a spinning beater collides with a block
  • Produce multiple blocks that the user can toggle on and off
  • Allow the user to load their own sounds
  • Allow the user to control the component by OSC or MIDI

After working on the implementation of this component, I decided that it could be more effective if, instead of the user loading their own sounds, the component would create MIDI messages that could be sent out to DAWs or other instruments in order to trigger notes or samples. Therefore the Music Machine concept would become more of a sequencer, allowing users to integrate it with their existing samples, instruments, lights, and so on.

So my revised intentions are:

  • Create a clock component that would produce sounds when a spinning beater collides with a block
  • Produce multiple blocks that the user can toggle on and off
  • Allow MIDI input and output

MIDI functionality has not been implemented in this version of the component. Rather, this prototype demonstrates how I have been able to achieve my main goal of creating a controllable system in which events are triggered based on collision detection. Sending and receiving MIDI messages requires add-ons, which we have been advised to avoid for this term. Despite this I have been trying to integrate MIDI in this project, but have not had any luck as of yet (in fact, getting the example projects to work has been a struggle!).


First a ring is drawn, with twelve equally-spaced blocks along its diameter. Each block is ‘off’ to begin with – meaning no sounds will occur if it is collided with. To indicate this, the blocks are coloured light grey.

Then a beater is created, by drawing two filled circles (a larger one for the beater head, which travels along the diameter of the ring, and a smaller circle to indicate the centre of the ring), and drawing a line that joins their centre points.

The beater head is then rotated about the centre of the ring. The speed of the rotation is determined by multiplying the current frame number by a factor named ‘speed’. The mouse can be increased and decreased by pressing the = and – keys respectively (on a U.K. keyboard the ‘=‘ key is also labelled ‘+’).

The user can turn on any of the blocks by moving the mouse over it or the surrounding area — determined by the variable ‘hoverSize’ — at which point the block changes colour, and then clicking. To indicate if a block is active, it is filled solid black. I had tried to automate the creation of these hover areas like I automated the drawing of the blocks themselves (using a for loop to iterate through an array of hover areas), but could not achieve that on this occasion, I think because of complications using the push/popMatrix(), translate(), and rotation() methods. Instead I manually created a hover area for each block, unfortunately making the code more lengthy.

When a block is active, the programme checks if the beater is colliding with it. Each block has an angle assigned to it, indicating where it is on the ring: the block at 3 o’clock would be 90 degrees, the block at 6 o’clock would be 180, and so on. The angle of the beater is stored as a float named ’angle’, and the value of ‘angle’ from the previous frame is stored as ‘prevAngle’. A check is then made to see whether, between frames, the beater’s angle has increased past a block. For example if block 3 is on, and the value of ‘prevAngle’ is 89 whereas ‘angle’ is 91, this means a collision has occurred. This method, suggested by Rebecca Fiebrink, is the most accurate I have come across.

If a collision occurs, the loaded soundfile is played (in this case a sample from Logic 9’s Ultrabeat drum machine), the beater flashes, and the angle at which the collision occurred is printed to the console.



This programme demonstrates how I have achieved my aim of creating simple audiovisual interaction using openFrameworks. I have included several methods of interaction for the user, and taken advantage of loops and structs to simplify the code. To complete this project I have also had to explore coordinate systems and trigonometry, in order to rotate the beater.



Overall I am happy with my project, as I have achieved the majority of what I wanted to, and am well-placed to move forward with it.

To be improved:

  • The changing of speed could be better handled so that it doesn’t jump (this shouldn’t be an issue if mapping a MIDI slider to interpolate through a range of values)
  • Automating the creation of hover areas, perhaps using ofRectangle
  • When there is a collision, make the beater’s flash of colour last longer, and leave a trail that slowly fades behind (a bit like a comet)

To be implemented:

  • Full MIDI input (using a slider to alter the speed of rotation) and output (sending an on/off note pair)
  • Allow for the creation of multiple components on screen at once, in order to effectively observe polyrhythms and emergent complexity



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s