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;
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.
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.