Lune of Hippocrates Clock

let xp = []
let yp = []
let mpx = []
let mpy = []
let xArray  = []
let yArray = []
let rArray = []
let theta = 0;
let theta2 = 0;
let theta3 = 0;
function setup() {
  createCanvas(600, 600);
  angleMode(DEGREES)
  frameRate(1)
}

function draw() {
 background(0);
 translate (width/2, height/2);
 rotate(45)
 circle(0,0,500)
 push()
 rotate(theta)
 fill(255,255,255);
 [cx1,cy1,mpx1,mpy1] =fourPs(200,200,100);
 chainUL(0,0,100);
 theta = theta+6;
 pop()
 push()
 if (frameCount%60 == 0){
   theta2 = theta2+6;
 }
  rotate(theta2)
  chainUL(0,0,100);
 pop()
 circle(0,0,200);
 push()
 if (frameCount%3600 == 0){
   theta3 = theta3+30;
 }
  rotate(theta3)
  chainUL(0,0,100);
 pop()
 circle(0,0,200);
 
}


function fourPs(x,y,r){
  xp[0] = x
  yp[0] = y-r
  xp[1] = x+r
  yp[1] = y
  xp[2] = x
  yp[2] = y+r
  xp[3] = x-r
  yp[3] = y
  for (let i = 0; i<3;i++){
    mpx[i]=(xp[i]+xp[i+1])/2;
    mpy[i]=(yp[i]+yp[i+1])/2;
  }
  mpx[3]=(xp[0]+xp[3])/2;
  mpy[3]=(yp[0]+yp[3])/2;
  return [xp,yp,mpx,mpy]
}

function chainUL(x,y,r){
  xArray[0]=x;
  yArray[0]=y;
  rArray[0]=r;
  fill(255);
  for (let i =1;i<11;i++)  {
    xArray[i]= (2*xArray[i-1]-rArray[i-1])/2;
    yArray[i]= (2*yArray[i-1]+rArray[i-1])/2;
    rArray[i]= rArray[i-1]/1.42;
  }
  let j = 10;
  while (j > 0){
    circle(xArray[j],xArray[j],rArray[j]*2)
    fill(255);
    if (j%2 == 0){fill(0)}
    j = j-1;
  } 
}