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;

    //circle(mpx[i],mpy[i],10)

  }

  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;

  } 

}

​