Get $x,y$ coord of a rectangle when rotation is $0$

Question

I have this square div in the page. I need to get the $x,y$ coords (left/top) of the box based on rotation 0 even when the box is rotated at a different angle. Is there a formula to calculate the the $x,y$ coords of a square with rotation angle of $0$.

Here is a demo - http://jsfiddle.net/blessenm/XrVTp/

You can see the rectangle is rotated to $22$ degree. And I get the value $'x: 208, y: 234'$. Where $x$ is bottom left corner and $y$ is top left corner.

If the angle is at a rotation $0$. The value I get is $'x: 208, y: 234'$. This exactly what want irrespective of the rotation.

I know this question has a bit programming but I think strong math people might be able to solve it.

Btw, I get can get the following values as input.

1. The distance between the left most point in the rotated rect and the left of the container.
2. The distance between the top most point in the rotated rect and the top of the container.
3. The distance between the right most point in the rotated rect and the left of the container.
4. The distance between the bottom most point in the rotated rect and the top of the container.
5. Angle of rotation

Answer 1

Note that the centre of the red square will not change when rotated. So we can find its coordinates first (by taking averages), then figure out the top left corner (based off the fact that the size of the red square is given beforehand; in this case, it was $256\times 256$). Here's a simple implementation:

document.querySelectorAll('input')[0].addEventListener('click',function() {
var left = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().left),
    right = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().right),
    top = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().top),
    bottom = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().bottom),
    x_mid = (left+right)/2.0,
    y_mid = (top+bottom)/2.0,
    x = x_mid - 256/2, // Subtract by half the knob's width.
    y = y_mid - 256/2  // Subtract by half the knob's height.
alert('left: '+left+', right: '+right+', top: '+top+', bottom: '+bottom+'\n'
      +'centre: ('+x_mid+', '+y_mid+')\n'
      +'x: '+x+', y: '+y);

//Alerts x: 208, y: 234 when angle is 0. Need to get this value all the time irrespective of the rotation.
});

Answer 2

You can use rotation matrix $$R(\theta) = \begin{bmatrix} \cos \theta & -\sin \theta \\ \sin \theta & \cos \theta \\ \end{bmatrix},$$ which rotates vector $\begin{bmatrix} x \\ y \\ \end{bmatrix}$ (counterclockwise if $\theta>0,$ and clockwise if $\theta<0$) around the center of rotation $(0,\ 0)$ by angle $\theta:$ $$\begin{bmatrix} x' \\ y' \\ \end{bmatrix} = \begin{bmatrix} \cos \theta & -\sin \theta \\ \sin \theta & \cos \theta \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ \end{bmatrix}.$$ This is equivalent to $$x' = x \cos \theta - y \sin \theta, \\ y' = x \sin \theta + y \cos \theta. $$ Similarly, rotation around the point with coordinates $(x_0,\ y_0)$ is given by $$x'-x_0 = (x-x_0) \cos \theta - (y-y_0) \sin \theta, \\ y'-y_0 = (x-x_0) \sin \theta + (y-y_0) \cos \theta. $$