Monday, January 23, 2012

Rotation Matrices for developers


So, why the heck would you care about Rotation matrices?

Well, a rotation matrix is a "easy" (once you're used to it) way to specify how to rotate a certain plane with reference to the origin, so, if you're doing any kind of graphics programming (WebGL is all the rage these days), you should know this stuff pretty well.

First of all, what's a matrix?

A matrix, despite how complicated it sounds, is JUST a collection of data. Developers know that better than most, since many of us use two dimensional arrays all the time, and call them matrices, but, many times we don't really do any "proper" math with them.

So, if its just a collection of data, why's it useful? Well, the idea is that if you are able to lay out your data in a sort of a table form, it makes it much easier to reason about mathematically, because you can consider rows and columns in different ways.

One very important thing to realize about matrices is that if someone gives you this matrix:

1& 1 & 0 \\
1 & 2 & 2 \\
2 & 3 & 1 \end{array}$

You can't assume anything about it (except for a couple of very unhelpful things, like you can consider it in rows and columns), so, you must have some idea about what the matrix is about. For example, this one could be a group of simultaneous equation's coefficients.

You might have noticed that so far I haven't really explained how a rotation matrix actually works.

Before I begin, you should have a basic understanding of vectors, which are incredibly simple (just an arrow, with a point at the head and another at the tail).

Basically, what does rotation actually mean? It means that we're taking vectors on a plane, and we're moving them so that they represent different vectors (as if we rotated the plane itself).

Now, take a step back, and pretend as if, instead of moving about the vectors, we are rotating the plane in which they reside. A bit like this:

(That took me almost an hour to make, so be grateful!)

Where the red axes are that of the rotated plane.
So, how do the values map out?

What I'm asking is if we take an arbitrary point $(x,y)$ and then we rotate it about the origin by some angle $\theta$, what will the new point be, in terms of $x$ and $y$? Diagrams always help:

As you can see the original point is $D$, which have rotated around the origin ($E$) by a certain angle $\angle FED$ to the point $F$.

So, lets say that $D$ has the coordinates $(x, y)$, and we're trying to find $F$ in terms of $x$ and $y$.

Some immediate conclusions (since $D = (x, y)$):

$DH = y$
$EH = x$

To make our lives easier (mostly my life easier) let's give the angles some symbols:

$\angle{DEH} = \phi$
$\angle{FED} = \theta$

And, since we are rotating about the origin, these must be true:

$EF = ED$
Let $EF=ED=r$

So, considering $\triangle{FEG}$, we can say:

$\cos{FEG} = EG/EF = EG/r  ... (1)$
$\sin{FEG} = FG/EF = FG/r   ... (2)$

Notice that $EG$ is the $x$ coordinate of $F$ and $FG$ is the $y$ coordinate of $F$, which is what we've set out to find. 

And, we notice this:

$\cos{FEG} = \cos{\theta+\phi} = \cos{\theta}\cos{\phi}-\sin{\theta}\sin{\phi} ... (3)$
$\sin{DEH} = \sin{\theta+\phi} = \sin{\theta}\cos{phi}+\sin{\phi}cos{\theta}    ... (4)$

Equating (1) with (3), and (2) with (4):

$EG = r(\cos{\theta}\cos{\phi}-\sin{\theta}\sin{\phi})$
$FG = r( \sin{\theta}\cos{phi}+\sin{\phi}cos{\theta})$

Now, we simplify using the simple idea that $\cos{\theta}*r = x$ and $\sin{\theta}*r = y$,

And, we get:

$EG = x*cos{\phi}-y*\sin{\phi}$
$FG = y*\cos{\phi}+x*\sin{\phi}$

And, that's what we wanted!

You might be wondering: "What does this have anything to do with matrices?"
If you weren't thinking about that, please pretend you were at this point.

So, in the equations that we found above, the only parts dependent on $\phi$ (the angle by which we rotate) are the trig functions, so, what if we just represented them separately and then we'd be able to concisely represent all kinds of rotations on a plane?

Basically, what we're doing this this:

$\text{Rotated vector} = \text{Some witchcraft}\cdot \text{Initial vector}$

So, in a bit clearer terms:

$\begin{array}{cc} x' \\ y' \\ \end{array} = \text{Some witchcraft} \cdot \begin{array}{cc} x \\ y \\ \end{array}$

(where the columns of numbers are vectors, I can't get the brackets to display, sorry)

That $\text{Some witchcraft}$ is a matrix!

And, that's because matrix multiplication is defined in such a way that we can multiply a matrix and a vector together, and get equations resembling those that we got for $EG$ and $FG$!

That right there is the matrix we use (pretend that the $\theta$ is actually $\phi$), and we multiply that with the $<x, y$ vector to get the equations we got for $EG$ and $FG$, because matrix multiplication is defined that way! 

You might think this is all a "rigged game", and it is, but, the amazing thing is, despite this seemingly arbitrary operation of matrix multiplication, it works in all kinds of different places, because it is based one of the most important computations in mathematics, known as a linear combination

And, matrices are used EVERYWHERE!

From analytic geometry to simultaneous equations to economics and game theory, and that's mostly because of the fact that you are allowed to make any assumptions about the data you would like, and idea of matrices allow you to perform on math on that data with a few constructs that applicable pretty much anywhere.

I would love your feedback on this article, and ideas for new ones!

If you like this, please consider following this blog, it gives me motivation to keep writing blog posts, and you'll be notified as soon as a new one comes out.

For the people who like the abstract algebra series, I took a little break from it because I was a bit bored with it, and I couldn't think of the next topic easily. 

I'd be happy to answer questions, so, you can put them in the comments section below (I'll usually respond immediately), or email me at dhaivatpandya AT g m a i l DOT com.

And, just before I close, I'm doing a startup called NimbleNotes, which allows to write productively (this blog post was written entirely with NimbleNotes), and currently is in closed beta, with an IndieGoGo project.

Have a nice day :)


  1. Whoever cretel is, thanks a ton for the feedback, and I'll try working that in.

    I'd never thought of matrices like that; one thing I can think of is that one can animate polygonal models.

    BTW, your email was @localhost so I couldn't reply to it.

  2. It's never too lately to meliorate your information and your listing has me.

  3. ishq pakeezah mp3 download,mera ishq hai pakeezah mp3 song,ishq pakeezah ringtone download,punjabi gane video,ishq pakeezah video Online,mera ishq hai pakeezah mp3 song,ishq pakeezah lyrics,ishq pakeezah punjabi song,sad song vich.ishq pakeezah video of Indian Serials Online Free. Watch Full Episodes of Star Plus, colors TV, Zee TV, Sony TV.

    Ishq Pakeezah

    Drama cool

    Drama cool