Art by Ayal Pinkus > Blog > vPoint > vPoint Documentation

vPoint Documentation

vPoint is an online utility that allows you to create an image with perspective grids and additional construction lines. The image can then be printed and used as an underdrawing on a lightbox for example.

The aim is to help speed up the process of creating perspective grids and construction lines as a basis for a drawing using traditional materials. The grids and construction lines can be placed quickly and it doesn't matter if the vanishing points are far away from the page.

Note that vPoint is currently only supported on Chrome and Firefox




Quick overview

There is one main view, with a settings pane to the left and a canvas to the right. The canvas is the image that you can draw on.

When clicking on one of the tabs on the left settings pane, different settings panes will pop up.

  • "Change" : this tab allows you to configure how the image is drawn: sizes, line colors, underdrawings and such.
  • "Grids" : The Grids tab allows you to configure the perspective grids and how line placement will interact with them.
  • "Download" : When the drawing is finished, the image can be downloaded. Alternatively, a textual representation can be downloaded for future re-use.
  • "Help" : This pane brings you back to this page and other documentation, tutorial and example pages.

The "Change" tab

On this tab, you can change the Canvas size in pixels - the width X the height. To determine what works best for you, these are the considerations:

  • You should choose a size - width and height - so that the aspect ratio matches that of the final image you want to draw.
  • You want the size to be as big as possible, for a better resolution, but at the same time not too unwieldy.

In order to be able to work smaller or bigger, the field Zoom allows you to zoom in or out of the canvas. I use this a lot to zoom in and clean up the drawing by removing the tiny overshoots after crossing two lines. They can be small, and zooming in allows me to select them more easily.

The Mode field determines what you do with the mouse on the canvas. "Draw" means you can place lines, "Delete" means you can delete line segments. More about that later. These can be chosen quickly by pressing the keys 'L' for Draw mode and 'D' for Delete mode. The Layer field selects the current layer to draw on. While drawing, the cursor will try to snap to end points in the current layer and it will try to draw towards one of the vaniahing points. In addition, above the canvas, a notification will show the current position on the canvas and the drag distance: the length the line currently has. This can help with precise placement.

Intersect mode means vPoint will try to find the points where a highlighted line intersects with the lines that go through vanishing points. This is useful for finding new vanishing points. For example, you can draw a line along an edge in a photo and find out this way where the vanishing point would go if the horizon had a certain position, or you can find out where a vanishing point above one of the first two vanishing points would go to get a "special" vanishing point that helps you construct tilted surfaces.

Below that, you can select the currently active Layer that drawing operations operate on. The link next to it, Clear layer, clears the construction lines from the current layer.

The fields Layer n: set the properties for each layer: line color, line width, and whether the layer is visible. Grid refers to a special layer, the perspective grid layer under the construction lines, and Underdrawing specifies the image placed under it. This allows you to reconstruct the horizon and vanishing points from that image, and to place construction lines based on that image. The image can be a photo, but it can also be a rough pencil sketch, a design for what the image will ultimately look like. This image can be loaded from a file, or cleared through the Clear underdrawing link.

The "Grids" tab

Through Number of vanishing points you can choose how many vanishing points to use: one-, two- or three-point perspective is currently supported.

The Horizon level is also set in pixels. If the image is 400 pixels high, setting the horizon to 200 will place it in the middle of the image, placing it at 400 will put it at the bottom of the image.

The horizon should usually be somewhere on screen, so its value should generally be between zero and the height of the canvas. Except when dealing with three-point perspective. In that case, the horizon will most likely be below the canvas if the third vanishing point is high, and vice versa. When the three-point perspective is chosen, the center of view is calculated and shown and turned into a red warning if it falls outside the screen. In that case, it is probably a good idea to adjust the horizon and the y position of the third vanishing point.

The vanishing point x values vp #1, vp #2 and vp #3 are the x values, also in pixels. If the canvas is 600 pixels wide, putting a vanishing point at zero will put it at the left edge of the image, putting it at 300 will place it in the middle, and placing it at 600 will put it at the right edge of the canvas.

Vp #3 y is a special case. It sets the y coordinate for the third vanishing point, which will not be on the horizon like the first two vanishing points.

The values for Nrs1, Nrs2 and Nrs3 determine how fine the perspective grids need to be drawn. When the vanishing point exists, the value for its Nrs determines how many lines will be drawn radiating from that vanishing point. So the smaller the number, the less dense. If that vanishing point is not drawn, horizontal or vertical lines will be drawn on its behalf, and Nrs determines the number of pixels between grid lines, and in this case, the smaller the number, the denser the grid (which is the opposite of when it does have a vanishing point).

Rotations.

