How to rotate a image in Processing at the cursor coordinate?

General Discussion Other

jigsaw004

How to rotate a image in Processing at the cursor coordinate?

in General Discussion • Other • 1 year ago

I am new to Processing and I need help relating to the rotate() function. What I need is that a image is displayed at the cursor's coordinates and when the mouse is pressed, the image should rotate counterclockwise by 90 degrees at the cursor's coordinate itself. How to accomplish this? Also, I am currently confused as to what translate() does. Any explanation would help.

Replies(2)

tfguy44

Re: How to rotate a image in Processing at the cursor coordinate?

1 year ago

PImage myImage;
void setup(){
size(200,200);
myImage = loadImage( "http://tfguy44.com/MyIcon1.PNG" );
}
void draw(){
background(128);
translate(mouseX, mouseY);
rotate( mousePressed?-HALF_PI:0 );
image( myImage, -myImage.width/2.0, -myImage.height/2.0 );
}

asimes

Re: How to rotate a image in Processing at the cursor coordinate?

1 year ago

I wrote a small sketch for doing that with a rect(). The same can be done with an image:

float rot = 0;
void setup() {
size(600, 600);
rectMode(CENTER);
}
void draw() {
translate(mouseX, mouseY);
rotate(rot);
rot -= TWO_PI/100;
rect(0, 0, 200, 200);
}

- rectMode(CENTER) sets rects() to be drawn from their center instead of their top-left corner. This is useful for rotation because then we can also rotate from the center later.

- translate() moves the coordinate system: http://processing.org/learning/transform2d/

- rotate() is now translated to (mouseX, mouseY) so its effects take place there instead of at (0, 0).

Top Reply