This week’s assignment was to create a sketch that uses an external data source.
For a while now, I wanted to create a visual that changes to the rhythm of music, so this seemed like the perfect opportunity to play with that.
Music is data.
An mp3 file compresses sound sequences into a digital format. If we parse through this sequence we can extract really interesting information. When we think of music, we can often break down the sounds we hear ourselves, the heavy deep notes are the bass, the higher notes are called treble, we can distinguish the sounds of different instruments versus vocals, etc.
My goal was to have my data visualization represent these different parts of a song and change with the song as it played. It is kind of an ode to the familiar visual of audio meters.
By consulting the p5 sound API, there is a perfect function to parse through the data of an mp3 file: p5.FFT or Fast Fourier Transform. FFT is an algorithm that analyzes sound and can isolate individual audio frequencies.
In addition, the function getEnergy() returns the value of the energy/volume of a specific frequency. There are even 5 predefined frequency ranges: bass, lowMid, mid, highMid, and treble.
With FFT, fft.analyze(), and getEnergy() I could begin breaking down the parts of any given song. Place these functions in the draw() loop and they constantly break down and return frequency values as the song plays.
For the visualization part, I wanted to keep it simple. I used the values received from the predefined frequencies to determine the width and height of ellipses. The result is concentric circles (I love me some ripples) that grow and shrink as the song plays. Each frequency range is represented by a different color. It is quite mesmerizing.
I placed the frequency values in order will bass being the outside circle and treble the inside, because the values of the frequency range increase as the notes get lower on the scale.
What’s really cool about this visualization, however, is that you don’t necessarily need to know anything about music to understand what’s happening. It’s kind of fun to focus in on a part of a song you hear and see what circle corresponds to it. To add a little more dynamics, I have the bass circle grow more intensely to emphasize the drops. Something about the synchronization of audio and visual is very appealing. I definitely want to look into some cog sci studies of why that is. Anyway, I digress, link to the sketch below.
Ready to be hypnotized? Check it out here. SOUND ON!