December 26 2017
Apps Art Drawing Graphics Perspective Toys

Three-point perspective app

Reading time: about 3 minutes

This Winter break my daughter and I spent some time exploring perspective drawings. We like to work on small coding projects together, and she thought that coding up a little app for drawing in three-point perspective would make a good project. And she was right, although it does require just a bit of math not at primary school level. It’s a work in progress, but here’s the result so far.

A simple cityscape drawn in three-point perspective.

What is it?

Even if you have forgotten the name, there’s a good chance you learned to draw using two- or three-point perspective at some point. Both methods are good for drawing blocky scenes like cityscapes and Escheresque fantasy worlds because the structures you draw consist of edges that meet at right angles.

How it works

To draw in three-point perspective, you start by placing three vanishing points (VPs) on a page in a triangle pattern. Two of the VPs form a horizon line near the top of bottom of the page, and another VP is placed in the middle of the opposite site (the bottom or top). Moving one of the VPs effectively rotates the image. Moving the points closer to or further from the centre of the page increases or decreases the strength of theperspective effect.

Cube in three point perspective showing cube edges extended to their respective vanishing points.

To draw a shape, you draw a line for each edge. For each line you choose a starting point for the line and one of the three VPs. For vertical lines you use the VP in the middle, while for horizontal lines you use one of the two VPs on the horizon line. Then you use a ruler to connect the starting point and the VP, and draw along the ruler to create the desired edge. Repeating this process for each edge until you complete the shape. The illustration shows a a cube (grey lines) with each of its edges extended (coloured lines) to show which VP it recedes towards.

The app

   
    

How to use it

Using the app is similar to drawing in three-point perspective with pencil and paper: to draw an edge, pick a starting point and a VP. Move the mouse pointer to the starting point and hold down the left mouse button. The direction you move next determines which VP you will use: move the mouse vertically for the middle VP, to the left for the leftmost VP, or to the right for the rightmost VP. As you keep moving, you will draw along the line formed by these two points. The app uses light, rough lines for an effect similar to sketching freehand with pencils: you can darken an edge by moving the mouse back and forth, just as you might go over light pencil strokes multiple times.

Tips

  1. You can move the mouse a few pixels (about 5) before the app starts drawing the line. This can be handy when you have to move towards a VP that is in the opposite direction of the direction you want to draw the line.
  2. Drawing is usually constrained to a perspective line, except when using white, which acts as an eraser. You can also erase by with the right mouse button.
  3. Choose Save to download a PNG image of your drawing.

Moving the VPs

You can move the VPs by changing the numbers listed in the Vanishing points field. The six numbers there represent three pairs of points. Each point describes the relative distance of a VP from the left and top edge of the drawing, as a percentage of the drawing size. For example, the first point is 1,25: this places the first vanishing point 1% of the way across the drawing from the left edge, and 25% of the way down the drawing from the top edge. The points are listed in left-to-right order, so the first and last points form the horizon line. Moving the VPs changes the apparent perspective of the observer. For example, if you flip the points so that the first and last are near the bottom of the drawing and the middle one is near the top, it gives the effect of looking up at the scene instead of looking down on it.

Two-point perspective

If you are wondering how three-point perspective differs from the two-point version, the two-point version uses only a horizon line. Vertical lines are always drawn straight up and down rather than receding. In effect, you are doing three-point perspective with the middle VP infinitely far from the page.