We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpSyntax Questions › rotate around the mouse
Page Index Toggle Pages: 1
rotate around the mouse (Read 644 times)
rotate around the mouse
Jun 4th, 2009, 11:53am
 
hello

i want a image that rotating around the mouse cursor.
but that image disappear from the screen.

Code:
PImage img3;
float rot=0;

void setup()
{
size(500,500);
img3 = loadImage("innenkreis2.png");
}

void draw()
{
background(1.5);
translate(width/2, height/2);
rotate(rot);
image(img3,mouseX,mouseY);
rot+=PI/100;
}
Re: rotate around the mouse
Reply #1 - Jun 4th, 2009, 1:05pm
 
Your problem is that you are calling translate(), but then trying to draw at the mouse positions on top of that. So essentially you're drawing the image at the coordinates of mouseX and mouseY, but then you're moving the image width/2 and height/2 pixels away from that position.

So if you want your image to draw at the coordinates of your translation, you have to tell image() to draw at coordinates 0, 0. That way your image is drawn at the origin, then translated to the desired location. Since you want to draw the image at the mouse location, you'll want to call translate(mouseX, mouseY);

So the simple fix to all of this is:
Code:

PImage img3;
float rot=0;

void setup()
{
 size(500,500);
 img3 = loadImage("innenkreis2.png");
}

void draw()
{
 background(1.5);

//translate(width/2, height/2); <--- YOUR OLD CALL TO translate()
translate(mouseX, mouseY); // CORRECT CALL TO translate()

rotate(rot);

//image(img3,mouseX,mouseY); <--- YOUR OLD CALL TO image()
image(img3, 0, 0); // CORRECT CALL TO image()

rot+=PI/100;
}


Make sense?  Smiley
Re: rotate around the mouse
Reply #2 - Jun 4th, 2009, 1:05pm
 
When using transformations, draw relative to 0, 0.
Code:
void draw() 
{
background(1.5);
translate(mouseX, mouseY);
rotate(rot);
translate(-img3.width/2, -img3.height/2);
image(img3,0,0);
rot+=PI/100;
}

If you add imageMode(CENTER);, you can get rid of the second translate().

[EDIT] A bit late... Smiley I fumbled a bit, before seeing you were using width and not img3.width...  Roll Eyes
Re: rotate around the mouse
Reply #3 - Jun 4th, 2009, 1:50pm
 
thanks

but why is the second image not rotation on the mouse cursor?
Code:

void draw()
{
background(1.5);
translate(mouseX, mouseY);
rotate(rot2);
translate(-img2.width/2, -img2.height/2);
image(img2,0,0);
rot2+=PI/100;

translate(mouseX, mouseY);
rotate(rot);
translate(-img3.width/2, -img3.height/2);
image(img3,0,0);
rot+=PI/100;
}
Re: rotate around the mouse
Reply #4 - Jun 4th, 2009, 2:09pm
 
I don't even need to test it...
You need to wrap the first part with pushMatrix() and popMatrix(), so the second part starts from scratch. Otherwise, successive transformations add up.
Page Index Toggle Pages: 1