How to calculate Cartesian coordinates for an element after rotation has been applied?

Question

I have a square on a Cartesian coordinate system with origin (0,0) on top left (yellow arrow from the picture).

The initial coordinate of the square from the origin are:

x          0
y          0
width      100
height     100
boxWidth   100
boxHeight  100
rotation   0

Values boxWidth and boxHeight represent the space between the left margin of the square and the right most margin (included when it is rotated).

After applying a rotation of 45 degree clock wise with reference point the center of the square, I obtain the following values:

x         -20.711
y         -20.711
width     100
height    100
boxWidth  141.421
boxHeight 141.421
rotation   45 CW

Question:

Assuming I know ONLY the coordinate for the square rotated (including boxWidth and boxHeight) and the value of its rotation in degree.

How to calculate the value of x, y, boxWidth, boxHeight after applying rotation of 45 anticlockwise on already rotated square?

x         ???
y         ???
width     100
height    100
boxWidth  ???
boxHeight ???
rotation  0

I kindly ask you an explanation on how to possibly solve this problem with a brief sample. Notes: I wound need to make it working with different rotation values.

Answer 1

Given a point $(x,y)$, its image $(x',y')$ under a rotationt of angle $\theta$ (in radians) about the origin can be expressed in matrix form as $$ \begin{bmatrix} x' \\ y' \\ \end{bmatrix} = \begin{bmatrix} \cos \theta & -\sin \theta \\ \sin \theta & \cos \theta \\ \end{bmatrix}\begin{bmatrix} x \\ y \\ \end{bmatrix} $$ So if you have a square centred in the origin you can use this to compute the image of each vertex under a rotation (note that a rotation of angle $-\theta$ "undoes" a rotation of angle $\theta$). Further, if the vertices are $(x_1,y_1),\dotsc,(x_4,y_4)$, then $$ \begin{align} \text{boxWidth} &= \max(x_1,\dotsc,x_4) - \min(x_1,\dotsc,x_4) \\ \text{boxHeight} &= \max(y_1,\dotsc,y_4) - \min(y_1,\dotsc,y_4) \end{align} $$ So all you need to do is compute the coordinates of the centre, translate the square so that it is centred in $(0,0)$, apply the rotation as above, and translate it back.

---

The following example assumes that:

1. The coordinate system is fixed.
2. Positive angles correspond to clockwise rotations.
3. When rotation is $0$ the sides of the square are parallel to the coordinate axes.
4. $p_{\theta}=(x_{\theta},y_{\theta})$ are the coordinates after a rotation of angle $\theta$ of the vertex which is at the bottom-left when rotation is $0$.

Now suppose that, like in your example, the square has sides of length $100$ and is rotated by $\theta = 45°$, i.e. $\frac{\pi}{4}$ radians. Then $$ \begin{align} R_{\theta} := \begin{bmatrix} \cos \theta & -\sin \theta \\ \sin \theta & \cos \theta \\ \end{bmatrix} &= \frac{\sqrt{2}}{2} \begin{bmatrix} 1 & -1 \\ 1 & 1 \\ \end{bmatrix}\\ R_{-\theta} := \begin{bmatrix} \cos (-\theta) & -\sin (-\theta) \\ \sin (-\theta) & \cos (-\theta) \\ \end{bmatrix} &= \frac{\sqrt{2}}{2} \begin{bmatrix} 1 & 1 \\ -1 & 1 \\ \end{bmatrix} \end{align} $$ Further, observe that if the centre of the square has coordinates $(x_c,y_c)$, then $$ \begin{bmatrix} x_{\theta} \\ y_{\theta} \\ \end{bmatrix} = R_{\theta} \begin{bmatrix} -50 \\ -50 \\ \end{bmatrix} + \begin{bmatrix} x_c \\ y_c \\ \end{bmatrix} $$ therefore $$ \begin{bmatrix} x_c \\ y_c \\ \end{bmatrix} = R_{\theta} \begin{bmatrix} 50 \\ 50 \\ \end{bmatrix} + \begin{bmatrix} x_{\theta} \\ y_{\theta} \\ \end{bmatrix} $$ and we can conclude with $$ \begin{bmatrix} x_0 \\ y_0 \\ \end{bmatrix} = R_{-\theta} \begin{bmatrix} x_{\theta} - x_c \\ y_{\theta} - y_c \\ \end{bmatrix} + \begin{bmatrix} x_c \\ y_c \\ \end{bmatrix} $$