Bitmap Fills oriented for Isometric Projection

Thursday, December 4, 2008 by jusopi 1 Comment

Notes to self…

Given an image suitable for use as a bitmap fill, certain matrix transformations need to be done in order to orient the image to the xy, xz, and yz planes in the xyz octant.  Assume the following octant orientations:

Here are the following matrix tranformations:

• XY plane orientation – this is the equivalent to rotating the image by 45º and then reducing the height by half the original scale.
  

  var m:Matrix = new Matrix();
m.rotate(Math.PI / 4);
var m2:Matrix = new Matrix();
m2.scale(1, 0.5);
m.concat(m2);

• XZ plane orientation – this is simply skewing the image in the flash-based coordinate system along the  y axis.  Since most isometric projections (including the as3isolib) use a 2:1 ratio, we use Math.atan(0.5) rather than Math.PI / 6.
  

  var m:Matrix = new Matrix();
m.b = Math.atan(0.5);

• YZ plane orientation – same as the XZ plane however we use the skew value * -1;
  

  var m:Matrix = new Matrix();
m.b = Math.atan(-0.5);