What is the math behind creation of a star in p5js

The author is drawing lines. To do so, they need 2 points.

To get the coordinates of these points, they “imagine” 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:

Imaginary circle

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

Radians

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 they need to draw the star:

Trigonometry!

That’s the idea. Have fun!

Leave a Comment