Frequency Design

Continuing from the previous post about the screen size effecting how the elements of visualizer are distributed across the 2500 x 400 display, the design needs use the whole length of the screen effectively as this is its main feature. From designing some of the visual elements and showing this to peers I have found some people are slightly confused of what each elements purpose is. It has been suggested maybe they are not relating it to the different elements of the environment and sound within there surrounding.

Looking back at the current design a striping back of the elements or a restricting was needed to conceptualize the whole ambience of the room in something at was more similar to audiences. My first blog post was a good place to start because I considered the simplest form of audio representation that is familiar to many people. Windows media player and analogue sound equalizers have been a part of the music industry for many years meaning a large portion of today population could recognise there district visual representation features. I also took inspiration from an article discussing that of digital sound representation that stated “Sound frequencies are a continuation of a sin curve at different pitches, amplitudes and frequencies”(Waters, 2015).

I used some of these ideas combining them with the research in Gestalt to create some simple designs which incorporated the whole sound input together. The main goal was to not to divide it up into separate elements keeping it as one flowing object.


The most design was that of the frequency curves, they would be familiar to a range of audiences and could show the change in noise level with simple animation. Also these changes in volume level could be seen through out the whole sound spectrum. Lastly it provided a changing curve wave that looked aesthetically pleasing as its form could changed smoothly with a flowing effect.

for (int j = 0; j < in.bufferSize(); j++){
      if (j>0) {
        int scale = width/512*2; 
        stroke(255);  //this is the colour of the first line (red)
        line(j, height/scale/2 + in.mix.get(j)*100, j+1, height/scale/2 + in.mix.get(j)*100);

With some manipulation of a mixture of examples I was able to produce a wave of witch was delicate in detail but showed the sound wave in a graphically smooth way. Dividing the line up into the buffed size (512) then drawing a line for each of these across the width produced a full line was across the screen. By applying the value of the input audio of each of the buffed size to its specific point produced a sound wave, which flowed with the incoming microphone audio. This application of division and proximity (gestalt) was applied to each point as its in close proximity to the next, when the input is added they move apart but always return to the same location at 0.

The video shows this applied with some music as this shows it changing form in the most flowing fashion. Applying this to media concept of ambience the erratic behaviour of the points is similar to that of the change and increase in varying voices sounds and elements within the environment. Going forward I will apply this to the visualizer possibly using this as an elements within the previous version, or use this on its own and develop its design further

Update: Visulizer II

Waters, D., 2015. Intro to Audio Programming, Part 1: How Audio Data is Represented – Game Theory – Site Home – MSDN Blogs. [online] Available from: [Accessed 10 Jan. 2015].

Leave a Reply