​

function setup() {

  createCanvas(600, 400);

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

    let x = random(width);

    let y = random(height);

    let diameter = random(20, 60);

    let col = color(random(255), random(255), random(255), 150); 

    let speedX = random(-2, 2); 

    let speedY = random(-2, 2); 

    let b = new Bubble(x, y, diameter, col, speedX, speedY);

    bubbles.push(b);

  }

}

​

function draw() {

  background(220);

​

​

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

    bubbles[i].move();

    bubbles[i].display();

  }

}

​

​

class Bubble {

  constructor(x, y, diameter, col, speedX, speedY) {

    this.x = x;

    this.y = y;

    this.diameter = diameter;

    this.col = col;

    this.speedX = speedX;

    this.speedY = speedY;

  }

​

  move() {

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

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

​

    this.x = constrain(this.x, 0, width);

    this.y = constrain(this.y, 0, height);

  }

​

  display() {

    noStroke();

    fill(this.col);

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

  }

}

​

function mousePressed() {

  let diameter = random(20, 60);

  let col = color(random(255), random(255), random(255), 150);

  let b = new Bubble(mouseX, mouseY, diameter, col, random(-2, 2), random(-2, 2));

  bubbles.push(b);

}

​