如何用 Processing.Js 制作一个十四边形？

Question

我想制作一个四边形，一个有 14 条边的多边形，Processing.JS。
（我想把十四边形做成下图所示的样子！）

使用我想复制的图像中给出的数字，我得出结论，每件作品（我不知道它的正确名称）的角度为 25.714285714°.....

25 and 10/14 = 25 and 5/7 - 5/7 in decimal form = 0.714285714
所以，我到达了 25.714285714°

现在，在 Processing.JS 中，我想使用 while 循环：

var r = 0;

var draw = function() {

translate(200,200);  
while(r < 361){
rotate(r);
r = r + 25.714285714;
line(200,0,200,200);
}

};

在这里，我设置了一个变量，r。 r 将是 rotate() 函数的变量。 while 循环将继续进行，直到 r 达到 360 - 这将允许 r 的变化，角度增加 25.714285714°，而 r < 361。
但是，遗憾的是，这并没有发生。
我在 canvas 上看到的是从屏幕上拍摄的线条。

（编辑）我在 while() 循环上方添加了 translate(200,200); - 这有帮助，但线条看起来仍然不像上面的图片。

线的第二个点不在中心；整条线正在转移。我只希望第一个（顶部）点按给定的角度变化移动。

我该如何更改代码以实现我正在努力实现的目标？
任何帮助将不胜感激 - 感谢您的宝贵时间！

P.S。这是我使用当前代码的结果 -

Answer 1

Processing.js 仅用于运行处理代码。这看起来像是 Processing 和 Javascript 代码的混合，所以我的第一个建议是 "write real Processing code".

话虽如此，如果您想根据坐标旋转来执行此操作，请查看您的 14 边形：它是 14 个重复的三角形，因此分析一个三角形并绘制 14 次。任何三角形切片都由从 "the center" 到 "a vertex on the 14-gon" 的直线定义，距离为（必要的）r，即外接圆的半径。那么，给定 14 边形上的顶点 (r,0) 下一个顶点 (nx,ny) 在哪里？

简单的数学：

first vertex = (x, y) = (r,0)
next vertex = (nx,ny) = (r,0) rotated over (0,0) by (phi = tau/14)

（我在这里使用 tau 因为它是一个更方便编程的常量。它简单地等于 2*pi，因此代表一个完整的圆，而不是半个圆)

现在，使用基本三角学计算旋转坐标：

nx = r * cos(phi) - 0 * sin(phi) = r * cos(phi)
ny = r * sin(phi) + 0 * cos(phi) = r * sin(phi)

好的，完成了。这个 nx,ny 计算显然不是特定于数字 14，它是关于任意角度的，所以让我们编写解决方案并使其适用于 any n 边多边形：

void setup() {
  size(400,400);
  noLoop();
}

void draw() {
  background(255);
  // offset the coordinate system so that (0,0) is the sketch center
  translate(width/2,height/2);
  // then draw a polygon. In this case, radius width/2, and 14 sided
  drawNgon(width/2, 14);
}

void drawNgon(float r, float n) {
  // to draw (r,0)-(x',y') we need x' and y':
  float phi = TAU/n;
  float nx = r * cos(phi);
  float ny = r * sin(phi);

  // and then we just draw that line as many times as there are sides
  for(int a=0; a<n; a++) {
    // draw line...
    line(r,0, nx,ny);
    // rotate the entire coordinate system...
    rotate(phi);
    // repeat until done.
  }
}

现在我们可以通过将输入更改为 drawNgon(..., ...).

来自由更改多边形半径和边数

如何用 Processing.Js 制作一个十四边形？

How can I make a tetradecagon with Processing.Js?

javascript

processing