Javascript P5.js中矩形内的圆弧

function setup() {
  const canvasW = 680;
  const canvasH = 530;
  createCanvas(canvasW, canvasH);
  background(255)
  
  strokeWeight(1);
  noFill();

  const margin = 30;
  const numberOfSquaresX = 4;
  const numberOfSquaresY = 4;
  const squareWidth = (canvasW - margin) / numberOfSquaresX - margin;
  const squareHeight = (canvasH - margin) / numberOfSquaresY - margin;

  for (let i = 0; i < numberOfSquaresX; i++) {
    for (let j = 0; j < numberOfSquaresY; j++) {
      const x = margin + i * (squareWidth + margin);
      const y = margin + j * (squareHeight + margin);
       
      rect(x, y, squareWidth, squareHeight);
      
      let dimension = random(5, 20);
      while (dimension <= squareWidth * 2) {
        ratio = squareHeight / squareWidth; 
        if (squareHeight < dimension * 0.5) {
          endAngle = acos(squareHeight / (dimension * 0.5));
        } else {
          endAngle = 0;
        }
        arc(x, y + squareHeight, dimension, dimension, PI * 1.5 + endAngle, TWO_PI);
        dimension = random(dimension + 5, dimension + 20);
      }
    }
  }
  
  
}

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
  margin: 0 auto;
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>