Rotating Rectangles

Working on the maps48 project, one of the problems that needed solving was calculating the amount of map space needed to be retrieved to allow rotating the map without introducing any blank space in the viewport. As you can see from the diagram below what we actually need is to get the rotated rectangle’s horizontal and vertical projection as the new width and height.The black border represents the viewport. If we were to only have an image the size of the viewport and rotate it, we’d end up with something like the orange rectangle. Notice the blank spaces in the viewport :). The solution is to resize (or import a larger bit of the map, in our case) the image - the pink rectangle - so that when rotated it fills up the viewport entirely, as does the green rectangle.

This can be easily achieved through some basic trigonometry. The key to this are two angles: alpha, the angle the rectangle was rotated by and beta, the angle the diagonal makes with the width.

First,  I determine the angle the diagonal makes with the baseline (the rectangle’s width):

Now, we know that:

This way we can determine the new height. The new width can be determined in the same way:

And here’s a translation of this in JavaScript:

function getRotatedDimensions(width, height, rot) {
    // rotation angle in radians
    var alpha = rot * Math.PI / 180;
    // the angle made by the diagonal and the width in radians
    var beta = Math.atan(height / width);
    // diagonal length
    var diagonal = Math.sqrt(width * width + height * height);
    var newHeight = Math.sin(alpha + beta) * diagonal;
    var newWidth = Math.cos(beta - alpha) * diagonal;
    return { "width": newWidth, "height": newHeight };
}

This was inspired by Adrian’s post about overlapping rectangles. The graphics above were generated with Photoshop and the formulas were built using the excellent CodeCogs online Equation Editor.