var sound2

var sound3

​

let angle = 0

let rotationAngle = 0;

​

//  load sound

function preload(){

  sound1 = loadSound('lo-fi-midnight-hip-hop_medium-187368.mp3', loaded);

  sound2 = loadSound('lofi-study-112191.mp3', loaded);

  sound3 = loadSound('relaxed-vlog-night-street-131746.mp3', loaded);

  sound4 = loadSound('risk-136788.mp3',loaded);

}

function loaded() {

    console.log("Sound files loaded successfully."); 

}

function setup() {

  createCanvas(500, 500);

}

​

function draw() {

  background(0);

  textSize(16);

  fill(255);

  stroke(0);

  strokeWeight(4);

  text('Press any key from 1 to 3, and turn up the speakers',50,250);

​

//sound2

    if(key == '2'){

  background(254, 232, 255);

// sound correlates to movement of the squares

  let playhead2 = sound2.currentTime();

  let angle = map(playhead2, 0, sound2.duration(), 0, TWO_PI); // full rotation

  let spinSpeed = 20;     

  push();

// position of spin

  translate(238 / 2 + 120, 300 + 80 / 2); 

  rotate(angle * spinSpeed); 

  fill(240, 13, 5);

  noStroke();

  rect(0, 0, 50, 50); 

  fill(240, 72, 5);

  noStroke();

  rect(0, 80, 50, 50);

  fill(240, 177, 5);

  noStroke();

  rect(0, 160, 50, 50);   

  fill(220, 240, 5);

  noStroke();

  rect(0, 240, 50, 50);   

  fill(103, 240, 5);

  noStroke();

  rect(0, 320, 50, 50);  

  fill(5, 240, 111);

  noStroke();

  rect(0, 400, 50, 50);  

  fill(5, 255, 251);

  noStroke();

  rect(0, -80, 50, 50);   

  fill(5, 255, 251);

  noStroke();

  rect(0, -160, 50, 50);

  fill(5, 109, 255);

  noStroke();

  rect(0, -240, 50, 50);   

  fill(5, 109, 255);

  noStroke();

  rect(0, -320, 50, 50);  

  fill(118, 5, 255);

  noStroke();

  rect(0, -400, 50, 50);  

  pop();

}

​

//sound1

// if statement  

 else if (key == '1') {

  background(181, 178, 98);

  if (mouseIsPressed) {

    stroke(224, 209, 169);

    fill(199, 159, 122);

    ellipse(mouseX, mouseY, 40, 40);

  } 

  if (!mouseIsPressed) {

    stroke(135, 122, 199);

    fill(15, 30, 102);

    ellipse(mouseX, mouseY, 40, 40);

  }

}

  //sound3

if (key == '3') {

  background(0);

// sound correlates to movement of the circles 

  let playhead4 = sound4.currentTime(); 

  let y12 = map(playhead4, 0, sound4.duration(), 0, 100); 

  noStroke();

//   middle color

  fill(10, 36, 10);

  circle(250, 250, y12 * 10);

  fill(19, 66, 19);

  circle(250, 250, y12 * 8);

  fill(27, 94, 27);

  circle(250, 250, y12 * 7);

  fill(35, 120, 35);

  circle(250, 250, y12 * 6);

  fill(42, 145, 42);

  circle(250, 250, y12 * 5);

  fill(50, 171, 50);

  circle(250, 250, y12 * 4);

  fill(58, 199, 58);

  circle(250, 250, y12 * 2.7);

  fill(67, 232, 67);

  circle(250, 250, y12 * 1.5);

  fill(73, 252, 73);

  circle(250, 250, y12);

//   top right

  fill(247, 124, 69);

  circle(50, 50, y12 * 10);

  fill(245, 104, 42);

  circle(50, 50, y12 * 8);

  fill(224, 95, 38);

  circle(50, 50, y12 * 7);

  fill(201, 85, 34);

  circle(50, 50, y12 * 6);

  fill(179, 75, 30);

  circle(50, 50, y12 * 5);

  fill(161, 68, 27);

  circle(50, 50, y12 * 4);

  fill(128, 54, 22);

  circle(50, 50, y12 * 2.7);

  fill(92, 39, 16);

  circle(50, 50, y12 * 1.5);

  fill(59, 25, 10);

  circle(50, 50, y12);

//   bottom right 

  fill(232, 116, 210);

  circle(450, 450, y12 * 10);

  fill(199, 101, 180);

  circle(450, 450, y12 * 8);

  fill(176, 90, 159);

  circle(450, 450, y12 * 7);

  fill(153, 78, 138);

  circle(450, 450, y12 * 6);

  fill(128, 66, 116);

  circle(450, 450, y12 * 5);

  fill(110, 57, 100);

  circle(450, 450, y12 * 4);

  fill(87, 45, 79);

  circle(450, 450, y12 * 2.7);

  fill(69, 36, 63);

  circle(450, 450, y12 * 1.5);

  fill(51, 27, 47);

  circle(450, 450, y12);

}

}

​

​

function keyTyped() {

  console.log("Key pressed: " + key);

  stopAllSounds();

  if (key === '1') {

    sound1.play();

    console.log("Playing sound1");

  } else if (key === '2') {

    sound2.play();

    console.log("Playing sound2");

  } else if (key === '3') {

    sound4.play();

    console.log("Playing sound4");

  } 

}

​

function stopAllSounds() {

  sound1.stop();

  sound2.stop();

  sound3.stop();

  sound4.stop();

}