p5.js 中 frameCount 和旋转函数的概念清晰度

Question

我正在做 p5.js 网站上的示例之一 - https://p5js.org/examples/form-regular-polygon.html。我对旋转函数在该代码中的工作方式感到非常困惑。在下面的函数中，如果我只是传递 rotate(frameCount) ，在浏览器中它会显示我旋转两个在形成星形内相交的三角形，但是一旦我划分 frameCount 它就会消失。还有代码中使用的等式 - 有人可以给出我们如何达到这一点的数学直觉。

let sx = x + cos(a) * radius;
let sy = y + sin(a) * radius;

 push();
 translate(width * 0.2, height * 0.5);
 rotate(frameCount / 50);
 polygon(0,0,82,3);
 pop();

Answer 1

关于“两个三角形相交形成一个星形”：

默认情况下，rotate 函数采用弧度。当您执行 rotate(frameCount) 时，您会在每一帧将角度增加 1 个弧度。一个弧度大约等于 57 度，因此您的三角形在每一帧都会旋转大约 57 度。在第 3 帧，三角形会旋转大约 120 度，并且会与第 1 帧的三角形大致重叠。同样，第 4 帧的三角形会与第 2 帧的三角形大致重叠。

您看到的“两个三角形”只是两组三角形，一组是第 1、3、5 帧处的三角形……另一组是第 2、4、6 帧处的三角形……

这就是为什么如果您想获得相当连续的旋转，应该将 frameCount 除以某个数字。或者，您也可以将 angleMode 设置为 DEGREES。在那种情况下，您不必再划分 frameCount 因为在每一帧三角形只会旋转 1 度而不是 1 弧度。

关于数学公式：

事实上，该示例中使用的函数应该称为 regularPolygon 而不是 polygon，因为它只绘制正多边形。

现在，如何绘制正多边形？你知道每个顶点到中心的距离是一个常数。在此示例中，该数字是 radius 变量。而且你知道如果用多边形中心为原点的极坐标，每两个相邻顶点的夹角差也是一个常数。在此示例中，该数字是 angle 变量。

更准确地说，顶点的极坐标应采用以下形式：

v1 = (radius, 0)
v2 = (radius, angle)
v3 = (radius, angle*2)
...

将它们转换为笛卡尔坐标，你会得到类似的东西：

v1 = (cos(0)       * radius, sin(0)       * radius)
v2 = (cos(angle)   * radius, sin(angle)   * radius)
v3 = (cos(angle*2) * radius, sin(angle*2) * radius)
...

但是，如果多边形的中心不是原点，而是点 (x, y) 怎么办？现在顶点的笛卡尔坐标变为：

v1 = (x + cos(0)       * radius, y + sin(0)       * radius)
v2 = (x + cos(angle)   * radius, y + sin(angle)   * radius)
v3 = (x + cos(angle*2) * radius, y + sin(angle*2) * radius)

所以当你这样做时：

for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius;
    let sy = y + sin(a) * radius;
    vertex(sx, sy);
  }

你真的在画顶点v1, v2, v3...。

p5.js 中 frameCount 和旋转函数的概念清晰度

Conceptual Clarity on frameCount and rotate function in p5.js

processing

computational-geometry

p5.js