I wrote a web program that can be used to play around with transformation matrices. It allows preset types and custom ones.
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.