[RESOLVED] Map location on rotated image

I feel bad asking this as I'm pretty sure it is simple, but I just can't seem to get it.

I have 2 images, with the red dot in the same x/y coordinate, except 1 is rotated. I add the red dot before I rotate the image, so that was easy enough.

However, what I want to do is add the dot after the image is rotated with the same X/Y coordinate.

Here is the image, not rotated.

https://i.imgur.com/zt1R5sd.png

Here is the image rotated at 35 degrees


https://i.imgur.com/NJCYl8G.png

What formula would I use to get the correct pixel locationon the rotated image, to match the non-rotated image?

Thanks,

Smitty

Are you using .Net, and rotating the image in a .Net language using the Rotation Transform?

If so, you don't need to understand the math, you would just draw the dot with the same rotation transform.

If you need to convert a click position on the rotated image back to the X,Y value of the location on the original image, if you saved the matrix used when drawing, you can use the inverse of the matrix to translate mouse positions back to the coordinate system of the unrotated image.
An example of that is found in this post (a vb vs2010 example).

If you didn't use the Net Framework Rotation Transform to do the rotation, then you must have looped through the coordinates of the Drawing, and computed a new X,Y position to draw the image at an angle somehow. You would just apply that same computation on the X,Y value of your red spot.

p.s. Also, I may be going colorblind as I'm finding it hard to see a red spot on your image.

Thanks for the response! Sorry, unless I'm misunderstanding, I don't think that would work for me.

I suppose I should explain my actual use case:

So what I'm doing is rendering the rotated map in a 500x300 image in an Avalonia UI control. However, the image is 5693x5693, so I need to find a center point and select a 500x300 rect to display it properly in the image.

The coordinates are X/Y coordinates on the map that I can calculate pixel wise when the image is not rotated, but the game rotates the image, so I want mine to match so I can center the image around where the character should be in game.

From my best guess, I need to get the unrotated X and Y coord, and then somehow move the x-coord number of pixels up to the right at a 35 degree angle to find the proper X pixel, and then move the y-coord number of pixels down to the right at 35 degrees as well.

Hopefully that explains it... I really need to take some math courses again..


*Edit* The red dot is in the oval-ish block near the top right of the land on the map.

Quote:

---

So what I'm doing is rendering the rotated map in a 500x300 image in an Avalonia UI control. However, the image is 5693x5693,

---

Not clear to me. How are you rendering the rotated map in the control?
Is what you are showing the full 5693x5693 image, shrunk down to fit in a 500x300 image,

Quote:

---

so I need to find a center point and select a 500x300 rect to display it properly in the image.

---

A center point of what, where? A center point of a 500x300 rectangle that is displayed on the image, roatated to represent the 500x300 area of the large image displayed in the Avalonia UI control?

Quote:

---

but the game rotates the image, so I want mine to match so I can center the image around where the character should be in game.

---

So you see the whole image in the game, or a portion of the image?
And the game image is separate from your UI control?
Are you running a separate program that is capturing the screen image of the game and displaying a scaled version of that in the control?
If so, how do you know what the angle is?
Is the game always rotating around the center of the image?

Quote:

---

*Edit* The red dot is in the oval-ish block near the top right of the land on the map.

---

Still can't see it. Probably doesn't matter.

Generally, the process would be to determine the center of rotation of the image.
Subtract those values from your characters position so you have the players position relative to the center of rotation.
Get the Sine and Cosine values of the angle.
Depending on how the coordinates of the image compare to the coordinates of the window, you may have to use the sine for the X axis, and cosine for the Y axis, or vice versa. And you may need to negate one of the values so the rotation direction matches the rotation direction that the game is using when it rotates by a given number of degrees.

Once you calculate the new X,Y values relative to center, you would add the center X,Y value to those values to get the position of the player at that rotation.
Rather than do this manually, you may still be able to use a Matrix, assuming you're using a .Net language.
i.e. create a default matrix, apply a rotation to the matrix, put the (relative points) you want to translate into an array and make a call to a matrix function to translate the points in the array into their rotated position values. You would then just add the center of rotation value to the relative points to convert them back to physical points in the window.

