let howMany = 10;

let interval = 10;

​

function setup() {

  createCanvas(600, 600);

​

  // make our circles be at specific heights

  let ySpacing = height / howMany;

​

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

    // this will stagger each circle when it starts

    let startTime = i * interval;

    let diam = height / howMany;

    // make sure the entire circle is on screen by adding the diam/2

    let y = ySpacing * i + diam / 2;

    // make our objects!

    circles.push(new Circle(startTime, y, diam));

  }

}

​

function draw() {

  background(255);

​

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

    circles[i].run();

  }

}

​

class Circle {

  constructor(frame, yLoc, diam) {

    this.posX = -diam / 2; //put off the side of the screen

    this.posY = yLoc;

    this.velocity = 10;

    this.size = diam;

    this.activeFrame = frame;

  }

​

  run() {

    // only run if the framecount is greater than our start time

    if (this.activeFrame < frameCount) {

      this.drawCircle();

      this.moveCircle();

    }

  }

​

  drawCircle() {

    circle(this.posX, this.posY, this.size);

  }

​

  moveCircle() {

    this.posX += this.velocity;

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

      this.posX = -this.size / 2;

    }

  }

}

​