Final Music Visualizer-

// song variables 

​

let Vertigo;

let stupidHorse;

let Experince;

​

// audio reactive variables 

let amplitude;

let level;

​

// tracking variables 

let songNumber;

​

​

//movement variables

let crx;

let whx;

let whx2;

let win;

​

// canvas variables 

let canvas2; 

​

​

function preload(){

  Vertigo= loadSound('Vertigo.mp3');

  stupidHorse= loadSound('stupidHorse.mp3');

  Experience= loadSound('Experience.mp3');

​

}

​

function setup() {

  createCanvas(400, 400,WEBGL);  

  canvas2 = createGraphics(400,400); 

​

  createCanvas(400, 400);

  background(0);

  crx = 80

whx = 93

whx2 = 193

win = 175

  //audio reactive

  amplitude = new p5.Amplitude(); 

  songNumber=1

     imageMode(CENTER); 

}

​

function draw() {

  level = amplitude.getLevel();

   if(songNumber == 1){

    drawSong1();

  }

  if(songNumber == 2){

    drawSong2(); } 

  if (songNumber == 3){

    drawSong3(); 

  }

​

}

​

// INTERACTIVE FUNCTIONS 

function keyPressed() {

​

  // USING THE 1,2,3 KEYS 

  if (key == 1) {

    songNumber = 1;

    stupidHorse.stop(); 

    Experience.stop();

    Vertigo.stop(); 

    Vertigo.play(); 

  }

  if (key == 2) {

    songNumber = 2;

    Vertigo.stop();

    Experience.stop();

    Experience.stop(); 

    stupidHorse.play(); 

  }

  if (key == 3) {

    songNumber = 3; 

    Vertigo.stop(); 

   stupidHorse.stop(); 

    Experience.stop(); 

    Experience.play(); 

  }

}

​

​

function drawSong1() {

  canvas2.background(38, 45, 64); 

 canvas2.image(canvas2,0,0);

​

  canvas2.fill(234, 236, 236);

  canvas2.ellipse(mouseX,mouseY,100,100);

  canvas2.fill(222, 204, 186);

 canvas2.ellipse(10,10,10,10);

 canvas2.ellipse(20,30,10,10);

  canvas2.ellipse(30,10,10,10);

  canvas2.fill(54, 48, 49);

  canvas2.rect(100,120,100,200);

  canvas2.rect(200,200,100,200);

  canvas2.rect(300,120,100,200);

  canvas2.fill(252, 222, 115);

  canvas2.rect(310,150,30,30);

  canvas2.rect(360,150,30,30);

  canvas2.fill(45);

  canvas2.rect(310,200,30,30);

  canvas2.rect(360,200,30,30);

  canvas2.fill(252, 222, 115);

  canvas2.rect(310,250,30,30);

  canvas2.rect(360,250,30,30);

  canvas2.rect(210,230,30,30);

  canvas2.fill(45);

  canvas2.rect(260,230,30,30);

  canvas2.fill(252, 222, 115);

  canvas2.rect(110,150,30,30);

  canvas2.rect(160,150,30,30);

  canvas2.rect(110,200,30,30);

  canvas2.fill(45);

  canvas2.rect(160,200,30,30);

  canvas2.rect(110,250,30,30);

  canvas2.rect(160,250,30,30);

​

​

​

   canvas2.fill(35);

  canvas2.rect(0, 320, 400, 300);

  canvas2.fill(255, 204, 0);

  //road lines

  canvas2.rect (1,350,40,4);

  canvas2.rect(75,350,40,4);

  canvas2.rect(150,350,40,4);

  canvas2.rect(225,350,40,4);

  canvas2.rect(300,350,40,4);

  canvas2.rect(375,350,40,4);

  canvas2.fill(219, 43, 57);

  canvas2.rect(crx,270,120,70);

  canvas2.fill(45);

  canvas2.ellipse(whx,350,30,30);

  canvas2.ellipse(whx2,350,30,30);

  canvas2.ellipse(win,300,40,40);

 image(canvas2,0,0);

 crx++;  

  whx++; 

whx2++;

win++ 

   if(crx > 450){

      crx=0;

    whx=10;

   whx2=105;

    win=90;

​

}

​

}

function drawSong2() {

  //print(level);

​

  canvas2.background(186, 217, 243);

  canvas2.fill(250, 195, 76);

  canvas2.ellipse(20,55,100,level*300);

  canvas2.fill(19, 138, 54);

  canvas2.rect(1,200,400,100);

  canvas2.fill(160, 133, 126);

  canvas2.rect(1,300,400,300);

  canvas2.fill(217, 220, 214);

  canvas2.rect(120,250,40,level*500);

  canvas2.rect(230,250,40,level*500);

  canvas2.fill(45);

  canvas2.rect(120,360,40,level*200);

 canvas2.rect(230,360,40,level*200);

   canvas2.fill(94, 74, 69);

  canvas2.rect(120,220,150,level*400);

  canvas2.fill(217,220,214);

  canvas2.rect(230,140,100,level*400);

  canvas2.fill(94,74,69);

  canvas2.ellipse(260,180,50,level*120);

  canvas2.fill(225);

  canvas2.ellipse(260,180,20,level*100);

  canvas2.ellipse(300,180,20,level*100);

  canvas2.fill(45);

  canvas2.ellipse(260,180,10,level*80);

  canvas2.ellipse(300,180,10,level*80);

  canvas2.fill(98, 24, 34);

  canvas2.ellipse(280,220,30,level*150);

 image(canvas2,0,0);

}

​

​

function drawSong3() {

​

​

​

  background(4, 21, 31);

  normalMaterial();

  rotateX(frameCount * 0.01);

  rotateY(frameCount * 0.01);

  rotateZ(frameCount * 0.01);

sphere(100);

torus(100,30);

​

   for(var x=0; x<400; x+=50) {

  for(var y=0; y<350; y+=100 ) {

  fill(197, 33, 132);

  ellipse(x+5,y+20,5,5);

  fill(247, 44, 37);

  ellipse(x+30,y+40,5,5);

}

   }

​

}