December 25, 2017
About 3 minutes
Apps Art Drawing Graphics Perspective Toys

Three-point perspective app

Sketch images in three-point perspecive

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 a little app for drawing in three-point perspective would make a good project. She was right, although it does require a tiny bit of math beyond primary school level! It’s a work in progress, but here’s the result so far.

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 or Escheresque fantasy worlds because the drawings consist of edges that meet at right angles.

How it works

To draw in three-point perspective, 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 or 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 changes the strength of the perspective effect.

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. Repeat this process for each edge until you complete the shape. The illustration shows 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

To draw an edge, pick a starting point and a VP to recede toward. 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, or
• move left and up toward the left VP, or
• move right and up toward the left right VP.

If you move left or right and down (away) from the side VPs, you will recede toward the opposite VP.

As you keep moving, you will draw along the line formed by these two points as if your pen was pressed against a straight edge. 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.

You can also use your finger or stylus on a touchscreen, though it may be less accurate. (Your browser must support pointer events.)

Tips

1. You can move the mouse a few pixels (about 5) before the app starts drawing the line. This gives your fine motor skills some leeway before your pen locks onto a VP.
2. Drawing is usually constrained to a perspective line, except when using the white eraser “colour”. (You can also erase 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 toward a VP. In effect, you are doing three-point perspective with the middle VP placed infinitely far away.