display | more...
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.

Log in or register to write something here or to contact authors.