processing - 在 p5js 中创建星星的数学原理是什么

Question

我正在做来自网站 p5js.org - https://p5js.org/examples/form-star.html 的示例代码之一.除了以下几行，我理解了所有代码。

function star(x, y, radius1, radius2, npoints) {
  let angle = TWO_PI / npoints;
  let halfAngle = angle / 2.0;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

取两个角度是什么概念。我知道这是使用极坐标到笛卡尔坐标的映射。但是我无法想象这种计算是如何工作的。作者是如何在代码中想出这个逻辑的？

Answer 1

作者在画线。为此，他们需要 2 分。

为了得到这些点的坐标，他们“想象”了一个圆，因为如果星星是规则的，每个点都应该与中心的距离相同(因此在星星的中点周围画一个假想的圆)。像这样:

现在，一个圆是 360 度，或者，以弧度表示，2 * PI。像这样:

注意:零弧度在右边。如果你逆时针阅读，当你在圆圈的“顶部”时，你会得到 1/2 PI，当你在左边时，你会得到 1 * PI，在底部时会得到 1,5 * PI，然后回到 2 * PI在右侧。

通过将圆除以星星的点数，作者现在可以使用三角函数来获得绘制星星所需的坐标:

就是这样。玩得开心!