9

Can anyone recommend some good starting points for understanding Transformation Matrices for dummies like me with poor math skills.

I'm willing to learn the math, and I'm not a complete idiot (I hope) but the examples I'm finding seem to require a huge leap from what I know, to what I need to know.

gargantuan
  • 8,888
  • 16
  • 67
  • 108
  • With application perspective? You building any application? – Guru Apr 23 '10 at 09:58
  • I'm trying to get to grips with CSS3 and webkits matrix3d transforms. http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/Functions.html – gargantuan Apr 23 '10 at 10:00

3 Answers3

19

I wrote a web program that can be used to play around with transformation matrices. It allows preset types and custom ones.

screenshot of transformation matrix program

Play with it online or grab the source.

It should be easy to play with the numbers and instantly see how it affects the house drawing. Look at the code available online to determine what it's doing, and you should be able to understand what's going on.

If you're having trouble, realise that the 3×3 matrix is simply being multiplied by each vertex (X & Y coordinate) in the house shape. Matrix multiplication with the vertex (we will now refer to it as a vector) and a transformation matrix looks like so...

1 0 0   1
0 1 0 * 2
0 0 1   0

On the left is an identity matrix (an idempotent matrix that doesn't affect the vector) and a vector of 1, 2, 0 (assume this maps to position X1 and Y2 in the program mentioned above's graph and ignore the final 0).

Matrix multiplication can be visualised like so...

a b c   x   a * x + b * y + c * z
d e f + y = d * x + e * y + f * z
g h i   z   g * x + h * y + i * z

So, in our example, that would be...

1 0 0   1   1 * 1 + 0 * 2 + 0 * 0
0 1 0 * 2 = 0 * 1 + 1 * 2 + 0 * 0
0 0 1   0   0 * 1 + 0 * 2 + 1 * 0

Do that math and we get the final vector...

1
2
0

Since we said our identity matrix shouldn't modify the values, we can see above that that is the case as the resulting vector matched the original.

To explain further, consider when you need to translate the vector. Let's say we want to translate the house by 5 pixels along the X axis. We want to start with the identity matrix, but change the top right number to 5 and make the extra dimension in the vector 1 (you will see why briefly).

1 0 5   1   1 * 1 + 0 * 2 + 5 * 1 
0 1 0 * 2 = 0 * 1 + 1 * 2 + 0 * 1
0 0 1   1   0 * 1 + 0 * 2 + 1 * 1

We do the math again...

6
2
1

We can see that the first number (X in our coordinates) has been translated along the X axis by 5. Try it in the program linked above.

The reason we made the third value 1 is so when the math was performed, the translation was considered. Had it been 0, it will be ignored, as any number multiplied by 0 results in 0.

If you're still having trouble, check out videos online (this one, for example) which can help explain it in a more visual fashion.

Remember: pretty much anyone can drive a car, and pretty much anyone can learn this, despite any self-evaluated poor understanding of math. Just keep at it: persistence is key. Good luck.

alex
  • 479,566
  • 201
  • 878
  • 984
8

Like duffymo has pointed out, Matrix Transformations is nothing more but (pre)multiplying a vector (like a 3d point) by a matrix. However, that is pure mathematics, and hard for some people to visualise.

The best way to understand transformation matrices (at least for me) is to get an example code, get it running, and play around with the numbers. Try to see if you can place an object farther away, or rotated by 45 degrees. Try putting the transformations in different order and see what the results are.

All working? Good.

Once you get a feel of that, and if you're brave enough to tackle the maths, you could take these steps:

First, understand how matrix multiplications work. Some links:

Once you are comfortable with multiplying a matrix by hand, you will get a feel of why transformations are written that way. As you use them, the understanding of matrices will eventually come to you.

Secondly, I always recommend spending an afternoon trying to implement your own Matrix class and define a few common operations like mul(Vector v), transpose() or even createTranslationMatrix(float x, float y, float z). Put in a few tests and see if the results are the same with what you did by hand.

If you've come that far, try implementing your own Perspective Transformation! It's the most amazing thing we never come to appreciate. A useful explanation here:

You will be very proud of yourself once you have accomplished one of the most labourous, yet under-appreciated tasks of implementing a matrix object. Good luck!

Xavier Ho
  • 17,011
  • 9
  • 48
  • 52
6

A transformation is nothing more than a matrix multiplying a vector to produce the transformed vector, so if you don't understand matrix multiplication and addition you can't get very far.

Start with matricies and linear algebra. There are lots of books out there, but realize that based on the statement that I made above you don't need to read that whole book. You won't need eigenvalues or Gaussian elimination or vector spaces or any of the other stuff that will be advanced and difficult.

You just need to know how to extend what you know about multiplying and adding numbers to matricies.

Getting the entries in that transformation matrix is another matter altogether. You'll need a good book on mathematics and computer graphics. You won't find that in a linear algebra textbook.

duffymo
  • 305,152
  • 44
  • 369
  • 561