Affine transformation matrix offset

Question

This has been killing me the last few days. Not even kidding, but I've been really stressing over this trying to solve it.

I am currently trying to use affine transformation matrices to create an isometric projection in HTML5. I receive a tile which is a square that is rotated 45 degrees (essentially a square diamond on a square canvas). I then scale one of the axis' depending on if the there is a delta in the x or y direction. I then skew the axis by a factor to fit. Then, I negate the initial rotation by rotating it back by -45 degrees.

Currently, my affine matrix is:

      // note: the difference in z is about 10 in this example,
      //       so, xDiff is usually 40
      var xDiff  = 4 * (center.z   - map[x+1][y].land.z);
      var yDiff  = 4 * (center.z   - map[x][y+1].land.z);

      var matrix = multiplyAll(
        // Rotation
        [COS45,  SIN45,
         -SIN45, COS45],

        // Scale in each respective axis
        [(44+yDiff)/44, 0,
         0, (44+xDiff)/44],

        // Skew each axis
        [1,  -yDiff/(44+yDiff),
         -xDiff/(44+xDiff), 1],

        // Negate the rotation
        [NCOS45, NSIN45,
        -NSIN45, NCOS45]
      );

Then I draw it using:

      // the map has its own x & y values which directions are determined by the red x & y arrows in the picture
      // pX & pY are the point relative to the canvas origin
      var pX = x * 22 - y * 22 + 22;
      var pY = y * 22 + x * 22 - 22 - (center.z * 4);
      context.setTransform(matrix[0], matrix[1],
                           matrix[2], matrix[3],

                           300, 100);

      //m_Context.drawImage(image, pX, pY);
      drawDiamond(pX, pY, true); // draws a 44x44 diamond

As you can see, the transformed matrices are being drawn with respect to the transformed x-axis (I think the "new" x-axis has a slope of yDiff/44). I'm not sure how to draw the shapes so that the transformed result will be in the correct position. Using pY = x * 22 - (yDiff/10); seems to get the point closer, but I pretty much guessed it by plugging in random numbers.

tl;dr:

• I performed a transformation
• I have a coordinate where a tile should be (if it wasn't transformed)
• How to I calculate the offset required so that a transformed tile's coordinate is the same as where it should be if it was not transformed?

PS: The weird diamonds on the bottom can be ignored for now since they can correctly be created ONCE I find out how to calculate the offsets.

Answer 1

An affine transformation matrix ([a b c d e f]) expresses the two equations

x' = ax + cy + e
y' = bx + dy + f

So, you can use the offsets e and f to bypass the scaling and skewing parts (the 4x4 linear transform embedded in the 2x3 or 3x3 matrix).

This is used a lot in postscript programming, where the coordinates used for drawing an object are relative to a local origin. If you're concatenating matrices, do the translation before scaling and skewing and the e and f values will remain unmolested.