Final Sketch

let Frank;

let SZA;

let song1;

let song2;

let song3;

let level;

let amp;

let songNumber;

let canvas2;

​

function preload() {

  song1 = loadSound('sza.mhttps://deckard.openprocessing.org/user261121/visual1187090/h2f2ee6eaea6038bd9fefaf96432e7750/SZA%20-%20Good%20Days%20Acoustic%20(ONLY).mp3p3')

  song2 = loadSound('Frank.mphttps://deckard.openprocessing.org/user261121/visual1187090/h2f2ee6eaea6038bd9fefaf96432e7750/If%20Frank%20Ocean%20made%20lofi%20hip%20hop%20radio%20(1).mp33')

  song3 = loadSound('Brehttps://deckard.openprocessing.org/user261121/visual1187090/h2f2ee6eaea6038bd9fefaf96432e7750/Brent%20Faiyaz%20Feat%20Tyler,%20The%20Creator%20Gravity%20(Audio)%20(1).mp3nt.mp3')

  SZA = loadImage('pic1.jhttps://deckard.openprocessing.org/user261121/visual1187090/h2f2ee6eaea6038bd9fefaf96432e7750/71cm2BgWl1L._SL1500_.jpgpg')

  Frank = loadImage('pihttps://deckard.openprocessing.org/user261121/visual1187090/h2f2ee6eaea6038bd9fefaf96432e7750/Untitled%20design.pngc2.png')

}

​

function setup() {

​

  createCanvas(400, 400,WEBGL );

  canvas2 = createGraphics(200, 200);

    detailX = createSlider(3, 16, 3);

  detailX.position(10, height + 5);

  detailX.style('width', '80px');

​

  amp = new p5.Amplitude();

  songNumber = 1;

​

  imageMode(CENTER);

  canvas2.imageMode(CENTER);

​

}

​

function draw() {

  background(level * 299, level * 181, level * 235);

  level = amp.getLevel()

  print(level);

​

  fill(255);

  ellipse(200, 200, level * 500);

​

  if (songNumber == 0) {

    background(365);

  }

​

  if (songNumber == 1) {

    drawSong1();

  }

​

  if (songNumber == 2) {

    drawSong2();

  }

​

  if (songNumber == 3) {

    drawSong3();

  }

}

​

function keyPressed() {

  if (key == 'a') {

    songNumber = 1;

    song2.stop();

    song3.stop();

    song1.stop();

    song1.play();

  }

​

  if (key == 'b') {

    songNumber = 2;

    song1.stop();

    song3.stop();

    song2.stop();

    song2.play();

  }

​

  if (key == 'c') {

    songNumber = 3;

    song1.stop();

    song2.stop();

    song3.stop();

    song3.play();

​

  }

  print(songNumber);

}

​

function mousePressed() {

​

}

​

//custom functions//

function drawSong1() {

​

​

  background(level * 252, level * 119, level * 3);

​

  fill(255);

  ellipse(156, 150, level * 450);

​

  fill(255);

  ellipse(180, 100, level * 500);

​

  fill(255);

  ellipse(120, 140, level * 350);

​

  fill(255);

  ellipse(160, 150, level * 375)

​

​

​

  //lower level//

  fill(255);

  ellipse(-156, -150, level * 450);

​

  fill(255);

  ellipse(-80, -100, level * 500);

​

  fill(255);

  ellipse(-20, -140, level * 350);

​

  fill(255);

  ellipse(-60, -150, level * 375)

​

  fill(255);

  ellipse(300, 350, level * 400)

  fill(255);

  ellipse(320, 389, level * 365)

  fill(255);

  ellipse(360, 390, level * 400)

  fill(255);

  ellipse(385, 350, level * 425)

  fill(255);

  ellipse(370, 400, level * 500)

​

  fill(255);

  ellipse(-100, 1, level * 370)

  fill(255);

  ellipse(-150, 10, level * 290)

  fill(255);

  ellipse(-250, 50, level * 350)

​

  fill(255);

  ellipse(350, 350, level * 300);

  fill(255);

  ellipse(280, 395, level * 350);

  fill(255);

  ellipse(-200, 50, level * 360);

  image(SZA, 0, 0, 200, 200);

​

}

​

function drawSong2() {

  background(245, 102, 66)

  image(Frank,0,0,350, 350);

 line(0,0,mouseX,mouseY);

  line(0,0,mouseX,mouseY);

  line(100,100,mouseX,mouseY)

  line(mouseX,mouseY,-100,0);

  line(0,200,mouseX,mouseY);

  line(-200,200,mouseX,mouseY);

  line(-100,200,mouseX,mouseY);

  line(0,200,mouseX,mouseY);

  line(-200,-100,mouseX,mouseY)

  line(-200,0,mouseX,mouseY);

  stroke(0, 0, 0);

  bezier(mouseX,mouseY, -100, 10, 90, 90, 15, 80);

   bezier(0,100,200, -100,200, mouseX,mouseY, -150,0);

  bezier(0,-20, -30,100,mouseX,mouseY,-80,150)

  line(200,0,mouseX,mouseY)

​

​

}

function drawSong3(){

    stroke(255, 204, 0);

  for (let lineX = 15; lineX <= 800; lineX += 15) {

    line(lineX, 405, 0,250);

    // lines//

  } 

  for (let lineX =8.75; lineX <= 4000; lineX += 17.7) {

line(lineX,-200,20,250)

  stroke(210, 179, 242);

    }

 for( let lineY = 17; lineY <= 375; lineY+=7.5){

   line(-200,lineY,200,0)

   stroke(139, 255, 117);

  }

    for( let lineY = 35; lineY <= 9550; lineY+=2.5){

   line(-200,lineY,125,200)

   stroke(171, 203, 255);

      //3D

  cone(30, 95, detailX.value(), 16);

            rotateY(millis() / 1000);

        rotateX(frameCount * 0.01);

  rotateY(frameCount * 0.01);

  torus(30, 15);

}

}