# Understanding rotate before translate

**URL:** <https://discourse.processing.org/t/understanding-rotate-before-translate/8631>\
**Category:** Beginners\
**Created:** [February 22, 2019, 2:05pm UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631 "2019-02-22T14:05:55Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![dougouverson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dougouverson/32/3814_2.png) [@dougouverson](https://discourse.processing.org/u/dougouverson)\
**Post date:** [February 22, 2019, 2:05pm UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631/1 "2019-02-22T14:05:55Z")

</div>

I’m on page 168 of “Getting Started with P5.js” and having a difficulty wrapping my head around the rotate() before translate() vs translate() before rotate():

When rotate() is before translate(), why does "The shape now rotates around the upper-left corner of the canvas”?

It seems to me that the behavior should be the same regardless of whether rotate() comes first or not.

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [February 22, 2019, 2:47pm UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631/2 "2019-02-22T14:47:20Z")

</div>

i think translate sets the origin of the rotation.

the upper-left corner is the origin of the canvas and without a translation transform the shape will rotate around that point. if you translate first to the centre of the shape that becomes the origin of the rotation instead. well that’s my understanding at least.

---

<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:** [February 23, 2019, 12:11am UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631/3 "2019-02-23T00:11:57Z")

</div>

Let me suggest also reading the 2D Transformations tutorial. It is for Processing, but the translate / rotate model is exactly the same.

[https://processing.org/tutorials/transform2d/](https://processing.org/tutorials/transform2d/)

Check out the section on rotation. It deals with this aspect of order: changing the origin of rotation, then rotating

![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8c00cebf116584f9e310a08e9998b843605decd1.png)

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [February 23, 2019, 9:38am UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631/4 "2019-02-23T09:38:36Z")

</div>

One thing I miss in the Processing APIs compared to eg. Java2D is a form of `rotate()` that also takes the centre point to rotate around. Basically the concatenation of translate, rotate, translate back.

---

<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:** [February 23, 2019, 9:42am UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631/5 "2019-02-23T09:42:03Z")

</div>

```
   pushMatrix();
    translate...
    rotate....
    //draw
   popMatrix();
```

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [February 23, 2019, 10:06am UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631/6 "2019-02-23T10:06:02Z")

</div>

Because 4 lines and using the matrix stack is better than one?! 😜

This is a really useful method [https://docs.oracle.com/javase/8/docs/api/java/awt/Graphics2D.html#rotate-double-double-double-](https://docs.oracle.com/javase/8/docs/api/java/awt/Graphics2D.html#rotate-double-double-double-)

---

<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:** [February 23, 2019, 5:41pm UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631/7 "2019-02-23T17:41:33Z")

</div>

I thought a rotate-around form of rotate had been proposed in the past as an addition to the API – but I’m not able to find it when searching issues [https://github.com/processing/processing/issues?utf8=✓&q=is%3Aissue+rotate](https://github.com/processing/processing/issues?utf8=%E2%9C%93&q=is%3Aissue+rotate)

In general, core devs are quite conservative about adding signatures due in part to maintenance headaches, but to me this does seem useful – in particular, conceptually useful for learners. The main downside from a project maintenance perspective might be that in addition to the reference, the major tutorials and examples don’t discuss it, so ideally they would also be updated.

```auto
void draw() {
  rotate(millis(), 50, 50);
  line(0, 0, 60, 0);
  rect(20, 20, 5, 5);
}
void rotate(float theta, float x, float y) {
  translate(x, y);
  rotate(theta);
  translate(-x, -y);
}

```

![RotateAround--screenshot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/72f86c252f74e8ca66d45f8e9036f841904d61b2.png)

example documentation from open-jdk: [https://github.com/openjdk-mirror/jdk7u-jdk/blob/master/src/share/classes/java/awt/Graphics2D.java#L1009](https://github.com/openjdk-mirror/jdk7u-jdk/blob/master/src/share/classes/java/awt/Graphics2D.java#L1009)

---

<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:** [February 23, 2019, 6:52pm UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631/8 "2019-02-23T18:52:01Z")

</div>

just out of curiosity:

do you mean that

```auto
  translate(x, y);
  rotate(theta);
  translate(-x, -y);

```

would be much faster than the usage of pushMatrix and popMatrix?

Because I have a menger sponger with 1000s of cubes…

thanks

Chrisir

---

<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:** [February 23, 2019, 6:56pm UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631/9 "2019-02-23T18:56:08Z")

</div>

@Chrisir – if you test your sponge with pushMatrix or with translate, which is faster? I’m curious. (Also, I wonder if it is the same for Java2D, P2D, P3D).

Pardon me, I mean test atomic calls. Clearly if you only push and pop once, then use local relative variables, that is faster. But 2000 translates is faster than 1000 pushes and 1000 pops – I think? The point being that the each form is “faster” depending on how you are using it in the larger code construct.

---

<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:** [February 24, 2019, 3:38pm UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631/10 "2019-02-24T15:38:23Z")

</div>

Thanks.

Hard to test, there’s a lot going on

---

<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:** [February 24, 2019, 5:25pm UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631/11 "2019-02-24T17:25:58Z")

</div>

> [@Chrisir](#):
>
> there’s a lot going on

Of course. Be well, take care of yourself.

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [February 24, 2019, 7:27pm UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631/12 "2019-02-24T19:27:34Z")

</div>

I thought it would clash with an existing P3D `rotate()` method but it seems not. Always thought it should be more like `rotateAt()` or `rotateAround()`. I have a few extra methods like that in PraxisLIVE (such as 7 parameter `image()`) but haven’t quite got around to this one yet.

Interestingly, there is a 4 parameter version of `rotate()` in Processing already though -

```auto
/**
   * Rotate around an arbitrary vector, similar to glRotate(), except that it
   * takes radians (instead of degrees).
   */

public void rotate(float angle, float v0, float v1, float v2)

```

---

<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:** [February 24, 2019, 7:33pm UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631/13 "2019-02-24T19:33:39Z")

</div>

Interesting – Where did you find that in the source? Is it unimplemented in JAVA2D? I tried it with a default sketch, and it did nothing.

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [February 24, 2019, 7:59pm UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631/14 "2019-02-24T19:59:06Z")

</div>

It’s in the PGraphics source code, although only implemented in PGraphicsOpenGL. I forgot this is in the p5js section. 😉

@Chrisir the reason translate _should_ be faster than the matrix stack is it only involves maths vs creating storage for the matrix values.

---

<div class="post-metadata">

**Author:** ![dougouverson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dougouverson/32/3814_2.png) [@dougouverson](https://discourse.processing.org/u/dougouverson)\
**Post date:** [February 24, 2019, 9:58pm UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631/15 "2019-02-24T21:58:32Z")

</div>

Thanks for sharing reference; this helps.