​

function setup() {

  createCanvas(400, 400);

​

  // // create bubble objects to be added to the array

  // for (var i = 0; i < 10; i++) {

  //   bubbles.push(new Bubble(random(width), random(height)));

  // }

}

​

function draw() {

  background(0);

  // move and display every bubble in the array

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

    bubbles[i].move();

    bubbles[i].display();

    if (bubbles.length > 50) {

      bubbles.splice(0,1);

    }

  }

}

​

function mouseDragged() {

  bubbles.push(new Bubble(mouseX,mouseY));

}

​

function mouseClicked() {

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

    bubbles[i].clicked();

  }

}

​

function Bubble(x,y) {

  this.x = x;

  this.y = y;

  this.col = color(255, 100);

  this.display = function() {

    stroke(255);

    fill(this.col);

    ellipse(this.x, this.y, 24, 24);

  }

  this.move = function() {

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

    this.y = this.y + random(-1, 1);

  }

  this.clicked = function() {

    var d = dist(mouseX, mouseY, this.x, this.y);

    if (d < 24) {

      this.col = color(255, 0, 200);

    }

  }

}