# Rotating circle in 2D

**URL:** <https://discourse.processing.org/t/rotating-circle-in-2d/36538>\
**Category:** Coding Questions\
**Created:** [April 23, 2022, 7:07am UTC](https://discourse.processing.org/t/rotating-circle-in-2d/36538 "2022-04-23T07:07:43Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Heavy](https://avatars.discourse-cdn.com/v4/letter/h/22d042/32.png) [@Heavy](https://discourse.processing.org/u/Heavy)\
**Post date:** [April 23, 2022, 7:07am UTC](https://discourse.processing.org/t/rotating-circle-in-2d/36538/1 "2022-04-23T07:07:43Z")

</div>

Hello everyone, I am trying to make an algorithm that allows to simulate the rotating movement of a coin.  
The origin point to draw the coin must coincide with the center of the canvas (I must use the variables of the  
width and height system to calculate the center).  
I clarify that the currency remains fixed in its initial position.  
The rotary motion of the coin is around the y-axis.  
The color of the coin varies with each movement simulation.  
I must declare and initialize the necessary variables so that the algorithm is expressed based on those variables.  
I must make use of ellipse(), fill(), random(), background() primitives.  
Now, I don’t know how I should use random() and make the coin change color with each movement, can you help me please? thanks in advance!

\<  
void setup() {  
size(200, 200);  
}  
void draw() {  
fill(0,0,255);  
background(0);  
ellipse (100,100,50,100);  
}  
/\>

---

<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:** [April 23, 2022, 9:35am UTC](https://discourse.processing.org/t/rotating-circle-in-2d/36538/2 "2022-04-23T09:35:28Z")

</div>

Is this supposed to be in 2D or 3D ?

Because to see a rotation of a circle it needs a motif (eg. a Triangel) on it so you can see the Rotation

See [Reference / Processing.org](https://processing.org/reference/rotate_.html) (help about the rotating)

---

<div class="post-metadata">

**Author:** ![Heavy](https://avatars.discourse-cdn.com/v4/letter/h/22d042/32.png) [@Heavy](https://discourse.processing.org/u/Heavy)\
**Post date:** [April 23, 2022, 12:46pm UTC](https://discourse.processing.org/t/rotating-circle-in-2d/36538/3 "2022-04-23T12:46:31Z")

</div>

Of course in 2D my dear

---

<div class="post-metadata">

**Author:** ![Divitiacus](https://avatars.discourse-cdn.com/v4/letter/d/848f3c/32.png) [@Divitiacus](https://discourse.processing.org/u/Divitiacus)\
**Post date:** [April 23, 2022, 1:10pm UTC](https://discourse.processing.org/t/rotating-circle-in-2d/36538/4 "2022-04-23T13:10:33Z")

</div>

Maybe I am wrong but in 2D you can only rotate around a point.  
To rotate around an axis you always need 3D.

To simulate a 3D rotation in 2D you could draw an ellipse, which gets narrower in one direction (in your case x) and then expands again to a sphere.

---

<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:** [April 23, 2022, 1:24pm UTC](https://discourse.processing.org/t/rotating-circle-in-2d/36538/5 "2022-04-23T13:24:19Z")

</div>

In the link I posted there is an example

use rotate since rotateX, rotateY and rotateZ only work in 3D

---

<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:** [April 23, 2022, 1:26pm UTC](https://discourse.processing.org/t/rotating-circle-in-2d/36538/6 "2022-04-23T13:26:05Z")

</div>

> [@Heavy](#):
>
> The rotary motion of the coin is around the y-axis.

In 2D it’s always around y-axis

This would be easier in 3D

---

<div class="post-metadata">

**Author:** ![Divitiacus](https://avatars.discourse-cdn.com/v4/letter/d/848f3c/32.png) [@Divitiacus](https://discourse.processing.org/u/Divitiacus)\
**Post date:** [April 23, 2022, 1:31pm UTC](https://discourse.processing.org/t/rotating-circle-in-2d/36538/7 "2022-04-23T13:31:24Z")

</div>

> In 2D it’s always around y-axis

Reference:

> Objects are always rotated around their relative position to the origin.

Rotate in 2D rotates around a point, the origin. You cannot rotate around an axis in 2D.

You don’t need 3D to create the effect, as I described above.

---

<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:** [April 23, 2022, 5:08pm UTC](https://discourse.processing.org/t/rotating-circle-in-2d/36538/8 "2022-04-23T17:08:28Z")

</div>

I meant in 2D you rotate always around Z axis

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 23, 2022, 6:24pm UTC](https://discourse.processing.org/t/rotating-circle-in-2d/36538/9 "2022-04-23T18:24:19Z")

</div>

> [@Heavy](#):
>
> ellipse (100,100,50,100);

To rotate about the Y axis you simply use a variable for the third parameter - the width of the eclipse like this

`ellipse (100, 100, w, 100);`

and then gradually change `w` from 100 to 0 followed by 0 to 100 then repeat forever. 🙂

Use a variable `dw` for the change in width for each frame. You would need to change the sign of `dw` depending on whether the coin is getting smaller or bigger.

That should be enough to get you started on your homework. Try it and post your result here.

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [April 23, 2022, 8:05pm UTC](https://discourse.processing.org/t/rotating-circle-in-2d/36538/10 "2022-04-23T20:05:49Z")

</div>

And to make it look correct, the width `w` should be `abs( 100*cos(angle) )` where `angle` is a function of time, so something like `angle = TAU * frameCount / 120.0;` which at 60 fps would take 2 seconds to make a complete turn around. You can then use the value of `w` to vary the fill color of the coin as well.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [April 23, 2022, 8:55pm UTC](https://discourse.processing.org/t/rotating-circle-in-2d/36538/11 "2022-04-23T20:55:50Z")

</div>

That math looks good, @scudly.

For the best effect, the fill should probably be lightest in color when the ellipse is widest, and darkest in color when the ellipse is narrowest. Using the same variables and calculations as above, the fill could then be:

```auto
  fill(w / 100 * 255);

```