Two rotations are supported right now. Rotation rotates the vanishing point certain degrees. This is helpful in placing lines that are rotated from eachother but that adhere to vanishing points that are consistent.

The rotation is done as follows: first a line is dropped down from the horizon line, at the middle of the panel. On this line, the code tries to find that point such that the lines from that point to both the vanishing points on the horizon are at an angle 90 degrees from each other. This point is the "Station Point" and it is the point where the viewer is standing, and it is the point where angles don't change. As the two vanishing points represent directions, they are at an angle of 90 degrees in the world, and so they are at an angle of 90 degrees at the Station Point also.

After the rotation, Tilt tilts the horizon a certain amount of degrees.

A cool trick you can do with rotation: if you rotate the ground surface by 45 degrees, the vanishing point in sight will be the diagonal vanishing point. Lines through this point are diagonals of squares and this allows you to create precise squares on the ground plane.

Measurement points

Enable this to show the "Measurement points". These help measure lines towards the vanishing points. If a line goes from point A to vanishing point VP1, then if you mark a point B to the left of point A, and you draw a line from point B to the measurement point on the other side, the point C where these two lines cross will be such that the distance between C and A is the same as the distance between B and A. Together with rulers that are parallel to the view, that allows precise placement of points along lines directed towards the vanishing points.

These "Measurement Points" are created by drawing a circle through the station point, with the vanishing point as the center of the circle. The point where the circle meets the horizon is the measurement point.

Snapping to grids or end points


When drawing lines, it is useful if the line can snap to one of the perspective grids. This is enabled by default, through the Perspective grid checkbox, which can also be toggled through typing 'G'. Also, when near the end of a line, it may be desirable that the mouse snaps to that point. This is also enabled by default by the End points checkbox, which can be toggled by pressing 'E'. The Snap distance field determines the maximum distance in pixels within which to allow for snapping.

The "Download" tab

If you click on the Download png image link, the canvas will be saved as 'grid.png'. Pressing 'S' also takes a snapshot of the current canvas. This is useful if you want to take a snapshot while interacting.

The downloaded 'grid.png' image is the whole point of this utility: you can print it out and place it underneath a piece of paper on a lightbox and use the perspective grid and construction lines as guides while drawing.

Clicking the Data checkbox reveals the drawing as represented in a textual format. If you copy the text and place it in a file with extension .json, you can use it later (perhaps possible only if you are running this utility locally). If you saved it to the file 'mydrawing.json' for example, you can append the following after the url: "?model=mydrawing" next time you load the page, and the model will be loaded again.

It is a bit of a complicated construct, but that is because this utility has been written in Javascript, and Javascript (rightly) doesn't allow reading and writing files.

The "Help" tab

The help pane refers you to this and possibly other documentation.

Quick summary of hotkeys:

  • L : Draw mode (draw lines)
  • D : Delete mode (delete line segments
  • G : Toggle snap to perspective grids
  • E : Toggle snap to end points
  • S : Take snapshot of canvas

That's it, really!

Example: Drawing a house with a pointed roof

This short quick tutorial, in which I draw a house with a point roof, doors and windows and some other fore- and background, shows some of the things you can do with vPoint.

I started with a 3-point perspective grid, and I made a quick sketch (in red) in vPoint itself, determining where roughly I wanted the blocks. I then used that quick sketch as the underdrawing, a guide to reference from.

Here you see the first side of a block. As you can see, I overshot the construction lines considerably. I did this because it helps me to more easily select the line segments that I want removed (see blue and red line highlights). This is a common way to draw with vPoint: draw lines, let them intersect, then remove the line segments you don't want.

Here the blocks overlap. But the same principle applies: I can remove parts of the block that fall behind another block easily by removing the line segments that disappear behind that block.

Here I used an 'x-marks-the-spot approach to find the middle of the front pane of the house. I did this by disabling snapping to the perspective grid so I could draw lines in any direction. Then I turned 'snap to perspective' back on again, and drew a line to the third vanishing point. This is the tip of the roof. Then again with snap to perspective turned off, I drew the sides of the roof.

The same was done with the back pane of the block that represents the body of the house, drawing construction lines that I remove again afterwards.

The same tricks can be used to cut parts out of blocks, like windows and doors.

And finally I had some fun using 'Rotation' to rotate the vanishing points in the ground plane in such a way that they stay consistent with the original vanishing points, and I drew some more blocks.

And it is ready to be printed out and placed behind a clean sheet of paper on a lightbox, to be used as a guide while penciling in a scene.

Art by Ayal Pinkus > Blog > vPoint > vPoint Documentation

Newer entries in vPoint

vPoint Introduction
vPoint is an online utility that allows traditional artists to create perspective grids and construction lines to support their hand-drawn art.

Newsletter