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

Question

我想制作一个Tetradecagon，一个14边的多边形，带有Processing.JS （我想让Tetradecagon像下图所示！）

使用我希望复制的图像中给出的数字，我得出结论，每件（我不知道它的名称），角度为25.714285714°.....
< br /> 25和10/14 = 25和5/7 - 5/7十进制形式= 0.714285714
所以，我到达25.714285714°

< / p>

现在，在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。
但遗憾的是，这种情况并没有发生。
我在画布上看到的是从屏幕上射出的线。

（编辑）我在translate(200,200);循环上方添加了while() - 这有帮助，但这些线仍然不像上图所示。

该线的第二点不是留在中心;整条生产线正在转移。我只希望第一个（顶部）点被给定的角度变化移动。

如何更改代码以达到我所追求的目标？
任何帮助将不胜感激 - 感谢您的时间！

附：这是我当前代码的结果 -

Answer 1

Processing.js仅用于运行Processing代码。这看起来像处理和Javascript代码的混合，所以我的第一个建议是“编写真正的处理代码”。

话虽如此，如果你想根据坐标旋转这样做，看看你的14-gon：它是14个重复的三角形，所以分析一个三角形并绘制14次。任何三角形切片由在“必要的”距离r（外接圆的半径）处从“中心”到“14-gon上的顶点”的线限定。那么，给定14-gon上的顶点（r，0）哪里是下一个顶点（nx，ny）？

简单的数学：

use IO::Pipe;

my $p = IO::Pipe->new();
$p->reader("journalctl --follow"); #Waits for process to exit

while (<$p>) {
  print;
}

（我在这里使用first vertex = (x, y) = (r,0) next vertex = (nx,ny) = (r,0) rotated over (0,0) by (phi = tau/14) ，因为它是一个更方便的编程用常量。它简单地等于tau，因此代表整个圆，而不是半圆）< / p>

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

2*pi

好的，完成了。此nx = r * cos(phi) - 0 * sin(phi) = r * cos(phi) ny = r * sin(phi) + 0 * cos(phi) = r * sin(phi) 计算显然不是特定于nx,ny的数字，它是关于任意角度的，所以让我们编写解决方案并使其适用于任何 n边多边形：< / p>

14

现在我们可以通过将输入更改为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. } } 来自由更改多边形半径和边数。