Animation Project: Keyboard Website with Sound

As we had the first version of the website working Luke Monet and I continued developing the idea in order to add sound to the interactive keyboard. Luke had the idea of adding sound to the website, which would be a notes to each of the letters with a pitch that corresponds to the notes in the Alphabet Song ( a song that is commonly used when teaching children the alpahbet.) At first I was apprehensive about the idea as the order of the notes would generally be quite mixed up, users of the site are not likely to press the keyboard keys in an alphabetic sequence, and thus the song would not be recognised, but I was willing to experiment to see how this worked.


As a function had been written already for the keyboard function, adding sound was relatively simple to do. After Luke had recorded the notes for each letter, I added the corresponding audio file to each of the different letter divs and preloaded them so they would load when the page is loaded and not when the div becomes visible.


Next I put all the audio ids into an array.


Now it was just the simple task of adding a play function to the existing code (using the j integer used previously to referance the id’s position in the array), before the Timeout.

Here is a link to the updated website:

Overall I think the audio adds more value to the website and makes the experience far more interesting to the viewer than without sound. My apprehensions about the song not being clear were unfounded as during testing we found it easy to pick up that the notes of the letters are linked to the song. This probably worked so well because the song is so well known and ingrained into our culture and has such a limited range in tone that it is instantly recognisible.

To continue this project we decided to look at some other sites for research. One that particularly caught our eye was Patatap a collaboration between Jono Brandel and the band Lullatone. Here’s a link to the site:

Like our site, this site uses keyboard inputs to play sound and animate visuals on screen. One of the things I thought was very effective about this site is the way that different effects stack on top of one another, so the effects and melodies mix together. I can tell that this would be quite challenging to recreate code-wise but I will look into learning how this was achieved as it is a new area of web design. which I believe has a lot of potential.

Brandel, J., 2014. Patatap [online], Avalable from : [Accessed 26.3.2014]


Animation Project: 35mm Animation Experiment Initial Thoughts

Screen Shot 2014-02-18 at 13.59.58


colour test

Our next assignment for this project was to produce a 15 second animation. We were to make our own music for this project and then produce visuals using a 22mm by 16mm space because although the animations would be made using Flash, the format would be mimicking 35mm film.

Above are some of my first experiments. I was experimenting with colour and form. I wanted to mimic organic forms, so pulled apart the preset shapes using the pen tool. The colours are me experimenting with different contrasts. Initially I played with blue and pink, however I now feel that they were too bold and the use of varying shades of orange on charcoal grey were more effective.

For inspiration I looked at Norman McLaren’s Boogie Doodle, and I played with the colour scheme he used, mainly complementary colours orange and blue. The effectiveness of this animation comes from the timing, the music is tied to the rhythm of the music. Movement of the “camera” is created by animating lines that move into and out of the sides of the frame. This works particularly well as the movement is tied to the bars of the music. Also during the chord progressions the foreground and background colours switch position, giving a clear visual cue that ties into the different mood of the music.

McLaren, N., 1948. Boogie Doodle [video, online]. Available from: [retrieved 21.2.14]

Channel Project: Audio

Before starting any music or audio production I looked at how other adverts dealt with audio, as it seemed to be intrinsic to the sucess of the work. These Visit Scottland ads served as great inspiration.

The premise is quite simple. There is one main melody (taken from the New Age song ‘North’ by Paul Mounsey) which is remixed in order to create a range of different moods and feelings depending on the content of the advert. It is so effective because the melody is instantly recognisible and iconic throughout the series of adverts, yet the added drum tracks and harmonies create the different themes and energies needed for the different adverts.

Mounsey is a musician whose work often appears in cinema, film and advertising. Mounsey calls his work “recontextualising traditional Gaelic songs with a musical language that belongs to the crass commercial world in which I work”. Part of this is layering the main melody, taken from Gaelic roots, with a driving force of a strong drum section or energetic harmonies.

I started the music making process by coming up with short melodies that could be repeated and layered. Luke Monet also helped me with this, and came up with one of the most, in my opinion, powerful melodies for the project entitled “Lunar” in the video. Most of the melodies are arrangements of the main theme, with different instruments (mainly synths) providing different textures. We chose to use synths as they are often associated with a “futuristic sound”. Towards the end of the video is some themes that aren’t used in the videos as I did not feel they were as effective, called “Eighties” and “Mystic”. “Eighties” I feel goes too far into the kitsch-ness of synthesizers (hence its name!) and also does not have a strong driving point. “Mystic” was intended to be in the background to give a subtle cultish feel to the adverts, however the drum rhythm proved to be too overpowering and distracting from the voice.

As discussed before, the voicovers sounded too rushed and anxious for the final piece. By adding pauses between sentences and slowing them down slightly, there were much more effective and gave a calmer tone to the adverts.

The final soundtrack of the ads were just simple mixes of these melodies with the voiceovers we had recorded before. I would have liked to have arranged a proper melody, harmonies and drum tracks but unfortunately during production we were hampered a severe lack of time and resources. We had no composing software which made making music in sync with the adverts very difficult. The editing software we were using had very poor sound mixing capabilities which can be shown in the uneven volume levels of the final piece. It also had issues wih lack of precision in timing, which made some of the tracks out of sync in the final piece. It would have also been useful to edit the voiceovers and perhaps add some subtle effects to the voice, such as reverb, to make them seem more other worldly.

Interview with Paul Mounsey can be found here:

Jones, C., 2000. “Coming to Terms with My Roots” an interview with Paul Mounsey. Retrieved from: [Accessed 8.02.2014]

VisitScottland., 2011. VisitScottland Ad: Surprise Yourself . Retrieved from: [Accessed 8.02.2014]

VisitScottland., 2013. VisitScottland Ad: Year of Natural Scottland 2013 – Natural . Retrieved from: [Accessed 8.02.2014]

jsihcorp., 2009 Visit Scotland Adver for Autumn video online]. Retrieved from: 8.02.2014]