​

//Declares bubbles with an empty array, an object?

​

let bubbles = []

​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

//when mouse is dragged new bubbles are created through push, in a random size between 10 - 50 (r) on top of the mouse

​

function mouseDragged(){

  let r = random(10, 50);

  let b = new Bubble(mouseX, mouseY, r);

  bubbles.push(b);

}

​

function draw() {

  background(255);

  //lets bubbles move (object?)

  for (let bubble of bubbles){

    bubble.move();

    bubble.show();

  }

  //for loop creates counter that generates bubbles

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

    bubbles[i].move();

    bubbles[i].show();

  }

  strokeWeight(0);

  fill(224, 74, 74);

  textSize(20);

  text("click for bubbles", windowWidth/3, windowHeight/2)

}

​

//Class of bubbles at x, y, & r location

​

class Bubble {

  constructor(x, y, r) {

    this.x = x;

    this.y = y;

    this.r = r;

  }

  //Sets direction of bubbles along X axis, adds 1 to Y axis position so they float up

  move() {

    this.x = this.x + random(-5, 5);

    this.y = this.y - 1;

    //this.y = this.y + random(-5, 5);

  }

​

  //creates the bubbles at x & y

  show() {

    stroke(0);

    strokeWeight(4);

    //noFill();

    ellipse(this.x, this.y, this.r * 2);

​

  }

}