# Rectangle Rotation and Scale

I'm working on a hobby video project, and I'm dealing with video clips being rotated inside the frame.

I'd like to fill the entire frame with the rotated video clip, while cropping as little as possible.

If I rotate the video without any other adjustments, the result looks like this:

In this image, the rotated video clip is the black rectangle, while the canvas/frame is the blue rectangle.
These rectangles are guaranteed to have the exact same dimensions - width, height, area, etc.
The angle of rotation may vary, and it may rotate in either direction (positive or negative), so I need to be able to account for it in my calculations.

The corners of the rotated video clip will have to be cropped - I wish to minimize this.
Additionally, as you can see in the image, the video clip doesn't fill the entire frame anymore - the corners of the canvas are empty - so I need to zoom the video clip to make it larger and fill the entire frame.

So I need to calculate the minimum ratio/percentage I need to scale the video clip up, in order to fill the entire frame. In other words, the smallest value by which to multiply the dimensions of the black rectangle, so that the blue rectangle will fit inside of it exactly.

And I also need to calculate the resulting $(x,y)$ coordinate of the top-left corner of the rotated video clip, in relation to the top-left corner of the frame. (In other words, the position offset.)

• Are you always rotating about the exact center of the original rectangle? – Adrian Keister May 9 '18 at 15:05
• @AdrianKeister Yes, keeping the video centered will probably always be ideal. I can't imagine it ever being different, and I won't worry about that right now. – Giffyguy May 9 '18 at 15:07
• Is there any maximum amount you'd ever rotate? Like $90^{\circ}?$ – Adrian Keister May 9 '18 at 18:44
• I’m a bit puzzled. In one paragraph you say that you wish to zoom the rotated rectangle so that it fills the entire frame, but in the next you say you wish to shrink it to fit. Which is it? – amd May 9 '18 at 21:30
• @amd Sorry for the confusion. If I leave the rotated rectangle as-is, it is too small to cover the entire frame, so it must be enlarged. Period. No shrinking necessary. I simply wish to only enlarge it the absolute minimum required amount (e.g. percentage) - because I want to keep as much of the original image as possible, and minimize cropping. Does that make more sense? – Giffyguy May 9 '18 at 22:23

Introduce two notations: vector coordinates with respect to the center of the rectangles, $C$, will look like this: $$\left[\begin{matrix}x\\y\end{matrix}\right]_C,$$ and if we let $O$ be the upper-left corner of the un-rotated frame, we will denote coordinates with respect to that reference as $$\left[\begin{matrix}x\\y\end{matrix}\right]_O.$$ Now, to rotate something clockwise through an angle $\alpha$, we multiply coordinate vectors by the rotation matrix $$R_{\alpha}=\left[\begin{matrix}\cos(\alpha) &\sin(\alpha)\\-\sin(\alpha)&\cos(\alpha)\end{matrix}\right].$$ This only applies in the $C$ reference frame, since, as per your comment, you're only rotating about $C.$

Now, you have posed two problems: one is to find the magnification such that the rotated frame fills the unrotated frame. The other is to find the coordinates of the upper-left coordinate of the rotated frame with respect to $O$. The second problem is easier, I will tackle that first.

Let $w$ be the width of the frame, and $\ell$ the height. Let $O_C=\left[\begin{matrix}-w/2 \\ \ell/2\end{matrix}\right]$ be the coordinates of $O$ in $C$, $P_C$ the coordinates of the upper-left corner of the rotated frame in $C$, and $P_O$ the coordinates of the upper-left corner of the rotated frame in $O$. By the properties of vector addition, we have that $O_C+P_O=P_C$. The target variable is $P_O$, so we have that \begin{align*}P_O&=P_C-O_C\\&=R_{\alpha}O_C -O_C\\&=R_{\alpha}O_C-IO_C\\&=(R_{\alpha}-I)\,O_C\\ &=\left[\begin{matrix}\cos(\alpha)-1 &\sin(\alpha)\\-\sin(\alpha) &\cos(\alpha)-1\end{matrix}\right]\left[\begin{matrix}-w/2\\\ell/2\end{matrix}\right]\\ &=\frac12\left[\begin{matrix}w(1-\cos(\alpha))+\ell\sin(\alpha)\\ -w\sin(\alpha)-\ell(1-\cos(\alpha))\end{matrix}\right]\end{align*}

