Art of Sound

Year — Fall 2024

Tools — HTML, CSS, JavaScript (p5js.Sound)

Synopsis — An interactive sound visualization experience that generates real-time graphics with fast Fourier transforms.

Music credit: Sad Piano Lost Love by WaveMaster (Pixabay)

Interact

View Project Deck

Scoping ...and Descoping

For this project, I wanted to transform sound into visuals through creative and experimental coding. I originally intended to make this an app(let) that could run in the background and listen to Spotify or YouTube on the user's computer. Consider it the visual equivalent of lofi study music.

However, I quickly discovered that browsers are fickle things. At my level of programming ability, browser security would immediately mute any other tabs.

So I changed the scope to microphone input. If need be, you can play the music on another device and use the original device's microphone and display.

Three Final Variants

↑

The rainbow one, as displayed on this page, uses Fourier transforms to decompose waves into frequencies. Lower frequenceies appear towards the edge of the circle, whereas higher frequencies show towards the center.

The white one acts almost like a voice character, fluctuating with bezier curves based on amplitude of the sound waves (AKA volume).

The green one uses recursively generating functions based on the modular equivalence class of the volume.

You can visit the complete sight here!