Chris McLay.

Interaction designer and user experience consultant.

The Visual Score in Motion

After choosing the piece of music, the next step I outlined for myself was to create a visual map of the music which I could use as a design tool for the following stages. What I wanted from this was a rough break down of the various layers in the music that would be represented visually on the screen, and to know when these layers were being played.

This sounded fairly simple to me and I thought I could knock out my first draft in an afternoon of listening. It took much much longer, so much so I have no idea actually how long it took. It was rewarding in many ways and made me much more familiar with the music and how it had been constructed.

Here is a reduced version of the score:

Replica - Visual Score

You can download a PDF version as well.

In order to test the accuracy of my score I watched it scroll past on my screen and listened to the music, but this did not seem sufficient. Taking the lead from the Kronos Quartet performance of Krzysztof Penderecki’s Quartetto per archi (1960) in Visual Music, I decided to use a red line to mark time on my score and set the score to scroll past in real time as the music played.

Kronos Quartet - Visual Music

Image from Kronos Quartet's performance of Krzysztof Penderecki's Quartetto per archi (1960) in Visual Music.

Screen capture of my visual score and it's red line in the middle of the screen.

Screen capture of my visual score and it's red line in the middle of the screen.

What was most interesting about doing this was how close to fulfilling my goals this simple animation was. I intended to create a visual accompaniment for the music which engaged the audience and enhanced their experience of listening to the music. Watching these simple coloured boxes scroll past definitely had this effect on the people who saw it. I would suggest that this came from three things:

  • watching the boxes go through the red line and recognising there associated parts in the music;
  • being able to anticipate the music by seeing what in coming up; and,
  • a sense of progress in the music associated with watching the time scale go past.

The sense of anticipating the music was what intrigued me most about this example. It also worried me as well. In my thoughts so far, any visuals I create would come on with the music, not before it. If this sense of being able to anticipate was critical then I might have to re-think some of my concepts. So I moved the red line to the edge of the screen and ran the sore from this point.

Screen capture of my visual score and it's red line at the right edge of the screen.

Screen capture of my visual score and it's red line at the right edge of the screen.

This did diminish the impact the visuals had, but they still worked well. They were not as engaging as the previous example, and it was much harder to match the boxes with the music, but it became clearer as the track went on. I think this sense of anticipation was important in this example as the visuals were quite basic and plain. In a more complete visual this would (hopefully) not be the case. Still it could be a useful tactic to use with certain layers, to bring them in slightly earlier, in order to train and build a sense of anticipation in the audience.


scodav said:

6 June 2010

Great looking score! Can you tell me what software you used to create it?

Chris McLay said:

6 June 2010

Hi Scott,

The original score was probably drawn in Illustrator or in OmniGraffle. The PDF was then imported into Quartz Composer and animated that way.

Leave a comment