# Rotating an ellipse

**URL:** <https://discourse.processing.org/t/rotating-an-ellipse/13927>\
**Category:** Coding Questions\
**Created:** [September 11, 2019, 12:03pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927 "2019-09-11T12:03:07Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Katerina\_P](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@Katerina\_P](https://discourse.processing.org/u/Katerina_P)\
**Post date:** [September 11, 2019, 12:03pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/1 "2019-09-11T12:03:07Z")

</div>

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:

```auto
 fill(#EBF233);
  ellipse(700, 75, 75, 75);

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 11, 2019, 12:13pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/2 "2019-09-11T12:13:00Z")

</div>

> [@Katerina\_P](#):
>
> spin around on its axis

?? not understand, do you mean like this:

```auto
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

---

<div class="post-metadata">

**Author:** ![Katerina\_P](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@Katerina\_P](https://discourse.processing.org/u/Katerina_P)\
**Post date:** [September 11, 2019, 12:20pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/3 "2019-09-11T12:20:39Z")

</div>

Yes like that! but when I apply it to my whole code, another section starts roaring.  
for example this is my code:

````auto
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);

} ```
````

---

<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:** [September 11, 2019, 12:25pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/4 "2019-09-11T12:25:25Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Katerina\_P](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@Katerina\_P](https://discourse.processing.org/u/Katerina_P)\
**Post date:** [September 11, 2019, 12:35pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/5 "2019-09-11T12:35:37Z")

</div>

Rotate about their own centres!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 11, 2019, 12:42pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/6 "2019-09-11T12:42:47Z")

</div>

or

```auto
// 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!

---

<div class="post-metadata">

**Author:** ![Katerina\_P](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@Katerina\_P](https://discourse.processing.org/u/Katerina_P)\
**Post date:** [September 11, 2019, 12:47pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/7 "2019-09-11T12:47:30Z")

</div>

How do i get it behind the clouds?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 11, 2019, 12:48pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/8 "2019-09-11T12:48:58Z")

</div>

try to draw the sun first?

---

<div class="post-metadata">

**Author:** ![Katerina\_P](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@Katerina\_P](https://discourse.processing.org/u/Katerina_P)\
**Post date:** [September 11, 2019, 12:49pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/9 "2019-09-11T12:49:49Z")

</div>

Is there a way to make it spin in one location rather than across the whole screen?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 11, 2019, 12:55pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/10 "2019-09-11T12:55:37Z")

</div>

now the SUN rotation center point is:

```auto
width/2, height+50

```

and the radius is:

```auto
height, 75

```

try to change…  
but sure must change the angle range  
4 … 5.5  
too

---

<div class="post-metadata">

**Author:** ![Katerina\_P](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@Katerina\_P](https://discourse.processing.org/u/Katerina_P)\
**Post date:** [September 11, 2019, 12:58pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/11 "2019-09-11T12:58:11Z")

</div>

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](https://processing.org/examples/rotate.html)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 11, 2019, 1:01pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/12 "2019-09-11T13:01:31Z")

</div>

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](https://www.openprocessing.org/sketch/743146)

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [September 11, 2019, 1:04pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/13 "2019-09-11T13:04:27Z")

</div>

Well, I’m not sure about what you want, but if you want to rotate on it own center, just:

```auto
a++;
push();
translate(centerX,centerY);
rotate(radians(a));
ellipse(0,0,200,200);
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:** [September 11, 2019, 1:37pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/14 "2019-09-11T13:37:00Z")

</div>

There are some nice tutorials covering things like rotation

See section tutorials on the website

---

<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:** [September 11, 2019, 2:34pm UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/15 "2019-09-11T14:34:05Z")

</div>

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

```auto
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();
}

```

---

<div class="post-metadata">

**Author:** ![gpteacher](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gpteacher/32/182_2.png) [@gpteacher](https://discourse.processing.org/u/gpteacher)\
**Post date:** [September 18, 2019, 3:12am UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/16 "2019-09-18T03:12:42Z")

</div>

Basic order is

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

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [September 18, 2019, 6:56am UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/17 "2019-09-18T06:56:26Z")

</div>

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 😃

---

<div class="post-metadata">

**Author:** ![gpteacher](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gpteacher/32/182_2.png) [@gpteacher](https://discourse.processing.org/u/gpteacher)\
**Post date:** [September 18, 2019, 10:41am UTC](https://discourse.processing.org/t/rotating-an-ellipse/13927/18 "2019-09-18T10:41:25Z")

</div>

Good to know. I’ll give it a try!