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

Processing Project Guidance
1

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

2

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.

3

How do you translate the image?

4

With translate()

You should look at:

  1. the reference page
  2. rotate(): https://processing.org/reference/rotate_.html
  3. translate(): 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/
  2. https://processing.org/tutorials/transform2d/
1 Like
5

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

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

and the output looks like this
rotated

1 Like