关于p5.js中frameCount与rotate函数的概念澄清及技术问询

Hey there, let's break down your questions step by step—this is a common point of confusion when getting started with p5.js rotations and coordinate math!

Understanding the rotate() Behavior #

First, let's clarify a key detail: p5.js's rotate() function uses radians, not degrees, for its angle parameter. frameCount counts how many frames have been drawn since the sketch started, and by default, p5.js runs at ~60 frames per second. Here's why you're seeing those different results:

• When using rotate(frameCount):
  Every frame, you're rotating the coordinate system by frameCount radians. That means the rotation speed is ~60 radians per second, which translates to roughly 9.5 full rotations (360°) per second. At this speed, the human eye's persistence of vision makes the rapidly spinning triangle look like two overlapping triangles forming a star—this is just a visual illusion from the triangle's position changing too fast to track individually.

• When using rotate(frameCount / 50):
  Now the rotation speed drops to ~1.2 radians per second (about 68.8° per second). The triangle is still rotating, but much more slowly. It's not "disappearing"—it's just moving so gradually that you might not notice it at first. Try staring at the left half of your canvas (where translate(width * 0.2, height * 0.5) places the shape) and you'll see it turn slowly. If you divided by an even larger number (like 1000), the rotation would be nearly imperceptible, making the triangle look stationary.

Also, remember that push() and pop() isolate this rotation to just the polygon—so each frame starts fresh with the translated coordinate system, then applies the current rotation angle before drawing the shape.

Math Behind the Vertex Coordinate Calculation #

The lines let sx = x + cos(a) * radius; let sy = y + sin(a) * radius; are converting polar coordinates to Cartesian coordinates (the x/y system p5.js uses for drawing):

1. Polar vs. Cartesian:

   • We want to draw a regular polygon centered at (x, y), where every vertex is radius pixels away from the center.
   • In polar coordinates, each vertex is defined by two values: the distance from the center (radius) and the angle from the positive x-axis (a, in radians).

2. Breaking down the conversion:

   • cos(a) * radius: The cosine of angle a gives the ratio of the adjacent side (horizontal distance from center) to the hypotenuse (radius). Multiplying by radius gives the exact horizontal offset from the center (x, y).
   • sin(a) * radius: The sine of angle a gives the ratio of the opposite side (vertical distance from center) to the hypotenuse. Multiplying by radius gives the exact vertical offset from the center.

3. Putting it all together:
   Adding these offsets to the center coordinates (x, y) gives the absolute position (sx, sy) of each vertex on the canvas. The polygon function loops from a = 0 to a = TWO_PI (full 360°), incrementing a by TWO_PI / sides each time—this ensures each vertex is evenly spaced around the center, creating a regular polygon.

内容的提问来源于stack exchange，提问作者isilia