// At least one shape

// At least one image

// At least one sound

// At least one on-screen text

// Object Oriented Programming

​

let bubbles = [];

let numberOfBubble = 3;

let music;

​

function preload() {

  music = loadSound("song18.mp3");

}

​

function setup() {

  createCanvas(500, 500);

   for (let i = 0; i < numberOfBubble; i++) {

    bubbles[i] = new bubble();

  }

  music.playMode ('untilDone');

  music.play();

}

​

function mousePressed(){

  if (music.isPlaying()){

    music.stop();

  }

  else{

    music.play();

  }

}

​

function draw() {

  background('#5c61df');

  for (let i=0; i<bubbles.length; i++){

    bubbles[i].display();

    bubbles[i].move();

  }

  strokeWeight (1);

  // white piano keys

  fill ('#fffef4');

  for (let x=0; x<=500; x+=width/7){

    rect (x, 300, width/7, 200);

  }

  // black piano keys

  fill ('black')

  for (let x=50; x<=150; x+=70){

    rect (x, 300, 45, 100);

  }

  for (let x=265; x<=450; x+=70){

    rect (x, 300, 45,100);

  }

  strokeWeight (10);

  line (0,300,500,300);

}

​

​