Graphics Help!

I need to apply some sort of transformation matrix to convert a rectangle as shown here:

The web is full of examples that show rotation, translation, and scaling. But I’m not sure how to do the above transformation, or even what it is called.

Can someone help me figure this out? Maybe just point me to a web page that shows some example equations along with a few pictures. The Wikipedia Transformation Matrix article shows a lot of the math, but without pictures, I’m not sure which of the equations are applicable.


Charlie Knudsen Says:

Not sure if this will help, but seems to do something similar in flex. I believe the source is available as well.
http://www.quietlyscheming.com/blog/components/tutorial-displayshelf-component/

Hope that helps.

Rytmis Says:

A quick search confirms my initial suspicion — that’s called a perspective transformation. See for example this: http://zrusin.blogspot.com/2006/09/perspective-transformations.html .

bryanmanwaring Says:

Rytmis is correct. It is called a perspective transform. There may be simpler equations for doing a simple rectangle from a normal 2d plane into a 3d plane, but maybe not. I am no math major, but I have had occasion to need to map one quadrilateral onto another one. Essentially define a transform that maps a rectangle defined by 4 points onto other one defined by a different set of 4 points (where the plane of the rectangle in perspective is not necessarily in the standard 2d plane).

Here are a couple of papers that talk about the transforms:
http://alumni.media.mit.edu/~cwren/interpolator/
http://torus.untergrund.net/misc/projective_image_warping.pdf

Good luck. I remember it being a bit of work to figure out (but then, I’m no math genius).

lumpynose Says:

It’s probably a matrix multiplication. Each of the 4 points (the 4 corners) has an (x, y, z) coordinate in 3d space. You want to “transform” it by doing a matrix multiplication on each of the 4 points; for example, a rotation around the line that runs through the left 2 points. The matrix you use to transform it depends on the type of transformation; rotation, scale, translate (move). The (x, y, z) coordinates of each point will also be a matrix, a 3×1 matrix. The transformation matrix you multiply by I think will be 3×3. Do a search on matrix multiplication; it’s not complicated. Then do a search on transformation matrices for 3d.

lumpynose Says:

http://en.wikipedia.org/wiki/Transformation_matrix

The See Also links at the bottom look good as well.

Subrat Says:

That is perspective projection. The basic effect is objects farther from you(the projection screen) appear smaller. To understand how it works, you need to understand homogenous coordinates and the basic idea behind 3D to 2D projection.

http://en.wikipedia.org/wiki/Transformation_matrix#Perspective_projection

EGHM Says:

The book “Beginning Math and Physics for Game Programmers” might help. Chapter 6 Transformations has code for X,Y, and Z translations.

Rob Says:

If you just want to change the image of a rectangle try the GIMP, I did something similar with photos of tall buildings recently when stitching two together.

Nathan Curtis Says:

If you’re rendering in a system with 3D matrices, you can cheat (well, not really chat – this is the same as what the more technical posts above propose) and just rotate the object about the Y axis.

It looks like you want to rotate all your point around the Y axis.

The Y rotation matrix is:

[cos 0 -sin]
[0 1 0 ]
[sinbeta 0 cosbeta]

You need to multiply each of the 4 points to rotate your entiere quads, so for each x,y,z: Do the following:

float tmpX = x;
x = x * cos(radiansangle) – z * sin(radiansangle);
z = tmpX * sin(radiansangle) + z * cos(radiansangle);

Arg, can’t edit: (my url is broken and there is erros in my stuff)

It looks like you want to rotate all your point around the Y axis.

The Y rotation matrix is:

[cos 0 -sin]
[0 1 0 ]
[sin 0 cos]

You need to multiply each of the 4 points by the Y rotation matrix in order to rotate your entiere quads, so for each x,y,z, do the following:

float tmpX = x;
x = x * cos(radiansangle) – z * sin(radiansangle);
z = tmpX * sin(radiansangle) + z * cos(radiansangle);

If you work with a 2D applications, it will probably won’t do the perspective for you and the result will look like a “compressed” image on the X axis you will have to do the projection transformation yourself. Hopefully, you are on JOGL or LWJGL ;) !