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

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

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

25，10/14=25，十进制形式的5/7-5/7=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);
}

};

var r=0；
var draw=function（）{
翻译（200200）；
而（r<361）{
旋转（r）；
r=r+25.714285714；
生产线（200,0200200）；
}
};

在这里，我设置了一个变量，

r

r

将是

rotate（）

函数的变量。

while

循环将继续运行，直到

r

达到360度-这将允许

r

的角度增加25.714285714°，而

r<361

但不幸的是，这并没有发生
我在画布上看到的是从屏幕上弹出的线条。

（编辑）我添加了

translate（200200）就在
while（）
循环上方-这很有帮助，但行看起来仍然不像上面的图片。



这条线的第二点不是停留在中心；整条线都在移动。我只希望第一个（顶部）点根据给定的角度变化而移动。


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


另外，这是我对当前代码的结果-



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

话虽如此，如果你想在坐标旋转的基础上做这件事，看看你的14个角：它是14个重复的三角形，所以分析一个三角形并画14次。任何三角形切片都是由一条从“中心”到“14边形上的顶点”的线定义的，该线的（必要）距离为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
，它涉及任意角度，因此让我们对解决方案进行编码，使其适用于任何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.
  }
}

void setup（）{
尺寸（400400）；
noLoop（）；
}
作废提款（）{
背景（255）；
//偏移坐标系，使（0,0）成为草图中心
平移（宽度/2，高度/2）；
//然后画一个多边形。在这种情况下，半径宽度为/2，边数为14
图纸（宽度/2,14）；
}
无效图纸（浮子r、浮子n）{
//要绘制（r，0）-（x'，y'），我们需要x'和y'：
浮动φ=τ/n；
浮动nx=r*cos（φ）；
浮动ny=r*sin（φ）；
//然后我们只要画这条线，只要有边就画多少次
对于（int a=0；a您说您更改了代码。请编辑问题中的代码，以包含您正在运行的最新代码。您可能还希望发布一个图像，显示此代码生成的内容，以及您试图更改的图像的哪些部分。好的-谢谢，我将编辑此文章。详细解释（+1）