p5.js 中矩形内的圆弧

Question

我正在尝试使用 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) {
        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>

我一直在用头撞墙，尝试了很多不同的事情，但我无法让它发挥作用。 也许我应该使用不同的形状？我尝试过

curve

但我也无法得到那个结果。

谢谢！

Answer 1

arc()

函数具有单独的宽度和高度参数。您必须将高度乘以矩形各边的长宽比：

ratio = squareHeight / squareWidth; 
arc(x, y + squareHeight, dimension, dimension * ratio, PI*1.5, 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; 
        arc(x, y + squareHeight, dimension, dimension * ratio, 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>