Rotating circle in 2D

Processing Coding Questions
1

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);
}
/>

2

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 (help about the rotating)

1 Like
3

Of course in 2D my dear

1 Like
4

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.

1 Like
5

In the link I posted there is an example

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

6

In 2D it’s always around y-axis

This would be easier in 3D

7

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.

1 Like
8

I meant in 2D you rotate always around Z axis

1 Like
9

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. :slightly_smiling_face:

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.

2 Likes
10

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.

2 Likes
11

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:

  fill(w / 100 * 255);
1 Like