Vector Rotation for Dummies

Bilgin Esme   June 25, 2014   Coding

Maybe the title is not very appropriate, because the vector rotation operations are not so simple in nature. You should take a couple of engineering courses to completely understand it.

The bad news is; as a game developer, you should know your math quite well. Now, relax! You're in better hands you hoped for.

The Rotation in Standard Coordinate System and in Ours - Tap/Click to Enlarge
The Rotation in Standard Coordinate System and in Ours - Tap/Click to Enlarge

First of all, lets start with the coordinate system presented on the image above. On the left, you see the 2-D standard coordinate system. And on the right, we have the coordinate system used in computers in general. The only difference is that, the y-coordinate origin is on the top of the screen, not on the bottom.

As for the rotation, a positive Θ angle is counter-clockwise. And in our coordinate system of computer graphics, a positive Θ angle is simply clockwise.

The reason is that: the angle is defined by the arctangent of the division y/x. And for counter-clockwise angles yield positive arctangent values. This is only for your information, you can skip it if you don't bother with trigonometry for now.

What is a Vector?

The definition of a vector changes insanely depending in which discipline you're in. We can define simply as:

A Vector is a quantity having elements of more than one dimensions. For example, a point on 2 dimensional space with x and y coordinates is simply a vector.

In this article, from now on, you can regard a vector as a point in 2-dimensional space. But remember that a vector can be an entity even with even thousand dimensions.

Our task is to obtain a rotated version of this vector according to the origin with an angle Θ. The rotation task is done via a transformation matrix such as:

Transformation Matrix of a Vector Rotation

Don't be intimidated with this matrix. It's much easier than you're afraid of. If you know your rotation angle Θ, everything will be solved simply. This is the standard rotation transformation matrix for a 2D vector. Using the non-standard coordinate system doesn't mean that we should use the modified versions of these matrices. Just keep in mind that, everything is same, only the y values are visually upside-down (not negative).

If you wonder, how this rotation matrix is derived, you can refer to this article. In fact, it's simply putting together all the trigonometric relations between the two coordinates (x and y) of the two vectors (initial and rotated).

Remembering the Matrix Multiplication

For those, who're not very familiar with the matrix operations, here's the matrix multiplication (the multiplication of two matrices) simply explained. This is the only matrix operation we'll need for vector rotation.

Matrix Multiplication

You cannot multiply all matrices with each other, the dimensions should fit. The number of columns of the first matrix, should be equal to the number of rows of the second matrix. In our example, we have a 2x2 transformation matrix, and a 2x1 vector. Which is OK to multiply. After this multiplication, we'll get a 2x1 vector. And remember that, matrix dimensions are displayed as rows x columns

The method is simple, you multiply the row of the matrix, with the column of the vector.

Now, lets use this method on our rotation matrix:

Transformation Matrix of a Vector Rotation for a 2D Point

Here, on the left-hand side of the equation, x' and y' are the coordinates of the rotated vector. The first thing you see on the right-hand side of the equation is our beloved rotation matrix; and the rightmost entity is the original vector with x and y coordinates.

The equations that yields the rotated vector (x', y' ) are as follows:

The Equations Derived from the Transformation Matrix

An Example

Lets go on with a simple example. As you see on the figure below, let's find the rotated value of the vector (564, 128) with an angle of 20o, with respect to the coordinate origin.

A Simple Vector Rotation Example - Tap/Click to Enlarge
A Simple Vector Rotation Example - Tap/Click to Enlarge

The angle Θ is 20o; so cosΘ is 0.94 and sinΘ is 0.34 approximately. Now let's put all these values into our matrix operation.

Populating the Transformation Matrix for our Example

From this matrix operation, we have two equations as I explained before. From now on, all the work is simple arithmetics.

The Result of the Equations for Vector Rotation

Finally, ve obtain the rotated vector as (486.64, 312.08).

As you noticed, the point (564, 128) is in fact (564, -128) according to the standard coordinate system. But we're using the non-standard coordinate system of computer graphics.

The Code

After all these mind-boggling matrices and equations, the code to rotate a vector is ridiculously simple. This is why most of the developers just prefer using the code, without learning the science beneath. This approach works most of the time, but does not help to create your own geometrical tricks, or to solve complicated problems.

If you don't understand the math beneath fully, you can't solve even the derivative problems; such as rotating a point around another point.

    public static Vector2 GetRotatedVector (Vector2 pos, float theta)
        float cosTheta = (float) Math.Cos(theta);
        float sinTheta = (float) Math.Sin(theta);

        float x = pos.X * cosTheta - pos.Y * sinTheta;
        float y = pos.X * sinTheta + pos.Y * cosTheta;

        return new Vector2(x, y);

This code is written in C# and based on Windows XNA Game framework. Besides coding for PC, XBox and Windows Phone; you can write iOS and Android games by using Xamarin Mono. Even if you use other coding languages and platforms, more or less, everything's nearly the same.

A Final Word

Learning trigonometry and linear algebra helps you to achieve wonders in your game. It may be hard at the beginning, but it will pay off eventually. Vector rotation is the first door opening to this magical world of wonders.

As further study, I recommend you to cover affine transformations, such as shearing, reflecting and projection; which you can start learning via Wikipedia: Transformation matrix.

Good luck     with the magical tricks that you imagine to implement.