Data Visualization

Concept

For this task I decided to generate some sort of imagery based upon the music being played. There isn’t a particular reason why  wanted to implement this other than the fact that it seems pretty cool and fun to make.

Implementation

let song, buttton, fft;


function toggleSong() {
  if(song.isPlaying()) {
    song.pause();
  } else {
    song.play();
  }
}

function preload() {
  song = loadSound('bgmusic.mp3'); 
}

function setup() {
  createCanvas(600, 600);
  colorMode(HSB);
  angleMode(DEGREES); // Change the mode to DEGREES
  

  song.play();  
  fft = new p5.FFT(0.9, 128);
}

function draw() {
  background(0);
  space = width / 128;
  
  let spectrum = fft.analyze();
  //console.log(spectrum);
  for (let i = 0; i < (spectrum.length/2)+1; i++) {
    stroke(255);
    let amp = spectrum[i];
    let y = map(amp, 0, 256, height, 0);
    fill(i,125,125); //remove stroke(255);
    noStroke();
    rect(i * space, y, space, height - y);
    rect(width - (i * space), y, space, height);
    //rect(space, height ,width - (i * space), y);
  }
}


function touchStarted() {
  getAudioContext().resume();
}

Sketch (you might have to click the canvas to start)

 

Reflections

I would love to explore creating 3d visuals for the background and improving the aesthetics in general for this sketch. However, this was a lot of fun to make and I enjoyed the process.