const rad = 150;

let ga = 2.39996;

let gr = 1.61803398875;

const wid = 4;

let counter = 0;

​

function setup() {

  createCanvas(400, 400);

  createP("Number of Points")

  sl = createSlider(1,500,128);

  sl.style("width",width.toString() + "px");

  createP("Clocking Angle");

  slangle = createSlider(1,TWO_PI,ga,0.0001);

  slangle.style("width",width.toString() + "px");

}

​

function draw() {

  let N = sl.value();

  ga = slangle.value();

  background(220);

  noStroke();

  fill(0);

  text(counter.toString(),10,20);

  text(ga.toString(),10,40);

  translate(width/2,height/2);

  counter = 0

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

    let xi = rad*sqrt(2)*(((gr*i) % 1.0)-0.5);

    let yi = ((i-N/2)*rad*sqrt(2))/N

    //let yi = rad*sqrt(2)*(((gr**(i+1)) % 1.0)-0.5);

    ellipse(xi,yi,wid,wid);

  }

  stroke(255,0,0);

  noFill();

  //ellipse(0,0,rad*2,rad*2);

  rect(-rad/sqrt(2),-rad/sqrt(2),rad*2/sqrt(2),rad*2/sqrt(2));

}