As for the magnification, this is a tricky problem to solve. Let $\theta=\arctan(\ell/w)$, and let $\varphi=\arctan(w/\ell)$. I am going to make the assumption that $w>\ell$, so that $\varphi>\theta$. For rotation angles from $0$ to $\pi/2$, there are three entirely different regimes, and we have to compare the long and short sides of the rotated frame to different sides of the fixed frame depending on which regime we're in. Here's a table of comparisons: $$\begin{array}{|c|c|c|} \hline &\textbf{Rotated Long} &\textbf{Rotated Short} \\ \hline 0\le\alpha\le\theta &\text{Fixed Long} &\text{Fixed Short}\\ \hline \theta\le\alpha\le\varphi &\text{Fixed Long} &\text{Fixed Long} \\ \hline \varphi\le\alpha\le\pi/2 &\text{Fixed Short} &\text{Fixed Long} \\ \hline \hline \end{array}$$ Let $s=\sqrt{w^2+\ell^2}$ be the diagonal length.

Case 1: $0\le\alpha\le\theta$. Let $\beta=\varphi-\alpha$. This will be the angle a diagonal of the fixed frame makes with a rotated "vertical" line. The perpendicular distance $\ell'/2$ from the rectangle center to a line going through the corner of the rectangle, along the "vertical" of the rotated frame, would then be given by $$\frac{\ell'}{2}=\frac{s}{2}\,\cos(\beta),$$ or $\ell'=s\cos(\beta)$, and hence the magnification required in the "vertical" direction would be given by $$\frac{\ell'}{\ell}=\frac{s\cos(\beta)}{\ell}.$$ The magnification required in the "horizontal" direction we analyze as follows. Let $\gamma=\theta-\alpha$ be the angle a diagonal in the fixed rectangle makes with the "horizontal" of the rotated frame. The perpendicular distance $w'/2$ from the center to the corner, along the "horizontal" of the rotated frame, would be given by $$\frac{w'}{2}=\frac{s}{2}\,\cos(\gamma),$$ or $w'=s\cos(\gamma)$, and hence the magnification required by the "horizontal" direction would be given by $$\frac{w'}{w}=\frac{s\cos(\gamma)}{w}.$$ The magnification $m$ you should take would simply be \begin{align*}m&=\max\left(\frac{s\cos(\beta)}{\ell},\frac{s\cos(\gamma)}{w}\right)\\ &=s\max\left(\frac{\cos(\beta)}{\ell},\frac{\cos(\gamma)}{w}\right)\\ &=\sqrt{w^2+\ell^2}\max\left(\frac{\cos[\arctan(w/\ell)-\alpha]}{\ell},\frac{\cos[\arctan(\ell/w)-\alpha]}{w}\right). \end{align*}

For Cases 2 and 3, although your $\gamma$ and $\beta$ angles will go negative, the formula is still valid, with the additional constraint of magnitudes. That is, your final answer is $$m=\sqrt{w^2+\ell^2}\max\left(\frac{|\cos[\arctan(w/\ell)-\alpha]|}{\ell},\frac{|\cos[\arctan(\ell/w)-\alpha]|}{w}\right).$$

• Thanks for this! Even if it is incomplete, it's a huge start for me. – Giffyguy May 9 '18 at 15:33
• This is a really fun problem, so thank you! – Adrian Keister May 9 '18 at 15:33
• Added Case 1. This is a long problem! – Adrian Keister May 9 '18 at 19:44
• Holy cow! This is incredible! Thank you so much for the hard work! – Giffyguy May 9 '18 at 22:32
• I have a hunch that the formula above, slightly modified (absolute values enclosing the cosines) will work for any angle. Need to confirm, though. – Adrian Keister May 10 '18 at 11:26

