# Sequence of rotation

**URL:** https://discourse.processing.org/t/sequence-of-rotation/3184
**Category:** Coding Questions
**Created:** [September 2, 2018, 2:41am UTC](https://discourse.processing.org/t/sequence-of-rotation/3184 "2018-09-02T02:41:46Z")
**Posts on this page:** 8
**Page:** 1

<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 2, 2018, 2:41am UTC](https://discourse.processing.org/t/sequence-of-rotation/3184/1 "2018-09-02T02:41:46Z")

</div>

does the sequence in what i use rotation matter?  
like by

```auto
rotateZ(radians(alphaZ));
rotateY(radians(alphaY));
rotateX(radians(alphaX));
show_object();
rotateX(radians(-alphaX));
rotateY(radians(-alphaY));
rotateZ(radians(-alphaZ));

```

---

<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 2, 2018, 7:50am UTC](https://discourse.processing.org/t/sequence-of-rotation/3184/3 "2018-09-02T07:50:45Z")

</div>

from the “UNSANE” confused user:

- OhKay, thank you very much for confirm,  
even i try already i was not sure if i ended up at the same point.

- but all this is already inside a push - pop matrix loop  
could this be ?stacked?

- ? angle understanding? as in processing

- 
  - the x axis goes right,

- 
  - the “y” axis goes down

- 
  - ? the z axis goes into the screen ?

- does this have consequences for the used angles in the rotation?  
i got already that rotateZ means ( in my bad english ) :  
" rotate X Y plane to the RIGHT ( clockwise ) and not change Z "  
so i used minus angles to go counter clock wise.  
i try to draw it ( and even write some info text to the screen ) still this gives me headake,  
could you take a look? [here](http://kll.engineering-news.org/kllfusion01/downloads/ellipsis_rotation.zip)

---

<div class="post-metadata">

### Author: ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)
#### Post date: [September 2, 2018, 1:45pm UTC](https://discourse.processing.org/t/sequence-of-rotation/3184/4 "2018-09-02T13:45:40Z")

</div>

Yes, you can stack pus/pop calls. Check this [transformation tutorial](https://processing.org/tutorials/transform2d/)

You don’t have to undo the operations, just pop the transformation stack.

Kf

---

<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 3, 2018, 4:02am UTC](https://discourse.processing.org/t/sequence-of-rotation/3184/5 "2018-09-03T04:02:06Z")

</div>

thanks to @TfGuy44 and @kfrajer  
i now use push rotate(-a) pop  
and also understand the rotate little bit better,  
sadly my poor knowledge about astronomy seems to be my problem, not the processing part.  
( a elliptic orbit ( not the planets position on the orbit ) around the SUN  
should be defined by the elliptic parameters “semi-major-axis” and “eccentricity”  
and a 3 angle info about the orientation of the ellipsis ( i could use to do rotate X Y Z the ellipsis prior to find the planet position on that orbit )  
but the WIKI planets info and the default picture [there](https://en.wikipedia.org/wiki/Orbital_elements#/media/File:Orbit1.svg) does not help me much, after rotateZ( Longitude of ascending node) and rotateY( Inclination) for all planets  
a ( final ) rotateX (Argument of perihelion)  
looks just wrong)

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [September 3, 2018, 7:04pm UTC](https://discourse.processing.org/t/sequence-of-rotation/3184/6 "2018-09-03T19:04:36Z")

</div>

> [@kll](#):
>
> does the sequence in what i use rotation matter?

~~It does _if_ you are **not** using translations between the rotations. If not, no. You can try this out with a physical object in your hand to confirm – rotate a stick of butter 90 x, then 90 y, or 90 y then 90 x, and it ends up in the same orientation. If you translate, however,~~

**(See expanded examples below) IN GENERAL** everything is order-dependent.

> [@kll](#):
>
> but all this is already inside a push - pop matrix loop  
> could this be ?stacked?

You may want to make sure that you have completely worked out the 2D case, then add another dimension of rotation to tilt the axes.

For example, here is a very very simple toy model which uses pushes and pops, implemented in the 2D case.

```auto
float spin;

void setup() {
  size(400, 400);
  rectMode(CENTER);
  ellipseMode(CENTER);
}
void draw() {
  background(0);
  spin = (spin + 0.012);

  translate(width/2, height/2);

  // planet
  translate(0, 0);
  rotate(spin);
  rect(0, 0, 50, 50);

  // moon A
  pushMatrix();
    rotate(spin + PI/3);
    translate(100, 0);
    rect(0, 0, 25, 25);

    // moon A sattelite 1
    pushMatrix();
      rotate(spin/2 + PI);
      translate(40, 0);
      rect(0, 0, 12, 12);
    popMatrix();

    // moon A sattelite 2
    pushMatrix();
      rotate(spin + PI/3);
      translate(50, 0);
      rect(0, 0, 10, 10);
    popMatrix();
  
  popMatrix();

  // moon B
  pushMatrix();
    rotate(spin/2 + PI/5);
    translate(140, 0);
    rect(0, 0, 20, 20);
  popMatrix();

}

```

![08%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2cfc42ee38ec48c5723c96cc9332060052ccb6fe.jpeg)

Notice how each starting angle for a child is relative, rather than absolute.

If you want to get into more detail about debugging your code, you may want to share example code here and describe how specifically you can tell it “looks wrong”, and what part of the code you think is doing that.

---

<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 4, 2018, 1:53am UTC](https://discourse.processing.org/t/sequence-of-rotation/3184/7 "2018-09-04T01:53:32Z")

</div>

thanks @jeremydouglass,

- now understand that **rotateX rotateY rotateZ** ( without translate … inbetween ) should work in any sequence

- also that i must use  
**push rotate draw pop**  
instead  
rotate(-x) draw rotate(+x)

- thanks for the example, nice

- code, i have my project what is about to test processing 3D view: [code](http://kll.engineering-news.org/kllfusion01/downloads.php?cat_id=4&download_id=48) and [BLOG](http://kll.engineering-news.org/kllfusion01/articles.php?article_id=154)  
where the SOLARsystem is just one TAB of, for that i have a add [BLOG](http://kll.engineering-news.org/kllfusion01/articles.php?article_id=155) and 2 add test codes  
[Kepler orbit](http://kll.engineering-news.org/kllfusion01/downloads/ellipsis_v63.zip) and [ellipsis\_rotation](http://kll.engineering-news.org/kllfusion01/downloads/ellipsis_rotation.zip)

- what looks wrong is if i enable  
rotateX ( file:sketch\_3D\_view\_v153 / TAB SOL / line 384 )  
the planets not form a dish anymore,  
as i say i must missunderstand the WIKI planet ellipsis angles somehow.  
add i might have mistake in x or -x ( or rotate(PI)) if the angle definitions are for Perhelion while my x axis is the for the LONG one Aphelion / this i can not see in the WIKI picture about the angles.  
(NOTE this is all about the ellipsis position, NOT about the planet position on the ellipsis, that part (Kepler) works already )

---

<div class="post-metadata">

### Author: ![Joda5](https://avatars.discourse-cdn.com/v4/letter/j/6a8cbe/32.png) [@Joda5](https://discourse.processing.org/u/Joda5)
#### Post date: [May 19, 2019, 3:12pm UTC](https://discourse.processing.org/t/sequence-of-rotation/3184/8 "2019-05-19T15:12:20Z")

</div>

It seems incorrect that translations are independent. Consider the following example that generates different outcomes depending on the rotation order:

```auto
void setup() {
  //pixelDensity(2);
  size(400, 400, P3D);
  rectMode(CENTER);
  background(90);
}

void draw() {
  translate(width/2, height/2);

  // XY order
  pushMatrix();
  fill(255,0,0);
  rotateX(90);
  rotateY(90);
  //rect(0, 0, 100, 100);
  //noFill();
  box(50, 150, 100);
  popMatrix();
  
  // YX order
  pushMatrix();
  fill(0,255,0);
  rotateY(90);
  rotateX(90);
  //rect(0, 0, 100, 100);
  //noFill();
  box(50, 150, 100);
  popMatrix();
}

```

The result is visible in the following image:

 ![28](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2ff2d33d1099f4017e258907d9d26d3203617408.jpeg)

Hence I believe the reply above by @jeremydouglass and @TfGuy44 to be incorrect. Please correct me if I misunderstood.

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [May 19, 2019, 4:59pm UTC](https://discourse.processing.org/t/sequence-of-rotation/3184/9 "2019-05-19T16:59:44Z")

</div>

You are right – my first paragraph in my answer above is not correct. Apologies – I must blame sleep deprivation or perhaps just foolishness. I’m striking through that paragraph to avoid confusing others.

The key thing is that all matrix operations are always relative, not absolute – they rotate, translate, or scale etc _relative_ to the previous state, not relative to the original frame of reference. For this reason, the only operations that can be moved around in sequence are ones which are commutative. For example, rotation is commutative in 2D and generally not in 3D:

> **[Rotation (mathematics)](https://en.wikipedia.org/wiki/Rotation_(mathematics))**
>
> Rotation in mathematics is a concept originating in geometry. Any rotation is a motion of a certain space that preserves at least one point. It can describe, for example, the motion of a rigid body around a fixed point. A rotation is different from other types of motions: translations, which have no fixed points, and (hyperplane) reflections, each of them having an entire (n − 1)-dimensional flat of fixed points in a n-dimensional space. A clockwise rotation is a negative magnitude so a countercl...

Still, certain sets of operations are order invariant. Here are some examples:

## order-independent (commutative)

```auto
// 2D translations
translate(x, y);
translate(x2, y2);

```

```auto
// 2D rotation
rotate(r);
rotate(r2);

```

```auto
// 3D translations
translate(x, y, z);
translate(x2, y2, z3);

```

However, most are not.

## order-dependent (not commutative) examples

In general, mixing different operations from `scale` `rotate` or `translate` is almost always order-dependent – unless one of the operation has no effect such as `scale(1)` or `rotate(TWO_PI)`. Also, 3D rotation is order-dependent.

```auto
// mixed translation and rotation
translate(x, y)
rotate(r);
// ...does not equal:
// rotate(r);
// translate(x, y)

```

```auto
// 3D mixed translation and rotation
rotateX(r);
translate(x, y, z)
// does not equal:
// translate(x, y, z)
// rotateX(r);

```

```auto
// 3D rotation
rotateX(r);
rotateY(r1);
rotateZ(r2);
// ...does not equal:
// rotateZ(r2);
// rotateY(r1);
// rotateX(r);

```
