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

debugcn 发表于 Dev

卡洛斯·卡尔森（Carlos Carlsen）

我想用Processing.JS制作一个Tetradecagon，一个具有14个边的多边形。
（我想使Tetradecagon像下面的图片所示！）

使用我要复制的图像中给出的数字，我得出结论，每片（我不知道它的专有名称）的角度为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);
}

};

在这里，我设置了一个变量r。r将是该rotate()函数的变量。该while循环将继续下去，直到r达到360 -这将允许在变化r的角度，通过25.714285714增加°，而r < 361。
但是，可悲的是，这没有发生。
我在画布上看到的是从屏幕上拍摄的那条线。

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

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

我如何更改代码以实现自己的目标？
任何帮助将不胜感激-感谢您的时间！

PS这是我用当前代码的结果-

Mike'Pomax'Kamermans

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

话虽如此，如果您想基于坐标旋转来执行此操作，请看一下14边形：它是14个重复的三角形，因此分析一个三角形并将其绘制14次。任何三角形切片都由（必要的）距离r（外接圆的半径）处从“中心”到“ 14边形上的顶点”的线定义。因此，给定14-gon上的一个顶点（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计算显然不是特定于number的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.
  }
}

现在我们可以通过将输入更改为来自由更改多边形半径和边数drawNgon(..., ...)。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-19

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章