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

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

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 ...
Last edited by GabeLaneG; March 29th, 2012 at 02:48 PM. Reason: post screw up

2. 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:
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.

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•