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

Conceptual Clarity on frameCount and rotate function in p5.js

我正在做 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();

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

默认情况下,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...