Formula to Mimic 3D Distance in 2D Space?

Question 1

In Monkey Island the backgrounds are 2D images with varying degrees of perspective. How a character is scaled depends on the perspective of the background. In some scenes the character only moves across the screen and so no change of scale is needed for the character. In some the character may move down a street and there is a high level of perspective. In some the character may move within a room and there is a small level of perspective.

Calculations regarding the scaling of the character needs to be calculated for each background scene. Perspective lines need to be drawn on the background and lengths measured.

The two examples below show how the scale for the character could be calculated.

In each case the scaling is based on the character as it is currently positioned on the screen. The variable y is a measure of how far the character is from its SMALLEST size position in the vertical direction. The variable h is a measure of the change in height of the character depending of y.

In the room scene the scale is > 1 since the character is currently at the back of the scene.

In the street scene the scale is < 1 since the character is currently at the from of the scene.

Triangular diagrams NOT to scale

room scene

enter image description here

Question 2

I'm not sure what a DIV (I have no JavaScript experience) is but these links may help.

Perspective Projection
Walks you through the math used in perspective projections and includes some sample code (not JavaScript however).
3D Perspective Projection
Another page on perspective projection, with example code in C++.

Question 3

I would do it like this:

projection

// equation for objects appearing the same size
h=d*tan(α)

// now the scaling the size for arbitrary object
scale       d        h
1.0        d0       h0  // object with no scaling 
0.5   2.0*d0       h0  // half size
0.25  4.0*d0       h0  // quoter size
0.5        d0 0.5 *h0
0.25       d0 0.25*h0

// so scale is:
scale = (d0/d)*(h/h0)  // or 
scale = (d0*h)/(d*h0)

set d0,h0 constants according to your view
d0 controls the magnification and h0=d0*tan(α)

If your camera has different view angle between axises then you have to apply two scaling factors

one for x axis and one for y axis
computed in the same way, but different angle used
d0 would be the same for both

Usual camera view angles in 3D are 60 or 90 degrees but in this case I would use 30 degrees

if you also view the underground then 60 with camera axis on the ground

Question 4

In a true perspective projection, the scaling factor is given by S(D) = Df / D, where Df is the depth from the viewer to the full-size object and D the current depth.

For example, if a character is 40 pixels high and 16 large when seen in the foreground (assume 3m from the viewer), it will be 20 by 8 pixels at a depth of 6m and 10 by 4 at 12m.

Closer than the reference distance will result in magnification (80 by 32 at 1.5m).

[If your objects are located with (X, Y, Z) coordinates, X horizontal, Y vertical, Z perpendicular to the screen, pointing to the back, and is 0 at the depth of the screen, you have D = Z + Df and S(D) = Df / (Df + Z).]

Question 5

Since you are talking about transforming a DIV then you should see CSS transforms. There are 2D transforms and 3D transforms. Keep in mind about the perspective attribute too ;)

Here you can find some examples: