​

function setup() {

  createCanvas(600, 600);

  let spacing = width / 60;

  for (let i = 0; i < width; i += spacing) {

    manyCircles.push( new SineCircle(i, 10 + i * 0.2)  );

  }

  strokeWeight(3);

}

​

function draw() {

  blendMode(BLEND);

  background(0);

  blendMode(ADD);

  noFill();

  stroke(255, 150);

​

  // standard way of iterating through array

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

    manyCircles[i].drawCircle();

  }

​

  // simpler way if you don't need "i"

  // for (let circ of manyCircles) {

  //   circ.drawCircle();

  // }

}

​

class SineCircle {

  constructor(x, diam) {

    this.x = x;

    this.diam = diam;

    this.speed = 0.01;

  }

​

  drawCircle() {

    circle(

      this.x,

      map(sin((frameCount+this.x)*this.speed),-1, 1, 0, height),

      this.diam

    );

  }

}

​