Dug up a very old example (from VB3 days) of the manual method I described.
The Cos of the Angle (Rot_Cos) was calculated outside the sub, likewise the Sin of the Angle (Rot_Sin) was also calculated outside the sub.
The reason for that is the sub would be called repeatedly for many points that needed to be rotated (like perhaps you need to rotate four points if you're drawing a rotated rectangle), but the rotation angle doesn't change for all the points, so you want to do the Sin and Cosine function calls only once, and then transform all the points using those values.

Code:

---

Sub Rot_XY(New_X As Long, New_Y As Long, Old_X As Single, Old_Y As Single, x As Single, y As Single)
'Given the old X and Y coordinates (as Singles) relative to the center (x, y)
'Returns the new X and Y coordinates (as Longs since the API want's Longs)
  New_X = (Rot_Cos * Old_X - Rot_Sin * Old_Y) + x
  New_Y = (Rot_Cos * Old_Y + Rot_Sin * Old_X) + y
End Sub

---

The return of Longs was because the values were passed in an API call (in this case I was calling the Polygon GDI API function). Note also that the last step I mentioned, adding the rotation center X,Y coordinates back to the value to change relative back to window coordinates is done in this sub, so that didn't have to be done repeatedly outside the sub.
The fact is, instead of passing relative coordinates in, this sub could have taken the current unrotated X,Y values, and subtract the center x,y from the position as the first step (stored in local varibles) and that might save some work that may have been going on outside the sub.

You also may be able set up a matrix and use the RotateAt method to specify the center of rotation to modify the matrix and then be able to transform points from the unrotated coordinates to their new coordinates without the need to convert to relative points, rotate, and convert back to window coordinates as that would already be part of the matrix. I haven't played with that enough to, and it was long ago, so haven't used that method.

Thanks for all the information!

You posted a lot, but I'll try to answer it all lol.

So the render area is 500x300. The map/image stays the same size, but I am only showing a 500x300 area of it, centered around the point I'm trying to find.

I'm not so concerned about what views ingame, but the area of view (500x300 in my program is meant to emulate the viewwindow of the game. I am reading the map data from the game, which has it in X/Y coordinates, but they display it in an isomorphic 35 (or maybe 45 degree, can't remember) rotation. So your X increases while walking on an angle, not while walking directly left/right.

I converted your code in your 2nd post and it is really close. I had to remove the "+x" and "+y" at the end, as that really threw off my numbers, but now I am getting the correct rotated X coordinate, but not the correct rotated Y coordinate.

C# Code:

private Tuple<double, double> Rotate(int x, int y, double angle) {
    angle = angle * Math.PI / 180;
 
    double xr = (x * Math.Cos(angle) - y * Math.Sin(angle));
    double yr = (y * Math.Cos(angle) + x * Math.Sin(angle));
 
    return new Tuple<double, double>(xr, yr);
}

So if I put in, 2548, 1412, -35 (seems to have to be negative.. I'm guessing the way it needs to rotate), it gives me 2897, -304, but my expected would be 2897, 2039. I'm not really sure what I need to adjust to get the Y coordinate calculating correctly.

I'm not sure, but I would try a few points along the vertical and see if you can see a pattern, e.g. is the value off by a constant number, or does in increase or decrease in a direction opposite from the desired value. You may have to add or subtract a bias, or add or subtract the value from a bias.
Sometimes the Y-axis has to be reversed or subtracted from the Maximum Y value because of the direction that Y increments in the image versus the direction that it increments on the screen. Without a larger sample set, or the real code to try for myself, I can't know the specific issue.

Thanks for all your help! I know how much the # is off by now... So when the image rotates, the X coordinate starts at 0 still, but the Y coordinate has now been moved down 2344 pixels by the rotation, hence it being off by that much.

I just need to find out how to find that difference and I'm good to go.

Thanks again!

*edit* Turns out I was wrong and it is rotated 45 degrees, so it is easy enough to find the amount I need to adjust: divide the height /2. Thanks again for all your help!