let circles = [];

//variable to change background colours randomly

let rand = 10000;

​

//circle class

class Circ {

  constructor(_x, _y, _s) {

    this.x=_x;

    this.y=_y;

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

    this.ySpeed = random(-10, 10)

    this.size = _s;

    this.transp = 201;

  }

  update() { //updates the position of the circle

    this.x += this.xSpeed;

    this.y += this.ySpeed;

    fill(random(100, 255), random(100, 255), random(100, 255), this.transp);

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

  }

  replicate(){ //creates new circles everytime one instance bounces off the edges of the background

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

      this.xSpeed *= -1;

      //circles lose "energy" i.e transparency after every bounce

      this.transp -= 100;

      if (this.transp >= 100) {

        circles.push(new Circ(random(width), random(height), random (20,         60)));

      }

    }  

​

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

      this.ySpeed *= -1;

      this.transp -= 100;

      if (this.transp >= 100) {

        circles.push(new Circ(random(width), random(height), random (20,         60)));

      }  

    }

  }

  run(){ //to update the characteristics of every circle

     this.update();

     this.replicate();

   }

}

​

function setup() {

  createCanvas(400, 400);

  noStroke();

  //push starting circle into array

  circles.push(new Circ(random(width), random(height), random (20, 60)));

}

​

function draw() {

​

  // randomly setting a seed for random colours every 60 frames

  if (frameCount % 60 == 0) {

    rand = random(100000);

  }

  randomSeed(rand);

​

  fill(0, 25);

  rect(0, 0, width, height);

  // run() function called for every circle in the array

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

    circles[i].run();

  }

}

​

​

​