Math + Making

A student blog for Math 189AH: Making Mathematics at Harvey Mudd College

Using the Fourier Transform to Generate Audio Responsive Visuals!

Nora O’Connor

For this project, I wanted to learn more about the fourier transform, and use it to generate visuals that respond to different frequencies. I did this in a mostly exploratory way which was super fun!

The fourier transform can take a time based signal of some type and output the frequencies present within it. I really enjoy this article which says the fourier transform “given a smoothie, finds the recipe”

I also think this 3blue1brown video does an amazing job visually representing how the fourier transform works:

My goals for this project were to get a better grasp on how the fourier transform works, practice coding, and have a fun visual that responds to audio!

I started by finding a variety of ways people implemented the fourier transform in python, and tried to copy what they did. Then, I tried to understand what the code was doing / how it worked. I tried to see what type of information each variable was storing and put in other wav files I downloaded.

The first thing I tried was this:

I copied the code, and then had to make some changes so my variables were the right types. Then I put in my own wav file!

After that, I decided to try another tutorial.

I used this:

And i don’t think it really worked for me?


Finally, I found a tutorial I really liked that had me generate wav files at different frequencies, and then combine them and plot the fourier transform. It really helped me understand how useful the fourier transform can be at removing unwanted “noise” from sound signals.

I also got to play the sound files before and after removing the noise! Which was cool.

After I played with python for a while, I decided to use Hydra, which is a super cool and pretty intuitive live coding video synth. I read a lot of the documentation and tried to learn about the different functions and found that I could pretty easily make it sound responsive.

I wrote this code which responds to the lower frequency sounds by modulating the visuals on the screen, and the color is dependent on the higher frequency sounds.

Here’s what it looks like!

I’ve linked it below in case anyone wants to mess with it or just see what it looks like while moving!

I can also do things like pixelate it to different degrees

Or do this which only really looks cool when its moving…

I’ve linked my visual below if anyone wants to mess with it! There’s also lot of other fun ones and I can think of like a million more cool things to do with this!

my visual!

– nora 🤠


One response to “Using the Fourier Transform to Generate Audio Responsive Visuals!”

  1. […] too. Or I could expand the show to multiple dimensions with something similar to what Nora’s Audio Responsive Visuals project. Or… something else? We can just look outside and probably find inspiration if we […]

Leave a Reply

Your email address will not be published. Required fields are marked *