Math Problem: Getting Coordinates From Position And Angle

Question

let me begin by stating that's i'm dreadful at math.

i'm attempting to reposition and rotate a rectangle. however, i need to rotate the rectangle from a point that is not 0,0 but according to how far its coordinates has shifted. i'm sure that doesn't make much sense, so i've made some sketches to help explain what i need.

the image above shows 3 stages of the red rectangle moving from 0% to 100%. the red rectangle's X and Y coordinates (top left of the red rectangle) only moves a percentage of the blue rectangle's height.

the red rectangle can rotate. focusing only on the middle example ("Distance -50%") from above, where the red rectangle is repositioned at -50 of the blue rectangle's height, its new angle in the above image is now -45º. it has been rotated from its 0, 0 point.

now, my problem is that i want its rotational point to reflect its position.

the red and blue rectangles are the same size, but have opposite widths and heights. since the red rectangle's 0,0 coordinates are now -50% of the blue rectangle's height, and since they have opposite widths and heights, i want the rotational point to be 50% of the red rectangle's width (or 50% of the blue rectangle's height, which is the same thing).

rather than specifically telling the red rectangle to rotate at 50% of its width, in order to do what i want, i need to emulate doing so by using a formula that will position the red rectangle's X and Y coordinates so that its rotational point reflects its position.

Answer 1

If you know the origin O and a point P on the side of rotated rectangle, you can calculate the vector between the two:

You can get the angle between the vector and the x-axis by taking the dot product with this vector:

Given this, you can transform any point on the rectangle by multiplying it by a rotation matrix:

Answer 2

I don't exactly understand what you need, but it seems that a procedure to rotate a rectangle around an arbitrary point may help.

Suppose we want to rotate a point (x,y) d radians around the origin (0,0). The formula for the location of the rotated point is:

x' = x*cos(d) - y*sin(d)
y' = x*sin(d) + y*cos(d)

Now we don't want to rotate around the origin, but around a given point (a,b). What we do is first move the origin to (a,b), then apply the rotation formula above, and then move the origin back to (0,0).

x' = (x-a)*cos(d) - (y-b)*sin(d) + a
y' = (x-a)*sin(d) + (y-b)*cos(d) + b

This is your formula for rotating a point (x,y) d radians around the point (a,b).

For your problem (a,b) would be the point halfway on the right side of the blue rectangle, and (x,y) would be every corner of the red rectangle. The formula gives (x',y') for the coordinates of the corners of rotated red rectangle.

Answer 3

It seems like you could avoid a more complex rotation by more crafty positioning initially? For example, in the last example, position the red box at "-25% Blue Height" and "-25% Red Height" -- if I follow your referencing scheme -- then perform the rotation you want.

Answer 4

Here's an illustrated answer:

Answer 5

It's quite simple really.

1. Let's settle on your point you want to rotate the rectangle about, i.e. the point of rotation (RP) which does not move when you swivel your rectangle around. Let's assume that the point is represented by the diamond in the figure below.

2. Translate the 4 points so that RP is at (0,0). Suppose the coordinates of that point is (RP_x,RP_y), therefore subtract all 4 corners of the rectangle by those coordinates.

3. Rotate the points with a rotation matrix (which rotates a point anticlockwise around the origin through some angle which is now the point of rotation thanks to the previous translation):

The following figure shows the rectangle rotated by 45° anticlockwise.

4. Translate the rectangle back (by adding RP to all 4 points):

I assume this is what you want :)