# How do you use the matrix object to transform a triangle to 3 target points?

I’m still tyring to get a grasp on some 3d rendering techniques, a big thankyou to all who have helped already (via replies or other threads I’ve read).

I’ve been using the drawing API with good rendering results but slow rendering times, so I want to start using bitmaps. I’ve been using quads, and the only way I can think of to render them with bitmap.draw() is to split them into triangles and use a matrix object to transform them appropriately.

So I create two bitmaps, topLeft and bottomRight, with the appropriate triangles drawn in them at 100x100. (I hope to have this be the only time the drawing api is used, draw the triangles in mc then draw to bitmap).

I’ve been experimenting with the matrix object, and am close, but I’m having difficulty transforming the triangle to the three target vertices. I’ve spent a couple of hours googling it, and I’ve found tons of tutorials/articles on how to transform a random triangle to a right triangle for distortion effects (sandy etc), but I need the reverse. I’m thinking I may need to apply multiple matrix transforms instead of doing it in one matrix object, but I’m not sure.

So, given four points and the two triangles mentioned, how do you use the matrix object to rotate, scale, and skew properly to acheive the target vertices? Here’s where I’m at now:

``````createEmptyMovieClip('tl',_root.getNextHighestDepth());
with(tl){lineStyle(1,0x000000,0);beginFill(0x00ff00);lineTo(100,0);lineTo(0,100);lineTo(0,0);endFill();}
var topLeft=new flashBitmapData(100,100,true,0x00000000);
topLeft.draw(tl);
removeMovieClip(tl);

createEmptyMovieClip('br',_root.getNextHighestDepth());with(br){lineStyle(1,0x000000,0);beginFill(0x00ff00);moveTo(100,0);lineTo(100,100);lineTo(0,100);lineTo(100,0);endFill();}
var bottomRight=new flashBitmapData(100,100,true,0x00000000);
bottomRight.draw(br);
removeMovieClip(br);

var fieldMap=new flashBitmapData(Stage.width,Stage.height,true);
createEmptyMovieClip('field',_root.getNextHighestDepth());
field.attachBitmap(fieldMap,field.getNextHighestDetph());

// startx,starty = upper left point
// nextX,nextY = upper right point
// nextBx,nextBy = lower right point
// BX,BY = lower left point
topLeftMatrix = new flashGeomMatrix( (Math.max(nextX,nextBx)-Math.min(startx,BX))/100, (Math.max(BY,nextBy)-Math.min(starty,nextY))/100, (startx-BX)/100, (Math.min(nextY,starty)-Math.max(BY,nextBy))/100, startx, starty );
fieldMap.draw(topLeft,topLeftMatrix);
bottomRightMatrix = new flashGeomMatrix( (Math.max(nextX,nextBx)-Math.min(startx,BX))/100, (BY-nextBy)/100, (nextX-nextBx)/100, (Math.min(starty,nextY)-Math.max(BY,nextBy))/100, startx, starty );
fieldMap.draw(bottomRight, bottomRightMatrix);

``````