Point rotation relative to image coordinates

Question

I am creating a database for my local photos with a web interface, where I want to be able tag images and rotate them, amongst other things. When implementing tags (just like Facebook's tagging system) I have come across a problematic area. Namely:

Let's say I have tagged an image of (not) me:

And when I have rotated it, I want the tag coordinates to rotate with the image, like so:

Here is my problem. I store the coordinates in the database (x, y) in the CSS coordinate system, ie left/top instead of the mathematical left/bottom. (It might not be too big of an issue?)

The next big issue is that when I rotate around the center (the point [0,0]) I get negative coordinates. From, for example, [100, 100] to [-100, -100]. This is not correct because when I rotate an image, I don't get negative coordinates. The coordinate system is only positive.

All my rotation code has been using the vector rotation formula:

$nx = $x * cos(deg2rad($rotation_angle)) - $y * sin(deg2rad($rotation_angle));
$ny = $x * sin(deg2rad($rotation_angle)) + $y * cos(deg2rad($rotation_angle));

My question is: How do I solve this? I have tried just using abs to turn the negative values to positive, but it results in the wrong coordinates.

Answer 1

If your rotations are only in 90 degree steps, as shown here, then the answer is fairly straightforward. The trick is that you are not rotating the coordinates themselves within a fixed frame of reference, you are just changing the frame of reference in which they are measured. (Well, the two are equivalent, but it seems to me an easier way to visualise it.)

In your original you have x measured rightwards from the left edge and y measured downwards from the top edge. After rotation the edges have changed places, so you now need to work out where the same point is in relation to this new frame. So the new x is the distance rightward from the new left edge, which used to be the bottom; and the new y is the distance down from the new top edge, which used to be the left. ie:

$ny = $x;
$nx = $height - $y;

Extending this to 180 and 270 degree rotations should be fairly obvious.

If you need to handle partial rotations, then the problem is a bit more complicated because you have to define coordinate axes that are aligned with the page rather than with the image edges, and you have some choice about how to offset them. If that's the case, comment and I'll try to fill in more details (much) later.