programming forums Java Java JSRs Mobile Certification Databases Caching Books Engineering OS Languages Paradigms IDEs Build Tools Frameworks Products This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
Sheriffs:
Saloon Keepers:
Bartenders:

# How do I rotate an image towards a position (x,y)?

Greenhorn
Posts: 6
I want to rotate a image towards a moving position e.g. the cursor. I googled it and found some answers but for a newbie like me they were too complicated. So I was wondering, could anyone explain me how to and provide examples in a newbie friendly way?

Jayesh A Lalwani
Rancher
Posts: 2762
32
What do you mean by rotating towards a position. Do you mean rotating around a position?

What did you try already? An easy way of rotating is to rotate the entire graphics. if you call graphics.rotate(rad), everything drawn on the that graphics object will be rotated. The drawback is that everything will be rotated. ANother way to rotate the image is to apply a affine transformation. This is easy enough to do in java, but you need to understand how affine transformations work if you really want to go what's going on. There's some pretty nifty mathematics at work here.

If you are having problems understanding Affine transformation, you will probably need to pick up a book. You will need a good understanding of basic geometry and matrix algebra to understand the fundamentals of image transformations.

ETA: I realized my post sounds kind of scary You still can use AffineTransformation without knowing the math behind it. You can do something like this

Greenhorn
Posts: 6
Jayesh A Lalwani wrote:What do you mean by rotating towards a position. Do you mean rotating around a position?

What did you try already? An easy way of rotating is to rotate the entire graphics. if you call graphics.rotate(rad), everything drawn on the that graphics object will be rotated. The drawback is that everything will be rotated. ANother way to rotate the image is to apply a affine transformation. This is easy enough to do in java, but you need to understand how affine transformations work if you really want to go what's going on. There's some pretty nifty mathematics at work here.

If you are having problems understanding Affine transformation, you will probably need to pick up a book. You will need a good understanding of basic geometry and matrix algebra to understand the fundamentals of image transformations.

ETA: I realized my post sounds kind of scary You still can use AffineTransformation without knowing the math behind it. You can do something like this

By rotating towards a position I mean rotate towards a position. Example:
Tom has a top down game and he wants his character to look into the mouse position, how does he achieve that?.

I know how to rotate images, just not how to make the rotation point towards a position e.g. my cursor.

Stephan van Hulst
Saloon Keeper
Posts: 7992
143
So really, you want to know the angle between two directions your image is "looking at". This is not a Swing question but a maths question. I shall move it to Java in General.

First you need to find the angle between the position you want to "look at" and a fixed reference (usually "3 o'clock" if your 2D coordinate space increases towards the bottom right). There's a simple trigonometric solution for this: tan a = y/x; so a = arctan(y/x). Here a is the angle between the position you point at, and 3 o'clock. Luck would have it that Java has a method just to perform this operation: Math.atan2(y,x);

So now that you have this angle, all you need to do is subtract the current angle of your image, and then rotate the image by the difference.

Greenhorn
Posts: 6
Stephan van Hulst wrote:So really, you want to know the angle between two directions your image is "looking at". This is not a Swing question but a maths question. I shall move it to Java in General.

First you need to find the angle between the position you want to "look at" and a fixed reference (usually "3 o'clock" if your 2D coordinate space increases towards the bottom right). There's a simple trigonometric solution for this: tan a = y/x; so a = arctan(y/x). Here a is the angle between the position you point at, and 3 o'clock. Luck would have it that Java has a method just to perform this operation: Math.atan2(y,x);

So now that you have this angle, all you need to do is subtract the current angle of your image, and then rotate the image by the difference.

I haven't quite understood you, are you telling me how to rotate a image towards a fixed position? Can you please explain more simpler?

Stephan van Hulst
Saloon Keeper
Posts: 7992
143
• 1
No, I'm telling you how to rotate an image towards a position you point to. It's just that you need a fixed reference to make it work. There's not much sense in saying "my image is rotated by Pi radians" unless you have a fixed angle or position to say where it's rotated from. Usually when people say "Bla is rotated by 90°" They mean 90° from north, or 12 o'clock. Here north is the fixed reference. In computer graphics, we usually use east, or 3 o'clock, as a fixed reference.

Let's say you have an image of an arrow. It is originally pointing at 12 o'clock. This means it's rotated -90°, or -pi/2 radians. Suppose we want to rotate the image so it points at 5 o'clock. 5 is located 2/12 of a circle clockwise from 3. A circle consists of 2*pi radians. So 5 is 2/12 * 2pi radians away from 3. So the angle between 3 and 5 is pi/3 radians. This means that the angle between 12 and 5 is (pi/3 - -pi/2) radians or 5/6 pi radians

So you can see that we have determined the angle between 12 and 5 by using 3 as a fixed reference.

Greenhorn
Posts: 6
Stephan van Hulst wrote:No, I'm telling you how to rotate an image towards a position you point to. It's just that you need a fixed reference to make it work. There's not much sense in saying "my image is rotated by Pi radians" unless you have a fixed angle or position to say where it's rotated from. Usually when people say "Bla is rotated by 90°" They mean 90° from north, or 12 o'clock. Here north is the fixed reference. In computer graphics, we usually use east, or 3 o'clock, as a fixed reference.

Let's say you have an image of an arrow. It is originally pointing at 12 o'clock. This means it's rotated -90°, or -pi/2 radians. Suppose we want to rotate the image so it points at 5 o'clock. 5 is located 2/12 of a circle clockwise from 3. A circle consists of 2*pi radians. So 5 is 2/12 * 2pi radians away from 3. So the angle between 3 and 5 is pi/3 radians. This means that the angle between 12 and 5 is (pi/3 - -pi/2) radians or 5/6 pi radians

So you can see that we have determined the angle between 12 and 5 by using 3 as a fixed reference.

Thanks alot! +1