# How do you rotate an image without the image being moved?

**URL:** <https://discourse.processing.org/t/how-do-you-rotate-an-image-without-the-image-being-moved/6579>\
**Category:** Project Guidance\
**Created:** [December 13, 2018, 8:12pm UTC](https://discourse.processing.org/t/how-do-you-rotate-an-image-without-the-image-being-moved/6579 "2018-12-13T20:12:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dmolken](https://avatars.discourse-cdn.com/v4/letter/d/9dc877/32.png) [@dmolken](https://discourse.processing.org/u/dmolken)\
**Post date:** [December 13, 2018, 8:12pm UTC](https://discourse.processing.org/t/how-do-you-rotate-an-image-without-the-image-being-moved/6579/1 "2018-12-13T20:12:11Z")

</div>

Like when you rotate an image in Mircosoft Word, how do you rotate an image without the image being moved?

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [December 13, 2018, 9:05pm UTC](https://discourse.processing.org/t/how-do-you-rotate-an-image-without-the-image-being-moved/6579/2 "2018-12-13T21:05:04Z")

</div>

Hi,

I’m not sure I understand exactly what you mean but I think you want to rotate the image from it’s center.

The `rotate()` function is rotating from the origin so if you want to rotate in the middle, you first need to translate the image so that the center of the image correspond to the origin point. Then you can apply your rotation and then you can translate it back by applying the opposite translation that you did in the first place.

---

<div class="post-metadata">

**Author:** ![dmolken](https://avatars.discourse-cdn.com/v4/letter/d/9dc877/32.png) [@dmolken](https://discourse.processing.org/u/dmolken)\
**Post date:** [December 14, 2018, 4:45pm UTC](https://discourse.processing.org/t/how-do-you-rotate-an-image-without-the-image-being-moved/6579/3 "2018-12-14T16:45:18Z")

</div>

How do you translate the image?

---

<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:** [December 14, 2018, 4:48pm UTC](https://discourse.processing.org/t/how-do-you-rotate-an-image-without-the-image-being-moved/6579/4 "2018-12-14T16:48:33Z")

</div>

With `translate()`

You should look at:

1. the reference page
2. rotate(): [https://processing.org/reference/rotate\_.html](https://processing.org/reference/rotate_.html)
3. translate(): [https://processing.org/reference/translate\_.html](https://processing.org/reference/translate_.html)
4. From the editor, `Examples > Basics > Transform` contains a number of sketches to show you how to use these commands
5. Also, `Examples > Basics > Image` has different things you can do with an image.

For an overview of the concepts, see the tutorials:

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

---

<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:** [December 14, 2018, 5:18pm UTC](https://discourse.processing.org/t/how-do-you-rotate-an-image-without-the-image-being-moved/6579/5 "2018-12-14T17:18:22Z")

</div>

Here is an example showing one way it can be done, there are others not using imageMode.

```auto
PImage img;

int x, y, w, h;

void setup() {
  size(300, 300);
  img = loadImage("lunar0.png");
  x = 110;
  y = 130;
  w = img.width;
  h = img.height;
}

void draw() {
  background(0);
  stroke(255);
  line(0, y, width, y);
  line(x, 0, x, height);
  // Change the image mode so now we specify the image
  // position using the image center rather than top-left
  // corner
  imageMode(CENTER);
  // Draw the image centred about [x, y]
  image(img, x, y);
  // Now we want to rotate the image 'in position'
  pushMatrix(); // remember current drawing matrix)
  translate(x, y);
  rotate(radians(45)); // rotate 45 degrees
  image(img, 0, 0);
  popMatrix(); // restore previous graphics matrix
  // Restore image mode back to default (optional)
  imageMode(CORNER);
}

```

Here is the image used  
 ![lunar0](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1454f6a6b8e835bbc79c2df090fa6e55d055fb64.png)

and the output looks like this  
 ![rotated](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/452f8e9e32acc48e2695d947ce6f2be2d1a200a3.png)