​

function setup() {

  createCanvas(600, 400);

​

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

    let x = random(0, width);

    let y = random(0, height);

    let r = random(20, 60);

    bubbles.push(new Bubble(x, y, r));

  }

}

​

function draw() {

  background(0,0,255);

​

  for (let bubble of bubbles) {

    bubble.draw(255, 4); //Params: strokeColor, strokeWeight

    bubble.move();

    //This adds hover effect

    if (bubble.inside(mouseX, mouseY))

      bubble.color = 255;

    else

      bubble.color = 0;

  }

}

​

//Toggle color of the bubble when clicked

/*

function mousePressed(){

  for(let bubble of bubbles){

    if (bubble.inside(mouseX, mouseY)){

      if (bubble.color === 255)

        bubble.color = 50;

      else

        bubble.color = 255;

    }

  }

}

*/

​

​

//Delete bubble when clicked

function mousePressed() {

  //Important Note: If you want to delete something from an array while iterating over it, just iterate in reverse fashion, using i - - should be avoided , because you will be accessing out of the array which works fine JS as it will just return undefined, but with other languages like python accessing out of array, would throw index out of range error.

  for (let i = bubbles.length - 1; i >= 0; i--) {

    if (bubbles[i].inside(mouseX, mouseY)) {

      bubbles.splice(i, 1);

    }

  }

}