​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

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

    let rX = random(width);

    let rY = random(height);

    let rSize = random(10, 80);

    let rXSpeed = random(-3, 3);

    let rYSpeed = random(-3, 3);

    let rR = random(0, 300);

    let rG = random(0, 300);

    let rB = random(0, 300);

​

    bubbles[i] = new Bubble(rX, rY, rSize, rXSpeed, rYSpeed, rR, rG, rB);

  }

}

​

function draw() {

  background(220);

​

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

    bubbles[i].drawBubble();

    bubbles[i].moveBubble();

    bubbles[i].bounceOff();

  }

}

​

class Bubble {

  constructor(x, y, size, xspeed, yspeed, r, g, b) {

    this.x = x;

    this.y = y;

    this.size = size;

    this.xspeed = xspeed;

    this.yspeed = yspeed;

    this.r = r;

    this.g = g;

    this.b = b;

  }

​

  drawBubble() {

    noFill();

    strokeWeight(4);

    stroke(this.r, this.g, this.b);

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

  }

​

  moveBubble() {

    this.x = this.x + this.xspeed;

    this.y = this.y + this.yspeed;

  }

​

  bounceOff() {

    if (this.x > windowWidth || this.x <= 0) {

      this.xspeed = this.xspeed * -1;

    }

​

    if (this.y > windowHeight || this.y <= 0) {

      this.yspeed = this.yspeed * -1;

    }

  }

}

​