ICM – Sound Visualization


Create a sketch that analyzes sound and translates it into something visual. Use live or recorded audio. Use color, video, images, pixels or whatever you fancy to represent the sound. Some ideas: imagine you are visualizing music for people who cannot hear. Can your visualization be as expressive as the music itself? Or maybe you are visualizing the differences in noise pollution in different cities? What does the sound of different cities look like?


Check my code here.


I watched several videos from Shiffman’s Coding Train YouTube channel and learned the fft analyze. I wanted to do something simple yet visually pleasing. My current favorite song is Talk is Cheap by JMSN. Therefore, I sectioned the first half of the song for the assignment.

I started with the simple code that collected the information from fft.anaylze() and fft.waveform(). I then created different versions of using the color based of the mapped values from the collected information. I experimented with lines, ellipses, and rectangles.

I was trying a simple rotate function.

When I was trying to experiment with rotate(). I made a mistake of placing the push() and translate() outside of the for loop I tried to generate. It caused the program to run very slow. I later realized the mistake and put the push() and translate() into the for loop.

I also wanted to experiment with lerpColor function. So the background changes subtly within a specific color range.

I also used DOM object to create the button. You can pause and continue the song. The function is quite simple. I learned a new function called pause() which is very handy for my future project.

Published by Yiting Liu


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
<span>%d</span> bloggers like this: