Rotate coordinates back after rotating game context (geometry)

Question

To achieve something similar to the image below using HTML5 canvas one can simply write the following:

var TO_RADIANS = 0.0174532925;
context.translate(30, 20);
context.rotate(30 * TO_RADIANS);
context.drawImage(img, 0, 0);

My problem comes when I want to convert the coordinates from inside the translated/rotated context back to the main context. For example, if a missile were shot from 0,0 inside the translated/rotated context along the X axis, what formula would you use to then convert its position to the outer context?

Answer 1

Note the following important identity for augmented isometric affine matrices:

$$ \begin{pmatrix} cos\theta & sin\theta & -(xcos\theta + ysin\theta)\\ -sin\theta & cos\theta & -(-xsin\theta + ycos\theta)\\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} cos\theta & -sin\theta & u\\ sin\theta & cos\theta & v\\ 0 & 0 & 1\\ \end{pmatrix} \begin{pmatrix} x\\y\\1\\ \end{pmatrix} = \begin{pmatrix} x\\y\\1\\ \end{pmatrix} $$

where the isometric condition is recognized from: \$cos^2\theta + sin^2\theta=1\$ and \$\begin{pmatrix}u\\v\end{pmatrix}\$ is the translation in world coordinates of your original transformation.

In vector terms, if you think of your original transformation as being $$ \begin{pmatrix} R & T\\ 0 & 1\\ \end{pmatrix} $$

then the inverse transformation, to return to World Coordinates is simply

$$ \begin{pmatrix} R^{-1} & -R^{-1}T\\ 0 & 1\\ \end{pmatrix} $$
where because of isometry the inverse of R is simply the transpose of R, as noted above.

In vector form the initial identity is just
$$ \begin{pmatrix} R^{-1} & -R^{-1}T\\ 0 & 1\\ \end{pmatrix} \begin{pmatrix} R & T\\ 0 & 1\\ \end{pmatrix} \begin{pmatrix} v\\1 \end{pmatrix} = \begin{pmatrix} v\\1 \end{pmatrix} $$

which is readily proved by multiplying out to get first
$$ \begin{pmatrix} R^{-1} & -R^{-1}T\\ 0 & 1\\ \end{pmatrix} \begin{pmatrix} Rv + T\\1\\ \end{pmatrix} = \begin{pmatrix} v\\1 \end{pmatrix} $$

and then reducing the left hand side as $$ \begin{pmatrix} R^{-1}Rv + R^{-1}T-R^{-1}T\\1\\ \end{pmatrix} = \begin{pmatrix} R^{-1}Rv\\1\\ \end{pmatrix} = \begin{pmatrix} v\\1 \end{pmatrix} $$

Q.E.D.

Note also that the vector form of the identity is not specific to only a 2D space, but applies to any number of spatial dimensions.

Answer 2

You basically found out about transforms and spaces in 2D!

If you enter this "new missile space" via translation followed by a rotation then you have to do the same thing in reverse, multiplied by -1.

missile.rotate(-30 * TO_RADIANS);
missile.translate(-30, -20);

Now your missile is in "world space".