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.

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.

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:

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)*.

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.

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 **2**x**2** transformation matrix,
and a **2**x**1** vector. Which is OK to multiply.
After this multiplication, we'll get a **2**x**1** 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:

Here, on the left-hand side of the equation, **x ^{'}** and

The equations that yields the rotated vector (**x ^{'}**,

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 **20 ^{o}**,
with respect to the coordinate origin.

The angle **Θ** is **20 ^{o}**; so

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

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.

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.

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.

© Copyright 2014 Little Shop of Adventures