# Matrix Magic

For a flash game project at work I needed to setup a

*flash.geom.Matrix*instance to transform points from cartesian space into an isometric perspective.To get it working I had to answer three questions:

*1. How do the properties a, b, c, d, tx and ty map to the coefficients of the matrix?*

*2. How to use the matrix to transform a Point?*

The Matrix class provides two methods to transform a point.

**deltaTransformPoint**transforms a point without applying the translation.

1 2 |
x' = a * x + c * y; y' = b * x + d * y; |

**transformPoint**transforms a point including the translation.

1 2 |
x' = a * x + c * y + tx; y' = b * x + d * y + ty; |

If you know the mapping of coefficients and a bit of computer graphics that’s the expected behavior. To be able to multiply a 2D vector with a 3D matrix you introduce an extra 1 as 3rd component. Then perform a matrix multiplication. That way the transformation is added to x and y after the rotation/sheering is done.

*3. How to setup the matrix to get the desired transformation?*

If none of the provided methods fits your need (like in my case) you can set the correct values for the coefficients directly. That’s easier then it sounds. Look at the basis vectors of your source coordinate system and imagine (or calculate) how they look like after the transformation. Assign coefficients

If you need it you can set

**a**the*x*and**b**the*y*value of the transformed x-axis. Assign the x and y value of the transformed y-axis to**c**and**d**.If you need it you can set

**tx**and**ty**to move the transformed points relative to the new origin.*And why do I blog about math, now?*

Adobe managed to have a

**incorrect**illustration of the layout of the coefficients in the german doc (english docs happen to be correct!) and the inscrutable description of the**transformPoint**and**deltaTransformPoint**methods lacked the specifics I needed. Let’s hope this post and the power of google will help those, that seek the same kind of knowledge!
No comments yet