constructor() {

    this.radius = random(6, 10);

    this.diam = 2 * this.radius;

    this.x = random(this.radius, width - this.radius);

    this.y = random(this.radius, height - this.radius);

    this.xVel = random(1, 3);

    this.yVel = random(1, 3);

    this.color = 255;

    this.alpha = 0;

  }

​

  checkBoundary() {

    if (this.y > height - this.radius || this.y < this.radius) {

      this.yVel *= -1;

      this.alpha = 0;

    }

​

    if (this.x > width - this.radius || this.x < this.radius) {

      this.xVel *= -1;

      this.alpha = 0;

    }

  }

​

  update() {

    this.y += this.yVel;

    this.x += this.xVel;

    this.alpha = min(255, this.alpha + 20);

    this.checkBoundary();

  }

​

  draw() {

    fill(this.color, this.alpha);

    stroke(0, this.alpha);

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

  }

}

​

let circles = [];

​

let numCircles = 20;

​

function setup() {

  createCanvas(400, 400);

  for (let d = 0; d < numCircles; d += 1) {

    let aCircle = new Circle();

    circles.push(aCircle);

  }

}

​

function draw() {

  background(120);

​

  // for each circle:

  for (let d = 0; d < circles.length; d += 1) {

    let aCircle = circles[d];

​

    // draw

    aCircle.draw();

​

    // update and check boundary

    aCircle.update();

  }

}

​