I need help with that "fake" perspective transformation jazz ...

[GabeLaneG]

Basically that method of fitting a bitmap texture onto a parallelogram, by splitting the parallelogram into two triangles and skew/shearing the two separate copies of the texture to be lined up with it's respective triangle.

Senocular wrote a pretty good tutorial on it, but I'm stuck on some little details and or conceptual stuff, I'm not sure. Yeah, I'm actually pretty confused. lol

First question, in the transform matrix, the b and c multipliers (skew and shear), what does it mean exactly? I played around with it and found that shearing by a factor of one, the angle formed by the slope (the slope of the two top or bottom 'points') of the shape was 45˚. So, 1 = 45; 0.5 = 22.5, etc. Am I on the right track or was the 45 angle observation just a coincidence? If so, how exactly do I find the skew factor?

I'll probably have more questions later on, but I can't think of them at the moment ...

[GabeLaneG]

Alright, so I played with it a little longer and did some more research and realized I was making this much more complicated than it actually is. Not only that, the formulas for doing this kind of perspective are regularly available if you look, although I felt kind of dirty copying and pasting.

I think I'm starting to get the hang of it, I'm just now having trouble getting the texture to align right.
SWF link... (use arrow keys to change perspective)

Some (pretty messy) code:

point1X = Point1Scan;
point1Y = 100-((200-Point1Dist)/2);
point2X = Point2Scan;
point2Y = 100-((200-Point2Dist)/2);
point3X = Point2Scan;
point3Y = 100+((200-Point2Dist)/2);
point4X = Point1Scan;
point4Y = 100+((200-Point1Dist)/2);
matrixtest = new Matrix();
height1 = 100;
width1 = 100;
matrixtest.tx = point1X;
    matrixtest.ty = point1Y;
    matrixtest.a = (point2X-point1X)/width1;
    matrixtest.b = (point2Y-point1Y)/width1;
    matrixtest.c = (point4X-point1X)/height1;
    matrixtest.d = (point4Y-point1Y)/height1;
    _root.Render.test.beginBitmapFill(Tex1, matrixtest, false, false);
    _root.Render.test.moveTo(point1X, point1Y);
    _root.Render.test.lineTo(point2X, point2Y);
    _root.Render.test.lineTo(point4X, point4Y);
    _root.Render.test.endFill();
    matrixtest = new Matrix();
    matrixtest.tx = point2X;
    matrixtest.ty = point2Y;
    matrixtest.a = (point4X-point2X)/width1;
    matrixtest.b = (point3Y-point2Y)/width1;
    matrixtest.c = (point3X-point2X)/height1;
    matrixtest.d = (point4Y-point2Y)/height1;
    _root.Render.test.beginBitmapFill(Tex1, matrixtest, true);
    _root.Render.test.moveTo(point2X, point2Y);
    _root.Render.test.lineTo(point3X, point3Y);
    _root.Render.test.lineTo(point4X, point4Y);
    _root.Render.test.endFill();

What my texture is supposed to look like ...


I think I might be able to figure this out myself, but any input is welcome, even if it's just berating me for something silly.