Hi guys, I’m trying to get my ellipse to spin around on its axis but it doesn’t seem to be working. this is the section of the code that i want to rotate:
fill(#EBF233);
ellipse(700, 75, 75, 75);
?? not understand, do you mean like this:
float ang = 0;
void setup() {
size(300,300);
fill(0, 200, 200);
stroke(200,0,0);
}
void draw() {
background(200, 200, 0);
translate(width/2,height/2);
rotate(ang);
ang +=0.01;
line(0,0,70,75);
ellipse(70, 75, 75, 75);
}
as your ellipse is a circle and a rotation might not be visible
Yes like that! but when I apply it to my whole code, another section starts roaring.
for example this is my code:
void setup() {
size(800, 800);
}
void draw () {
background(255);
fill(#1E4609);
rect (0, 500, 800, 600);
fill (#6F4C19);
triangle (100,400, 225, 320, 350, 400);
fill (#E6F2E8);
ellipse (100, 100, 100, 50);
ellipse (100,150, 100, 60);
ellipse (300, 150, 100, 60);
ellipse (300, 100, 100, 50);
ellipse (500, 150, 100, 60);
ellipse (500, 100, 100, 50);
// I want the circle below to rotate, and when i applied the code the house started moving
translate(width/2,height/2);
rotate(ang);
ang +=0.01;
fill(#EBF233);
line(0,0,70,75);
ellipse(700, 75, 75, 75);
fill(#B77512);
rect (98, 388, 250, 125);
fill (#DBBB8B);
rect (260, 420, 50, 50);
rect (131, 420, 50, 50);
fill (#76592D);
rect (205, 452, 30,60);
} ```Do you want the ellipses to rotate about their own centres (so thay stay in the same position on the screen) or rotate about the centre of the display like clock hands? Or both together?
Rotate about their own centres!
or
// at end of draw try
mySun_move();
}
float ang = 4.0;
void mySun_move() { // I want the circle below to rotate
push();
translate(width/2, height+50);
rotate(ang);
ang +=0.005;
if ( ang > 5.5 ) ang = 4.0;
println(ang);
fill(#EBF233);
//line(0, 0,height, 75);
ellipse(height, 75, 75, 75);
pop();
}
but big problem, it is NOT behind the clouds!
How do i get it behind the clouds?
try to draw the sun first?
Is there a way to make it spin in one location rather than across the whole screen?
now the SUN rotation center point is:
width/2, height+50
and the radius is:
height, 75
try to change…
but sure must change the angle range
4 … 5.5
too
Ive changed them around, but they still make the sun go across the screen. i want it to stay in one spot, is that possible?
Like this square:
https://processing.org/examples/rotate.html
try, you have the example,
sorry i not get it, not understand what use that would be for a circle?
and for the movement of the sun ? over the day?
but a kind of ?symbolic? movement could also be to move sun up and down,
and with it change color yellow red??
i used it https://www.openprocessing.org/sketch/743146
Well, I’m not sure about what you want, but if you want to rotate on it own center, just:
a++;
push();
translate(centerX,centerY);
rotate(radians(a));
ellipse(0,0,200,200);
pop();
1 Like
There are some nice tutorials covering things like rotation
See section tutorials on the website
The trick is to isolate translations and rotations so that you can animate your ellipses in different ways. This sketch shows how to do this
float angle0, angle1, angle2, angle3;
void setup() {
size(640, 640);
}
void draw () {
background(255);
// Use the centre of the screen as the origin [0,0]
translate(width/2, height/2);
strokeWeight(2);
stationary();
rotateAboutScreenCenter();
rotateAboutEllipseCenter();
rotateAboutEllipseAndScreenCenter();
// ========================================================
// Change the angle for the next frame
angle0 += 0.01;
angle1 -= 0.127;
angle2 -= 0.02109;
angle3 += 0.122345;
}
void stationary() {
// ========================================================
// The blue ellipses are fixed
pushMatrix();
stroke(0, 0, 128, 128);
fill(0, 0, 255, 128);
ellipse (-200, -240, 80, 50);
ellipse (127, 10, 90, 30);
ellipse (30, -40, 46, 100);
popMatrix();
}
void rotateAboutScreenCenter() {
// ========================================================
// The green ellipses rotate about the screen centre
pushMatrix();
stroke(0, 128, 0, 128);
fill(0, 255, 0, 128);
rotate(angle0);
ellipse (100, 150, 90, 60);
ellipse (220, -190, 110, 30);
ellipse (-200, 100, 45, 100);
popMatrix();
}
void rotateAboutEllipseCenter() {
// ========================================================
// The red ellipses rotate about their centres
pushMatrix();
stroke(128, 0, 0, 128);
fill(255, 0, 0, 128);
// ellipse 1
pushMatrix();
translate(-100, 150);
rotate(angle1);
ellipse (0, 0, 105, 60);
popMatrix();
// ellipse 2
pushMatrix();
translate(-100, -35);
rotate(angle1);
ellipse (0, 0, 245, 45);
popMatrix();
// ellipse 3
pushMatrix();
translate(90, 67);
rotate(angle1);
ellipse (0, 0, 110, 75);
popMatrix();
popMatrix();
}
void rotateAboutEllipseAndScreenCenter() {
// ========================================================
// The cyan ellipses rotate about their centres and
// about the screen centre.
pushMatrix();
stroke(0, 128, 128, 128);
fill(0, 255, 255, 128);
rotate(angle2);
// ellipse 1
pushMatrix();
translate(-100, 150);
rotate(angle3);
ellipse (0, 0, 105, 60);
popMatrix();
// ellipse 2
pushMatrix();
translate(-200, -95);
rotate(angle3);
ellipse (0, 0, 245, 117);
popMatrix();
// ellipse 3
pushMatrix();
translate(90, 67);
rotate(angle3);
ellipse (0, 0, 190, 95);
popMatrix();
popMatrix();
}
1 Like
Basic order is
- Translate to new origin where you want the centre of the ellipse to be
2 rotate
3 draw ellipse with centre 0,0
4 unrotate
5 untranslate
Draw other objects with reference to original origin
Then repeat as needed
I recommend to use pushMatrix(); and popMatrix(); instead of unrotate, untraslate, I did that in the past, but is more comfortable to use the push and pop 
1 Like
Good to know. I’ll give it a try!
1 Like