​

function setup() {

  createCanvas(600, 600);

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

    // constructor -- "push" into blank array, new mover, width, height, and radius

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

  }

 stroke(173,216,230)

  fill(173,216,250,40);

}

​

function draw() {

  background(255);

  // .length, will give you the length of the array 

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

    circles[i].run(); // run is the function that calls the other functions

  }

}

​

// 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 Mover {

  constructor(_x, _y, _s) {

    this.x=_x;

    this.y=_y;

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

    this.ySpeed = random(-10, 10)

    this.size = _s;

  }

​

  update() {

    this.x += this.xSpeed;

    this.y += this.ySpeed;

    this.xSpeed *= 0.98;

    this.ySpeed *= 0.98;

  }

​

  display() {

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

  }

​

  // makes it go back to the top, or back to the bottom of the screen and restart "SMOOTHLY" as opposed to jumping on and off the screen

  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();

  }

}

​