Music Vis2019

var song, vol, fft;

​

function preload() {

  song = loadSound("music.mp3");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0);

  vol = new p5.Amplitude();

  fft = new p5.FFT(0.8,64); //new p5.FFT([smoothing], [bins])

}

​

function draw() {

  background(255);

  ellipse(width/3, height/2, vol.getLevel(0)*500, vol.getLevel(0)*500);

  ellipse(width*2/3, height/2, vol.getLevel(1)*500, vol.getLevel(1)*500);

  print(vol.getLevel());

  //Now i have spectrum and it's an array

  var spectrum = fft.analyze(); //an array variable

​

  //repeat start, how many times (slots) (freq)?

  for(var i=0;i<spectrum.length;i++) {    

    //Then, I get the value from slot but you need to provide the index number starts from 0

    //println(spectrum[i]);

    //Then, I draw the rectangle based on the freq value -> height

    //Then, I also need to offset the rect how far (width)?

    //rect(i*10,0,10,spectrum[i]); //fixed rect width

    //I want to extend the spectrum to the whole screen width

    fill(spectrum[i],0,0);

    noStroke();

    rect(i*width/spectrum.length,0,width/spectrum.length,spectrum[i]);

  }

  //repeat end

  for(var i=0;i<spectrum.length;i++) {

    fill(0,spectrum[i],0);

    noStroke();

    rect(i*width/spectrum.length,height,width/spectrum.length,-spectrum[i]);

  }

  // for (var i = 0; i< spectrum.length; i++){

  // var x = map(i, 0, spectrum.length, 0, width);

  // var h = -height + map(spectrum[i], 0, 255, height, 0);

  // rect(x, height, width / spectrum.length, h )

  // }

}

​

function mousePressed() {

  song.playMode('restart');

  song.play();

  //song.loop();

}

​

​