var bubbleswitch=false;

let bubble1angle, clunkangle, a, b, c, d, e, f, g, h, value;

​

function preload(){

    bubble1 = loadSound('sounds/bubble1.wav');

  clunk = loadSound('sounds/clunk.mp3');

  ping = loadSound('sounds/ping.wav');

  zoom = loadSound('sounds/space boom.flac');

  flutter = loadSound('flutter.wav');

  error = loadSound('error.wav');

  increase = loadSound('sounds/increase.wav');

  wood = loadSound('sounds/wood.wav');

  popp = loadSound('sounds/pop.wav');

}

​

function setup() {

  createCanvas(400, 400);

  value = 1;

  print('key A triggers/stops a loop, UP and DOWN keys change the rate of sample');

  print('S D F G H J K L - play any of the keys to play sounds');

  // sliderBubble1 = createSlider(-0.2,8,1,0.01);

}

​

function draw() {

  background(220);

  noStroke();

  bubble1.rate(value);

  clunk.rate(-0.2);

  // bubble1.rate(sliderBubble1.value());

  bubble1angle = map(bubble1.currentTime(), 0, bubble1.duration(), 0, PI/2);

  clunkangle = map(clunk.currentTime(), 0, clunk.duration(), 0, 1.5*TWO_PI);

    //blue bottom right square

  a = map(clunk.currentTime(), 0, clunk.duration(), 255, 20);

    //green circle

  b = map(ping.currentTime(), 0, ping.duration(), 255, 0);

  //pink bottom left square

  c = map(zoom.currentTime(), 0, zoom.duration(), 255, 0);

  //red circle center transparency

  d = map(error.currentTime(), 0, error.duration(), 0, 200);

  //pink sqaure big random

  e = map(flutter.currentTime(), 0, flutter.duration(), 0, 255); 

  //yellow half circles

  f = map(increase.currentTime(), 0, increase.duration(), 0, 255);

  //traible inside teal square

  g = map(wood.currentTime(), 0, wood.duration(), 0, 255);

  //yellow small circle inside balck sqaure

  h = map(popp.currentTime(), 0, popp.duration(), 0, 255);

  //pink big sqaure

  stroke(20);

  strokeWeight(5);

  fill(255,25,180,50);

  rect(50+random(-e/10,e/10), 50+random(-e/10,e/10), 300, 300);

  push();

  strokeWeight(5);

  fill(255);

  rectMode(CENTER);

    fill(255, b);

  rect(250,150,100,100);//background behind green circle

  fill(100,150,b, b);

  ellipse(250,150,80,80); //blue circle top right

  fill(255, c);

  rect(150,250,100,100); //background pink square

  fill(c, 100, 100, c);

  rect(150,250,75,75); //pink rect bottom left

    push();

    translate(150,150);

    rotate(bubble1angle);

  fill(0);

    rect(0, 0, 100, 100);//black rect top left

  fill(255,255,0,h);

  noStroke();

  ellipse(0, 0, 75, 75);//yellow circle inside black sqaure

    pop();

  push();

  translate(250,250);

  rotate(-clunkangle);

  fill(5,150,117);

  rect(0, 0, 100, 100); //teal rect bottom right

  fill(220,40,90,g);

  rect(0,0,100,100);

  // ellipse();

  pop();

  pop();

  fill(170,0,10,d);

  stroke(20);

  strokeWeight(0);

  ellipse(width/2, height/2, 350, 350); //red circle big

    fill(255,255,0,f);

  noStroke();

  ellipse(0,height/2,f*2,f*2); //yellow circle left

  ellipse(width,height/2,f*2,f*2); //yellow circle right

​

}

​

function keyPressed(){

    if (keyCode === 65) {

    bubbleswitch = !bubbleswitch;

    if (bubbleswitch==true){

        bubble1.loop();

    } else {bubble1.stop();}

  } else if (keyCode === 71) {

    flutter.play();

  } else if (keyCode === 74) {

    zoom.rate(1);

    zoom.play();

  } else if (keyCode === 75) {

    ping.play();

  } else if (keyCode === 70) {

    clunk.play();

  } else if (keyCode === 76) {

    error.play();

  } else if (keyCode === 72) {

    increase.play();

  } else if (keyCode === 40) {

    value -= 0.2;

  } else if (keyCode === 38) {

    value += 0.2;

  } else if (keyCode === 68) {

    popp.play();

  } else if (keyCode === 83) {

    wood.play();

  }

}

​

​