Vanishing Point

In 2003 I re-created an animation of a vanishing point in javascript and SVG. The original animation was built with AutoCAD 10 and custom AUTOLISP scripts I created in the fall of 1990. Happily amazed that 15 years later this code runs unchanged in modern browsers. blog

As it turns out AutoCAD and AutoLISP made a perfectly capable wire-frame animation tool, at least for a motivated programmer. Really, AutoLISP chose me, as AutoCAD was the only illustration software available to me at the time and I really wanted to do animation. Even in 1990, AutoCAD 10 was one generation old. It was my first painful experience with bit rot.

See Bit-rot and Red Queen Effect

When I created the javascript variation, I was reading Paul Graham's book On Lisp and worked up my own examples to gradually grow this animation language from the ground up. What follows is almost like a little javascript varient on scheme. The createAnimation function interprets the arrays applying the function at index 0 to the remaining arguments in the array. I still enjoy reading this block of code, though perhaps because the mental model of how all this works remains well preserved in memory somehow.

This is a reconstruction of the animation that led to five months of working with Dr. Kim Veltman in Italy and some of the richest learning experiences of my life.

In linear perspective, when parallel lines are projected onto a picture plane [1], the resulting projections [2] will intersect at a vanishing point. For lines parallel to the ground, the vanishing points will appear on the horizon line [3]. When drawing objects in perspective, the artist usually begins by drawing the horizon line and a couple vanishing points. Construction lines are drawn from those vanishing points to help the artist correctly locate the edges of buildings or other objects. Perspective drawings and paintings are sometimes classified by the number of vanishing points used in the construction.

I don't remember the exact definition of a vanishing point from Dr. Veltman's collection. It would have been similar to what I've written above: accurate and descriptive with a certain amount of precision in the use of language and inherently relative to other terms of perspective. But words don't suffice. A vanishing point demands illustration. I found my original diagram of a vanishing point painfully lacking. It looked basically like a stick figure and a pile of triangles. At the time I was very interested in animation and thought I could visualize a vanishing point more clearly with a little motion. I ended up with a stick figure and a moving pile of triangles which was much better. ;-)

Without further adieu (with the caveat that an SVG plugin is required) . . . drumroll . . . (click Go):

It is probably not self evident as to why Kim was so impressed by such a simple animation. Computers as an Historical Tool for Mathematics, Science and Art will help clarify why this is an interesting contribution to the history of perspective. There are some other hints in another article which I quote below.

Back to the pictures of infinity. Notice how as the projected lines grow ever more slowly towards the vanishing point before leaping at the very end. This is a direct consequence of geometry and infinity. The ground lines are growing at a constant rate whereas their projections are growing in a ratio relative to the point of view and position of the picture plane. If I let it keep going it does eventually get fairly close to the end, but it's really not worth the wait. Someday I'll rearrange the animation so the projected lines grow at a constant rate. I'll still have to do some fudging towards the end as the ground lines approach the limits of the SVG coordinate system.

Speaking of coordinate systems there's another detail worth mentioning if you're inclined to look at the code behind the animation. SVG uses a two-dimensional coordinate system whereas the scene I'm depicting is three-dimensional. For this animation I'm just using the 2D coordinates to calculate intersections. In the AutoCAD version I had the advantage of a three dimensional coordinate system for my code. That arrangement more accurately reflects the actual geometry at work when light reflects off of objects and into our eyes. For simplicity my stick figure is a cyclops. In both of these ways I'm actually continuing a very long tradition in the history of perspective and geometry in general. :-)

Here's how Kim described it in the introduction to Computers and Renaissance Perspective

Many of the animations I created in Siena were folding the two-dimensional images into their three-dimensional origins. In one, I animated the steps Piero della Francesca described to construct a perspective image of a pentagon. No small task to understand a centuries old Italian text on a geometric construction. When I was done animating his instructions I re-did the animation in a way that I thought made the technique he was describing more clear. If I remember correctly, I then folded the resulting drawing into its three-dimensional arrangement and animated something of a proof of the technique by projecting lines from the point of view to the pentagon on the ground and showing that constructed image aligns correctly. When I get more tuits I'll see if I can repeat that stunt. :-)

[1,2] See my illustration of perspective basics

[3] I still haven't illustrated a horizon line anywhere.

I used the desktop version of Sketchup to create the unconventional intro to linear perspective. In the nine years since that was created the free edition of sketchup has moved to the web: app . Perhaps I can re-record this video with more attention to the audio quality.