​

function setup() {

  createCanvas(600, 600);

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

    circles.push(new Circ(random(width), random(height), random (10, 50),random(255), random(255), random(255)));

  }

  noFill();

}

​

function draw() {

  background(255);

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

    circles[i].run();

  }

}

​

// when the mouse is pressed assign a random x & y speed

function mousePressed() {

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

    circles[i].xSpeed = random(-10, 10);

    circles[i].ySpeed = random(-10, 10);

  }

}

​

class Circ {

  constructor(_x, _y, _s, r, g, b) {

    this.x=_x;

    this.y=_y;

    this.xSpeed = random(-10, 10);

    this.ySpeed = random(-10, 10)

    this.size = _s;

    this.r1 = r;

    this.g1 = g;

    this.b1 = b;

  }

​

  update() {

    this.x += this.xSpeed;

    this.y += this.ySpeed;

    this.xSpeed *= 0.98;

    this.ySpeed *= 0.98;

  }

​

  display() {

    noStroke();

    fill (this.r1, this.g1, this.b1, 180);

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

  }

​

  checkEdges() {

    if (this.y > height+this.size/2) {

      this.y = -this.size/2;

    }

    if (this.y < -this.size/2) {

      this.y = height+this.size/2;

    }

    if (this.x > width+this.size/2) {

      this.x = -this.size/2;

    }

    if (this.x < -this.size/2) {

      this.x = width+this.size/2;

    }

  }

  run(){

    this.update();

    this.display();

    this.checkEdges();

  }

}

​