Conceptual Clarity on frameCount and rotate function

p5.js Coding Questions
1

I was doing one of the examples on the p5.js website - https://p5js.org/examples/form-regular-polygon.html. I got really confused by the way rotate function worked in that code . IN the below function if I just pass rotate(frameCount) , in the browser it shows me rotating two triangles intersected within forming a star , but as soon as I divide the frameCount it disappears. Also the equation used in the code - can some one give the mathematical intuition on how we reached to this point.

let sx = x + cos(a) * radius;
let sy = y + sin(a) * radius;

        push();
	translate(width * 0.2, height * 0.5);
	rotate(frameCount / 50);
	polygon(0,0,82,3);
	pop();
2

Remember that the Matrix (the thing that stores translate and rotate) is reset at the start of draw (which runs 60 times per second).

rotate(frameCount/20.0) just rotates the following shape.

Since frameCount is incremented by 1 every time draw runs, the angle gets bigger every time. The part / 20.0 would slow this down.

let sx = x + cos(a) * radius;
let sy = y + sin(a) * radius;

Basically, x and y are the enter of the shape and radius is its radius.

a is the angle and because of how cos and sin work, they give you a position on the circle. Since the step for the angle is very big, we don’t get a circle but a triangle etc.

There is a good tutorial here:

https://www.processing.org/tutorials/trig/

Warmest regards,

Chrisir

1 Like
3

And welcome to the forum, great to have you here!

Chrisir

4

if I just pass rotate(frameCount) , in the browser it shows me rotating two triangles intersected within forming a star ,

The star is just an optical illusion!

You can maybe get additional intuition if you try out (and play with) some extreme cases. In this sketch, you can see three triangles that are all rotating. You can change the frameRate in this sketch by moving the mouse along the x-axis. You will see that the optical illusion disappears for slow frameRates!

The left-hand side traingle uses
rotate(frameCount * TWO_PI);. Yet TWO_PI radians are equivalent to 360 degrees (see also the documentation on angleMode()). And so the “rotation” doesn’t really change the triangle’s position.

The center triangle uses rotate(frameCount * PI);. PI (radians) are equivalent to 180 degrees. The triangle thus alternates between two positions only! If the frameRate is high, it looks like both positions overlap and the star you were talking about arises. :slight_smile:

Finally, the right-hand side triangle uses rotate(frameCount * PI * 1.001);. That is, every rotation is something like 181 degrees or so resulting in the slowly rotating star.

Also, @diomedeidae please say when you’re cross-posting the question on stackoverflow so that people looking for an answer or considering to write an answer see the post on the other platform as well. :slight_smile:

3 Likes