Determine height/width of rectangle in perspective

Question

I have the following situation. I've got a 2d plane in which I have drawn a rectangle (red). This is done by picking a point (big red dot), and using the vanishing points calculated by some other lines on the image, and a set width/height of the rectangle to calculate the other 3 points. This part works fine.

Now, I when I select another point (big blue dot), I can calculate the other points as well, I'm just stuck on getting the width/height to transform correctly. Currently, they are the same as the red rectangle, which is obviously wrong (blue rectangle) since they should be smaller closer to the vanishing point (green rectangle is the way I need it to be).

The image below is a sketch of my current situation.

I know the coordinates of some intersections on parallel lines in the plane (green dots), so I thought I could do some calculations with that (ie. you know the difference of the length of the horizontal lines in relation to the y-shift?), I just can't figure out the correct formula, should be something like a natural logarithm? (since the width/height should decrease exponentially i think as they approach the vanishing point?).

Note: I'm using a right handed coordinate system (my origin is at the top left corner, and the y-axis runs downward).

Thanks,

Updated situation with Paul Hanson's solution:

Answer 1

Consider that your rectangle drawn with perspective (using a vanishing point) forms a triangle when the sides are extended to the vanishing point. If you move your rectangle closer to the vanishing point the resulting triangle is similar to the original one. So the "rectangle" after moving it will be similar to the original. The distance from the front edge of the rectangle to the back edge will change as the rectangle moves based on the similar triangle calculation.

So the distance from the vanishing point scales things. Let $\left(x_v,y_v\right)$ be the screen coordinates of the vanishing point. Let your first (blue) rectangle have vertices $A_1,B_1,C_1,D_1$ and the second rectangle have vertices $A_2,B_2,C_2,D_2$ where $A_1$ corresponds to $A_2$ and so on. If you set the screen coordinates of $A_1$ to $\left(x_{a1},y_{ab1}\right)$, $B_1$ to $\left(x_{b1},y_{ab1}\right)$, $C_1$ to $\left(x_{c1},y_{cd1}\right)$, and $D_1$ to $\left(x_{d1},y_{cd1}\right)$ and if you choose the screen coordinates of $A_2$ to be $\left(x_{a2},y_{a2}\right)$ then calculate the screen coordinates of $B_2$ like this:

$x_{b2}=x_v+\left(x_{b1}-x_v\right)\frac{y_{a2}-y_v}{y_{a1}-y_v}$

$y_{b2}=y_{a2}$

The coordinates of $C_2$:

$x_{c2}=x_v+\left(x_{c1}-x_v\right)\frac{y_{a2}-y_v}{y_{a1}-y_v}$

$y_{c2}=y_v+\left(y_{cd1}-y_v\right)\frac{y_{a2}-y_v}{y_{a1}-y_v}$

And the coordinates of $D_2$:

$x_{d2}=x_v+\left(x_{d1}-x_v\right)\frac{y_{a2}-y_v}{y_{a1}-y_v}$

$y_{d2}=y_v+\left(y_{cd1}-y_v\right)\frac{y_{a2}-y_v}{y_{a1}-y_v}$

If you prefer to start with $\left(x,y\right)$ coordinates in the "real" $x$-$y$ plane and project them onto your screen coordinates then the problem is to find 2 functions that take $\left(x,y\right)$ to the screen coordinates $\left(x_s,y_s\right)$. That is a problem in differential equations.

Clearly from the similar triangle analysis:

$\frac{dy_s}{dy}=k_y\left(y_s-y_v\right)$

$y_s=y_v+C_ye^{k_yy}$

and:

$\frac{dx_s}{dx}=k_x\left(y_s-y_v\right)$

$x_s=C_x+k_xC_ye^{k_yy}x$

To make this work you must choose the screen coordinates of the vanishing point $\left(x_v,y_v\right)$ and the screen coordinates of the origin of your "real" $x$-$y$ plane $\left(x_0,y_0\right)$.

When $x=0$:

$x_s=C_x=x_v+\left(x_0-x_v\right)k_xC_ye^{k_yy}$

To make $x_s=x_0$ when $y=0$ we set:

$k_x=\frac{1}{C_y}$

So:

$C_x=x_v+\left(x_0-x_v\right)e^{k_yy}$

When $y=0$:

$y_s=y_0=y_v+C_y$

$C_y=y_0-y_v$

So the final formulas are:

$x_s=x_v+e^{k_yy}\left(x_0+x-x_v\right)$

$y_s=y_v+\left(y_0-y_v\right)e^{k_yy}$

Where $k_y$ is a scale factor that you can adjust to make the coordinates in the "real" $x$-$y$ plane map to the screen coordinates so everything fits on the screen.

Answer 2

Your problem is very similar to projecting a skyscraper onto a projection screen (green line in the diagram), the difference being that your rectangles represent the sides of the building. Notice how the intersections of the black lines of sight with the projection screen become closer and closer as you move down the building. Also note that everything on the top of the building is to scale (because it touches the projection screen and there are no left and right vanishing points). One final point, when looking straight down, the line of sight intersects the projection plane at the vanishing point.

I realize that this write up isn't an answer, but I do hope that it give some clues as to the way forward. :)

Answer 3

I think I solved it myself, with some help from the answer by Paul Hanson.

The new banner height is equal to the banner height of the first banner, times the difference in y coordinates of the first and second point. Same goes for the width.