Analyzing Sound

When you want to make a drawing respond to an audio signal, the most basic thing you could do is to make it respond to the overall signal’s volume, its amplitude. This will give you the ability to animate your drawing, but only based on a single input. What if you would want to create different animations for the bass frequencies and for the high ones, or use a custom range of frequencies to animate different parts of your drawing? Here is where a Fast Fourier Transform can broaden your options.

At its heart FFT is an algorithm, that analyses a waveform and provides data about its different frequencies. So after you run an FFT analysis on an audio track, you can get a detailed report of its complete frequency spectrum and the amplitude of each frequency range. Then, using these different ranges, you can make your drawing respond differently for the bass, mid, or high frequencies of the signal.

The p5.sound library has a built-in FFT object, which comes in handy with a lot of useful methods depending on what you need to do. For our demos, we mostly use getEnergy() which returns a value from 0 to 255, representing the volume of that frequency.

Running this analysis while the music plays, you can make your visuals respond to different frequencies!

In order to create our base drawing, we divide the circle in even pieces and draw some basic shapes around it. In the following image you can see the different options you get if you divide the circle in 4 pieces, 8 pieces, and so on (the black lines represent the effect of also going to the opposite direction for each line).

The fun part begins if you switch these static variables with a dynamic number, that constantly changes over time, like the volume of a specific frequency, the bass, the mid frequency, etc. Then you can map these values with your own custom range that fits your animation and gain complete control over the motion of your shapes.