Arcs inside rectangular shape in p5.js

Question

I'm experimenting with p5.js and I'm trying to create a number of arcs inside rectangular shapes, without the arcs overflowing the edges of the rectangles. My goal would be to get all the arcs with the center point on the left bottom corner of the squares (x, y + squareHeight). So basically the result should be what I have but "hiding" the overflowed part of the arcs. Not sure if this is even possible using arc to be honest, here is my working sketch:

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) {
        arc(x, y + squareHeight, dimension, dimension, PI*1.5, 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/[email protected]/lib/p5.js"></script>

I have been banging my head against the wall trying many different things but I'm not able to get it to work. Maybe I should be using a different shape? I've tried with curve but I'm not able to get that result either.

Thanks!

Answer 1

The arc must be cut off if the radius of the circle is greater than the height of the rectangle. In this case you have to calculate the end angle of the arc with acos(squareHeight / radius):

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);

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/[email protected]/lib/p5.js"></script>