​

class Circle {

  constructor(x, y, size, speedX, speedY) {

    this.x = x;

    this.y = y;

    this.size = size;

    this.speedX = speedX;

    this.speedY = speedY;

    this.red = random(0, 255);

    this.green = random(0, 255);

    this.blue = random(0, 255);

  }

  display() {

    fill(this.red, this.green, this.blue);

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

  }

  update() {

    // bounce circles off of the sides of the canvas

    this.x += this.speedX;

    this.y += this.speedY;

​

    if (this.x + this.size/2 >= width || this.x - this.size/2 <= 0) {

      this.speedX *= -1;

    }

    if (this.y + this.size/2 >= height || this.y - this.size/2 <= 0) {

      this.speedY *= -1;

    }

  }

}

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {   

  background(100, 0, 200);

  noStroke();

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

    circles[i].display();

    circles[i].update();

  }

}

function mousePressed() {

  //                            x        y           size          speedX         speedY

  let newCircle = new Circle(mouseX, mouseY, random(10, 100), random(-5, 5), random(-5, 5));

  circles.push(newCircle);

}