A controlled trapezoid transformation with perspective projecton

Question

I'm trying to implement a controlled trapezoid transformation in Adobe Flash's ActionScript using the built-in perspective projection facility. To give you an idea of how the effect looks like:

https://i.stack.imgur.com/Pa1T0.jpg

I've been searching for a solution for a few days now and, apart from the tessellation alternative which produces poor quality results, no one has tried to employ perspective projection to achieve this effect. It's maybe because it requires solving some math, which is something I hope you could help me with.

So Flash uses a simple frustum model with a viewpoint, projection plane, and focal length, which is the distance from the viewpoint to the projection plane.

https://i.stack.imgur.com/1WmGa.jpg

There is also fieldOfView but it should be of no importance as its meaning appears to be overridden by focalLength (at least it's value makes no difference in my ActionScript experiments as long as the focal length is specified).

The rectangular piece of graphics is located right on the projection plane so that the middle point of its top edge is located in the projection center. To achieve the effect, the rectangle is rotated by some angle.

(Sorry, the forum wouldn't let me post more links to the drawings. Could anyone please edit it to put the last 2 imaged referred at the end of the source right here.)

<>

The question is, what should be the values of focal length and angle so that new height and new bottom width satisfy some given values that are desired for the effect? Or speaking mathematically:

Given:

• a frustum with focal length
• a rectangle with its width and height, which is pinned to the projection plane (z=0) of so that the midpoint of the rectangle's top edge is located right in the projection center of the frustum
• the needed new height and new bottom width of the rectangle after it's rotated and projected onto the projection plane

Unknowns to be found and applied to the perspective projection in order to get the desired new height and new bottom width:

• the focal length of the frustum
• the angle of rotation

If I missed out any other parameters or added any redundant ones, please correct me.

Also, is it possible to control the effect just by the angle with which the sides of the rectangle should be projected on the projection plane (the angle between the projected rectangle's side and its top edge) provided that the new height remains some constant value?

Answer 1

In a perspective projection, the projected size of any feature varies inversely with its depth (distance from the camera, measured along an axis through the center of projection). For instance an object twice as deep will appear half as large on-screen.

Because of this, you can work out the desired ratio of depths of the top and bottom edges of the trapezoid given the ratio of their lengths. If the top edge is half as long as the bottom edge, it must be twice as deep (given that they're really the same length in 3D space). If you've fixed the top edge at z = 0, you should be able to choose the depth of the bottom edge, and the focal length, to get the desired ratio of their depths. (Depth here is z + focalLength, according to your diagram.)

I would probably fix a standard value of focalLength, like 1.0, and calculate from that. Then you can do a bit of trigonometry to figure out the necessary vertical scaling and rotation to apply to your rectangle to manipulate it so that its bottom edge moves to the desired depth and height on screen.

(I suppose you could do it the way you suggested, by manipulating the camera's focalLength and the angle of the rectangle - but it seems much more natural to me to keep focalLength fixed and manipulate the angle and height of the rectangle.)