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.