# Conceptual Clarity on frameCount and rotate function

**URL:** <https://discourse.processing.org/t/conceptual-clarity-on-framecount-and-rotate-function/22246>\
**Category:** Coding Questions\
**Created:** [June 29, 2020, 12:15pm UTC](https://discourse.processing.org/t/conceptual-clarity-on-framecount-and-rotate-function/22246 "2020-06-29T12:15:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![diomedeidae](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@diomedeidae](https://discourse.processing.org/u/diomedeidae)\
**Post date:** [June 29, 2020, 12:15pm UTC](https://discourse.processing.org/t/conceptual-clarity-on-framecount-and-rotate-function/22246/1 "2020-06-29T12:15:34Z")

</div>

I was doing one of the examples on the p5.js website - [https://p5js.org/examples/form-regular-polygon.html](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.

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

```

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

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 29, 2020, 1:00pm UTC](https://discourse.processing.org/t/conceptual-clarity-on-framecount-and-rotate-function/22246/2 "2020-06-29T13:00:37Z")

</div>

> [@diomedeidae](#):
>
> rotate(frameCount)

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.

> [@diomedeidae](#):
>
> can some one give the mathematical intuition on how we reached to this point.

```auto
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/](https://www.processing.org/tutorials/trig/)

Warmest regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 29, 2020, 1:03pm UTC](https://discourse.processing.org/t/conceptual-clarity-on-framecount-and-rotate-function/22246/3 "2020-06-29T13:03:17Z")

</div>

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

Chrisir

---

<div class="post-metadata">

**Author:** ![janmaltel](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@janmaltel](https://discourse.processing.org/u/janmaltel)\
**Post date:** [June 29, 2020, 2:00pm UTC](https://discourse.processing.org/t/conceptual-clarity-on-framecount-and-rotate-function/22246/4 "2020-06-29T14:00:44Z")

</div>

> 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](https://editor.p5js.org/janmaltel/sketches/q-SQtFfzn) sketch, you can see three triangles that are all rotating. You can change the [`frameRate`](https://p5js.org/reference/#/p5/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()](https://p5js.org/reference/#/p5/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. 🙂