If $(L,W)$ are dimensions of rectangle and $\alpha$ clockwise rotation of frame and $L$ taken center towards left: $$x_{top-left-corner}= L/2 \cos \alpha - W/2 \sin \alpha$$ $$y_{top-left-corner}= L/2 \sin\alpha + W/2 \cos \alpha$$

There are two options you may like to consider. First reduce red rectangle to original dimension entailing loss of image at corners as blank areas. Else take the inscrbed rectangle of inner diagonal sides as shown, starting at center points of diagonals of rotated rectangle within the original rectangle..but that removes more area of the original video clip. Coordinates of corners can be worked out using like as above rotated matrix operation.

Based on your comments to the question, I understand that you’re looking for a scale factor by which to grow the rotated rectangle so that it just covers the original frame. For simplicity, let’s assume that the rotation and dilation are both centered at the rectangle/frame center. It’s convenient to work with the half-width $w$ and half-height $h$ to avoid cluttering up the calculations with stray factors of two.

For now, let’s also assume the usual mathematical convention that the coordinate system is left-handed with positive angles counterclockwise, and place the origin at the center of the frame. It’s easy to adjust for the actual coordinate system later. The corners of the frame thus have coordinates $(\pm w,\pm h)$ and its edges lie on the lines $x=\pm w$, $y=\pm h$. Working in homogenous coordinates, we can represent these lines by the vectors $(1,0,\mp w)^T$ and $(0,1,\mp h)^T$. A point rotation through an angle $\theta$ is given by the matrix $$R = \begin{bmatrix}\cos\theta&-\sin\theta&0\\\sin\theta&\cos\theta&0\\0&0&1\end{bmatrix}.$$ The vectors that represent lines are covariant: the corresponding transformation matrix for them is $R^{-T}$, but since $R^{-1}=R^T$ for a rotation, this is simply $R$ itself. Thus, the four edge lines are transformed into $(\cos\theta,\sin\theta,\mp w)^T$ and $(-\sin\theta,\cos\theta,\mp h)^T$, respectively.

Looking first at $0\lt\theta\le\pi/2$, we see that the rotated upper edge cuts off the upper-left corner and the rotated right edge cuts off the upper-right corner. The distance of the upper edge from the center is just $h$, and the signed distance of the cut-off corner from this line is given by the usual formula: $(-\sin\theta,\cos\theta,-h)\cdot(-w,h,1) = h\cos\theta+w\sin\theta-h$, therefore the rectangle height that puts the rotated edge on this frame corner is $w\sin\theta+h\cos\theta$, making the vertical scale factor $\cos\theta+(w/h)\sin\theta$. A similar calculation for the other edge and frame corner yields a horizontal scale factor of $\cos\theta+(h/w)\sin\theta$. The required uniform scale factor is therefore $$s=\max{\left(\cos\theta+\frac wh\sin\theta, \cos\theta+\frac hw\sin\theta\right)}.$$ For other rotation angles, we can appeal to symmetry: if $\pi/2\lt\theta\lt\pi$, we can use the complementary angle, and for $\theta\lt0$, the absolute value of the angle. If the coordinate system is left-handed, with $y$ increasing downward as is common in computer graphics, no adjustment is necessary: if positive angles are clockwise, everything’s consistent, while if they’re counterclockwise, we’re using the absolute value of the angle, anyway.

Finding the coordinates of the rotated upper-left image corner is straightforward. We no longer assume that the origin is is at the center of the frame. Let the center be at $\mathbf c = (x_c,y_c)^T$. The rotation and dilation is accomplished by translating the origin to this point, applying $R$, dilating and translating back, i.e., $$\mathbf p' = sR(\mathbf p-\mathbf c)+\mathbf c = sR\mathbf p + (I-sR)\mathbf c.$$ (Here $R$ is the $2\times2$ rotation matrix—the upper-left submatrix of the earlier homogeneous $R$—you might be more familiar with.) If you’re working in a left-handed coordinate system with positive angles counterclockwise, you’ll need to adjust $R$ by replacing $\theta$ with $-\theta$, which amounts to changing the signs of its $\sin\theta$ elements.