Skip to main content

Determine Perspective Lines With Off-page Vanishing Point



In perspective drawing, a vanishing point represents a group of parallel lines, in other words, a direction.

For any point on the paper, if we want a line towards the same direction (in the 3d space), we simply draw a line through it and the vanishing point.


But sometimes the vanishing point is too far away, such that it is outside the paper/canvas.

In this example, we have a point P and two perspective lines L1 and L2.

The vanishing point VP is naturally the intersection of L1 and L2. The task is to draw a line through P and VP, without having VP on the paper.


I am aware of a few traditional solutions:

1. Use extra pieces of paper such that we can extend L1 and L2 until we see VP.
2. Draw everything in a smaller scale, such that we can see both P and VP on the paper. Draw the line and scale everything back.
3. Draw a perspective grid using the Brewer Method.

#1 and #2 might be quite practical. #3 may not guarantee a solution, unless we can measure distances/proportions.

Below I'll describe a method I learned in high school. It was more of a math quiz than a practical drawing method though, but it is quite fun.

To make it more complicated, there is an extra constraint for the drawer: you can only draw with a ruler without measurements, that is you can draw a straight line between two given points (assume that the ruler is long enough),  but you cannot measure lengths or angles. You can not find middle points either (e.g. by folding the paper).

Here we go:


Step 1:

Draw two lines through P, cutting L1 and L2 at A1, A2, B1 and B2.

Step 2:

Draw two lines (A1, B2) and (A2, B1).
Find the intersection point Q.

Step 3:

Draw a line (Q, P), cutting L1 and L2 at A3 and B3 respectively.

Step 4:

Draw two lines (A1, B3) and (A3, B2).

Find the intersection P'.

Step 5:

Draw a line through P and P'.

This is the desired perspective line through P.
The correctness can be formally proved with some calculation.

On the other hand, if we view Q as the second vanishing point, this figure represents a perspective view of a 2d rectangle (A1, A2, B1, B2). The rectangle is cut into two rectangles by the line (A3, B3). Note that (A1, B2), (A3, B3) and (A2, B1) are parallel lines in the 3d space.

Now it is clear that P is the center of the rectangle (A1, A2, B1, B2), P' is the center of the rectangle (A1, A3, B3, B2). Therefore the lines (A1, A2), (B1, B2) and (P, P') must be all parallel in the 3d space. In the perspective view they must all pass through a common vanishing point. This shows that the line PP' is the answer.

There are 2 special cases.


The first case is when Q is also far outside the paper. This may happen when P is near the center between L1 and L2.

To fix this, we can find the a perspective line between L1 and L2, using the standard bisection technique.

Now the new line is closer to P, we can apply the method above on L2 (or L1) and the new line.

If the new line is still too far from P, a few iterations of bisection should be enough.



The other special case is when P is not between L1 and L2.

In this case we may use standard extension method, to find a new perspective line that is on the other side of P. A few iterations might be needed.

Finally we can apply the method above with the new line and L1.
There are still other cases where this method won't always work. For example, if L1 and L2 are close to the top and bottom edge of the paper, there is not much we can do. After all this was only a math quiz in the first place.

Comments

Unknown said…
你好,我也是K站小游戏粉丝(包括N站,还有独立游戏),我也对数学和CS感兴趣,清华毕业,你有email么,交个朋友吧
Sliplizard said…
Ok that’s fascinating and seems useful BUT how did you know where a1 and a2 and b1 and b2 were? You have no information you assumed a1 and 2 were definite points we could place the rule on and then go. It they’re not. They’re points along the a line. And I don’t see anything in this that tells you where to pul them. By uwu ing your method as described I can make p anywhere between the two lines an and b. I can just choose different a 1 and a2 positions and then p is different. Why did you know where to put a1 and a2? This is the absolutely critical piece that makes this method work and it appears completely a scent from your lesson.


Like if I said to draw a cube you just need a line at a b and c. Boom! A cube! Except..,where on the paper do those points go in relationship to eachother? With no definition that same instruction can draw a cube. A rectangle. A rhombus.

Popular posts from this blog

[转] UTF-8 and Unicode FAQ for Unix/Linux

这几天,这个东西把我搞得很头疼 而且这篇文章好像太大了,blogger自己的发布系统不能发 只好用mail了 //原文 http://www.cl.cam.ac.uk/~mgk25/unicode.html UTF-8 and Unicode FAQ for Unix/Linux by Markus Kuhn This text is a very comprehensive one-stop information resource on how you can use Unicode/UTF-8 on POSIX systems (Linux, Unix). You will find here both introductory information for every user, as well as detailed references for the experienced developer. Unicode has started to replace ASCII, ISO 8859 and EUC at all levels. It enables users to handle not only practically any script and language used on this planet, it also supports a comprehensive set of mathematical and technical symbols to simplify scientific information exchange. With the UTF-8 encoding, Unicode can be used in a convenient and backwards compatible way in environments that were designed entirely around ASCII, like Unix. UTF-8 is the way in which Unicode is used under Unix, Linux, and similar systems. It is now time to make sure that you are well familiar

Moving Items Along Bezier Curves with CSS Animation (Part 2: Time Warp)

This is a follow-up of my earlier article.  I realized that there is another way of achieving the same effect. This article has lots of nice examples and explanations, the basic idea is to make very simple @keyframe rules, usually just a linear movement, then use timing function to distort the time, such that the motion path becomes the desired curve. I'd like to call it the "time warp" hack. Demo See the Pen Interactive cubic Bezier curve + CSS animation by Lu Wang ( @coolwanglu ) on CodePen . How does it work? Recall that a cubic Bezier curve is defined by this formula : \[B(t) = (1-t)^3P_0+3(1-t)^2tP_1+3(1-t)t^2P_2+t^3P_3,\ 0 \le t \le 1.\] In the 2D case, \(B(t)\) has two coordinates, \(x(t)\) and \(y(t)\). Define \(x_i\) to the be x coordinate of \(P_i\), then we have: \[x(t) = (1-t)^3x_0+3(1-t)^2tx_1+3(1-t)t^2x_2+t^3x_3,\ 0 \le t \le 1.\] So, for our animated element, we want to make sure that the x coordiante (i.e. the "left" CSS property) is \(