If we project our rectangle onto the new view plane without the distortion for perspective, the formulas and the corresponding 3D picture are as follows:
(The projection is the rectangle in black.) As we see, if we project without the distortion for perspective, the projected figure on the view plane (that is your computer screen) is a rectangle. In general, should the vertical angle, phi be not constant at 90 degrees, the projection is a parallelogram. That is because both change of coordinates and the projection are linear transformations so a rectangle will be mapped onto a parallelogram.
This is not the case if we project with distortion for perspective. The projection formula (no longer linear as pnewx is not constant) and the picture in 3D look as follows:
(fLen is a distortion constant whose value you can choose to create more or less distortion.) The projection onto the view plane is a trapezoid and thus not a linear image of our rectangle.
Our last step consists of transforming our rectangular image onto the figure obtained by the projection. If the figure is a parallelogram, the transformation can be accomplished easily using displayObject.transform.matrix property.
The following code will give you the right transform matrix that transforms the bitmap onto the parallelogram. (Assume the image is called 'myBitmap').
var finMatrix:Matrix=new Matrix((v1[0]-v0[0])/picWidth,(v1[1]-v0[1])/picWidth,
(v3[0]-v0[0])/picHeight,(v3[1]-v0[1])/picHeight,0,0);
var transMatrix:Matrix=new Matrix(1,0,0,1,v0[0],v0[1])
finMatrix.concat(transMatrix);
myBitmap.transform.matrix=finMatrix;
For a discussion of transform matrices and the Matrix class, see the tutorial: Rotating Bitmaps in 3D in Flash CS3, 3D Menu on a Cube in ActionScript 3.
What if want distortion for perspective? One way is to divide our bitmap and the trapezoid into small rectangular or triangular pieces. Within each piece, pnewx (which makes the transformation not linear) changes but if the pieces are small, it changes only a little. So we can assume that pnewx is constant over each piece. In that case, the projection of each of the pieces onto its counterpart within the trapezoid is linear and can be accomplished by the code like the code above. In general, we may have to consider really fine divisions, with many pieces, to obtain smooth looking results. Note, however, that in our case pnewx=sin(theta)*py (see formulas on the previous page). Thus, pnewx is constant where py is constant; that is, along vertical slices of our rectangular images. Therefore, it is enough to divide our rectangle into vertical slices and map them linearly onto the slices of the trapezoid corresponding to each view angle theta. (On the picture below, we use a different image than our playing card but the idea is the same.)
Download
- Download the Flash CS3'fla' file for our applet: card_flip.fla
If your are interested in how the card flip looks without the perspective distortion, here is the fla file without perspective.
- Download the Flash CS3 'fla' file: card_flip_no_persp.fla
The code is simpler but the result is much less compelling.
On the next page we comment on the code.
