P5.js - Vesica Piscis and recursive shapes

index.p5.js

function setup() {
  createCanvas(700, 600);
  background(220);
  iterationSlider = createSlider(0, 20, 1,0.01);
  iterationSlider.position(10, 10);
  iterationSlider.size(200, 10);
  
  angleSlider = createSlider(0, 360, 0,15);
  angleSlider.position(280, 10);
  angleSlider.size(200, 10);
}

function vesica_n(level, cx, cy, r, shapeAng){
  let shapeHeight = sqrt(2**(level+1)-1)/(2**level)
  let arcDevi = (2 * 1 - (1 / (2 ** (level - 1)))) * r
  let levelAng = asin(shapeHeight)
  let chord_x = cos(shapeAng)*arcDevi/2
  let chord_y = sin(shapeAng)*arcDevi/2

  arc(cx+chord_x, cy-chord_y, r*2, r*2, PI-levelAng-shapeAng, -PI+levelAng-shapeAng, CHORD)
  arc(cx-chord_x, cy+chord_y, r*2, r*2, -levelAng-shapeAng, levelAng-shapeAng, CHORD)
  
}
function vesica_sn(level, cx, cy, r, shapeAng){
  let shapeHeight = sqrt(2**(level+1)-1)/(2**level)
  vesica_n(level, cx, cy, r/shapeHeight, shapeAng)
}
function draw() {
  background(220);
  noStroke()
  fill(0)
  textAlign(LEFT, TOP)
  textSize(12)
  let v = iterationSlider.value()
  let a = angleSlider.value()
  
  text(`n = ${v}`, 220, 12)
  text(`a = ${a}deg (${radians(a).toFixed(2)}rad)`, 490, 12)
  
  vesica_n(0, width/2, height/2, sqrt(width**2+height**2)/4, radians(a))
  fill(220)
  vesica_sn(v, width/2, height/2, sqrt(width**2+height**2)/4, radians(a))
}