let angles = []; //our angles here represent the x-positions 

// --> angle is the sine of x, and time is the sine of x.

let r = 5;

​

function setup() {

  createCanvas(400, 400);

 total = floor(width/(r*2));

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

      angles[i]= map(i,0,total,0,TWO_PI);

      }

}

​

function draw() {

  background(0);

  translate(200, 200);

​

  stroke(255);

​

  fill(252, 0, 200);

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

  let y = map(sin(angles[i]),-1,1,-100,100);

  let x = map(i,0,total,-200,200); //distribute whatever many circles can fit evenly across the canvas from -200 to 200

  circle(x, y, r*2); //circle takes diameter

  line(x,0,x,y);

//   let increment = TWO_PI/60;

//   angles[i]+=increment;

  }

​

}

​