在 p5js 中创建明星背后的数学是什么 [英] What is the math behind creation of a star in p5js

问题描述

我正在做来自网站 p5js.org 的示例代码之一 -

现在，一个圆是 360 度，或者，以弧度表示，2 * PI.像这样:

注意:零弧度在右边.如果你逆时针阅读，当你在顶部"时你会得到 1/2 PI圆圈的一部分，1 * PI 当你在左边时，1,5 * PI 在底部，2 * PI 一旦回到右侧.

通过将圆除以星星的点数，作者现在可以使用三角函数来获得绘制星星所需的坐标:

就是这个想法.玩得开心！

I was doing one of the examples code from the website p5js.org - https://p5js.org/examples/form-star.html. I understood all the code except the below lines.

function star(x, y, radius1, radius2, npoints) {
  let angle = TWO_PI / npoints;
  let halfAngle = angle / 2.0;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

What is the concept of taking two angles . I understand that this is using polar coordinates to cartesian coordinates mapping. But I am not able to visualize this in head that how this computation works. How the author come up with this logic in the code ?

解决方案

The author is drawing lines. To do so, he needs 2 points.

To get the coordinates of these points, he "imagines" a circle because if the star is regular, every point should be at the same distance from the middle (hence drawing an imaginary circle around the middle point of the star). Like this:

Now, a circle is 360 degrees, or, in radians, 2 * PI. Like this:

Note that: zero radians is on the right. If you read counter clockwise, you get to 1/2 PI when you're on "top" of the circle, 1 * PI when you're on the left, 1,5 * PI on the bottom and 2 * PI once back on the right side.

By dividing the circle by the amount of points the star has, the author can now use trigonometry to get the coordinates he needs to draw the star:

That's the idea. Have fun!

这篇关于在 p5js 中创建明星背后的数学是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！