Week 4- Audio Visualizer

Music has always had a profound effect on me—it can transform my mood, inspire creativity, and even transport me to another place. But what if we could see music, not just hear it? That was the inspiration behind my music visualization project. I wanted to create something that would take raw audio data and turn it into a living, breathing visual experience.

I set out to design a program that listens to a song and dynamically generates visuals based on its frequencies. The goal was to make the visualization feel fluid, immersive, and organic—like the music itself. With a gradient background, floating particles, and an animated frequency bar display, the result is a captivating blend of movement and sound.

Code Highlight: Crafting the Visual Bars

At the core of this project is the drawVisualizer function. This function takes the Fourier Transform (FFT) data from the song and maps it to visual elements—essentially transforming audio frequencies into colorful, dynamic bars.

The function first analyzes the sound spectrum using fft.analyze(), which returns an array of frequency amplitudes. These values determine the height of the bars, making them respond dynamically to the beat of the song.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function drawVisualizer() { // draw bars
let spectrum = fft.analyze(); // get spectrum data
let barWidth = width / 60;
let maxHeight = height / 4;
for (let i = 0; i < 60; i++) { // loop 60 bars
let barHeight = map(spectrum[i], 0, 255, 10, maxHeight); // calc bar height
let hue = map(i, 0, 60, 180, 360); // set hue
let yPos = height - barHeight; // top pos of bar
let xPos = i * barWidth + barWidth / 2; // center pos of bar
fill(hue % 360, 80, 80, 80); // set fill color
rect(xPos - barWidth / 2, yPos, barWidth * 0.8, barHeight, 5); // draw bar
if (barHeight > maxHeight * 0.7 && frameCount % 5 === 0) { // add sparkle if tall
fill(255, 255, 255, random(50, 100)); // sparkle color
ellipse(xPos, yPos, random(3, 8)); // draw sparkle
}
}
}
function drawVisualizer() { // draw bars let spectrum = fft.analyze(); // get spectrum data let barWidth = width / 60; let maxHeight = height / 4; for (let i = 0; i < 60; i++) { // loop 60 bars let barHeight = map(spectrum[i], 0, 255, 10, maxHeight); // calc bar height let hue = map(i, 0, 60, 180, 360); // set hue let yPos = height - barHeight; // top pos of bar let xPos = i * barWidth + barWidth / 2; // center pos of bar fill(hue % 360, 80, 80, 80); // set fill color rect(xPos - barWidth / 2, yPos, barWidth * 0.8, barHeight, 5); // draw bar if (barHeight > maxHeight * 0.7 && frameCount % 5 === 0) { // add sparkle if tall fill(255, 255, 255, random(50, 100)); // sparkle color ellipse(xPos, yPos, random(3, 8)); // draw sparkle } } }
function drawVisualizer() { // draw bars
  let spectrum = fft.analyze(); // get spectrum data
  let barWidth = width / 60;
  let maxHeight = height / 4; 
  for (let i = 0; i < 60; i++) { // loop 60 bars
    let barHeight = map(spectrum[i], 0, 255, 10, maxHeight); // calc bar height
    let hue = map(i, 0, 60, 180, 360); // set hue
    let yPos = height - barHeight; // top pos of bar
    let xPos = i * barWidth + barWidth / 2; // center pos of bar
    fill(hue % 360, 80, 80, 80); // set fill color
    rect(xPos - barWidth / 2, yPos, barWidth * 0.8, barHeight, 5); // draw bar
    if (barHeight > maxHeight * 0.7 && frameCount % 5 === 0) { // add sparkle if tall
      fill(255, 255, 255, random(50, 100)); // sparkle color
      ellipse(xPos, yPos, random(3, 8)); // draw sparkle
    }
  }
}

 

One of my favorite touches is the conditional statement that adds “sparkles” to the taller bars. This subtle effect makes the visualization feel more alive, as if the bars are bursting with energy at their peaks.

Self-Reflection and Areas for Improvement

One of the biggest challenges was fine-tuning the balance between randomness and control. The bars needed to feel reactive but not chaotic, structured but not rigid.

Another area I’d like to explore is incorporating more interactive elements. Right now, the only interaction is toggling the song on and off with a mouse click. Adding features like changing color themes based on the song’s mood or allowing users to manipulate the bars with the mouse could make the experience even more engaging.

Sketch

Leave a Reply