Introductory note:

This node covers the vector transformations used in

two dimensional graphics. Thus, it covers the topic from a

computer graphics point of view. It also assumes that the reader already understands

matrix operations.

**Translation**
Here, the result is x' and y'. The original

coordinates are x and y. The

shift is dx and dy. DM is short for 'doesn't matter'. It's just a place holder.

|x'| |1 0 dx| |x|
|y'| = |0 1 dx| * |y|
|DM| |0 0 1| |1|

This moves the point by dx on the x-axis and dy on the y-axis. Yes, this is a very simple transformation and could be said more easily as "x' = x + dx; y' = y + dy", but dealing with the

matrix will make more sense in a minute.

**Scaling**
Same

symbols as above, except sx and sy are the

scaling factors in x and y, respectively.

|x'| |sx 0 0| |x|
|y'| = |0 sy 0| * |y|
|DM| |0 0 1| |1|

This scales the point in respect to the

origin. If the scaling factor is greater than one, the point gets further away from the

origin. If the scaling factor is between zero and one, the point gets closer to the origin. This may seem like a much less controlled way of translating a point, but it's extremely useful when you want to

shrink or

stretch a collection of points. If you want to scale in respect to an arbitrary point, be

patient and read on.

**Rotation**
Same

symbols, except @ will serve as my

half-assed way of representing theta, the angle we want to rotate by.

|x'| |cos@ -sin@ 0| |x|
|y'| = |sin@ cos@ 0| * |y|
|DM| | 0 0 1| |1|

Rotation is @ degrees

counter clockwise, since

computer graphics uses a

right hand rule. Like

scaling, this is done about the

origin. Want to

rotate about an arbitrary point? Good, because we just arrived at that point!

**Combining Transformations**
This is where using

matices starts to make sense. Since all of the

transformations are 3x3

matrices, we can multiply them together and get a

composite matrix. Where this is immediately useful is when you want to

scale or

rotate around an arbitrary point. Lets say that the point we want to

rotate around is (px, py). If we

translate our point so that (px, py) is the

origin,

rotate, then

translate back, we have just rotated about (px, py). When we multiply the first translation matrix, the rotation matrix and the second translation matrix, we get a very ugly

matrix that allows us to rotate around a point. Once you've calculated that, you can do it without doing three

transformations every time.

If you would like to know a little more about the math behind this technique, I highly recommend reading

homogenous coordinates by

Gorgonzola.