Vector Dot-to-Dot Puzzles

CLOWN-FACE-10X10Explore vector graphics with these vector dot-to-dot puzzles. Draw them by hand (and create your own) and then turn them into the SVG graphics language and see them in a web browser [see how to do this at the end].

Using vector graphics involves drawing pictures using  the precise maths of points, lines and shapes. When you use a drawing package to draw a picture the maths is happening, but all hidden from you. Underneath you are creating a program in a language (like SVG). The instructions in that program draw your picture.

Here we explore drawing using irregular polygons. It is a bit like doing a dot-to-dot puzzle and colouring it.

Instructions

Rather than the dots being drawn for you, you do it yourself. You are given a series of point coordinates to plot. Just to be confusing, the coordinates used by computer scientists tend to be an upside down mirror image from the way you do it in maths (see the picture above). So (0,0) is in the top left corner of the page NOT the bottom left. Positions are otherwise given in the same way with the horizontal (x) coordinate first and the vertical (y) coordinate next. So the top corner of my clown face above is at (2,1): meaning go 2 along and 1 down from the origin (0,0).

In our dot-to-dot puzzles we will use a simple dot-to-dot language. For each shape, first you give the colour and then the series of points. For example, the instruction for the mouth above is given by:

red (2,6) (4,8) (6,8) (8,6) (6,7) (4,7)

To draw a shape

  1. Place dots (or crosses) at each point given.
  2. Join the dots in the order given finishing back at the start.
  3. Colour in the shape with the given colour.

A full puzzle is a series of these commands. The clown face above is

DOT-TO-DOT (10x10) lightblue
   white (2,1) (1,3) (1,6) (3,9) (7,9) (9,6) (9,3) (8,1)
   blue  (6,3) (6,4) (7,4) (7,3)
   blue  (3,3) (3,4) (4,4) (4,3)
   red   (2,6) (4,8) (6,8) (8,6) (6,7) (4,7)

The first line just tells you the size of grid you need and the background colour.

Collages (order matters)

You must then do the instructions in the order given, so drawing each polygon in the order given. New colours go over old ones (so you may want to leave all the colouring to the end when doing these puzzles by hand).

You can do this kind of puzzle by colouring in the dot-to-dot outlines like that, or do them as a collage, cutting out the pre-drawn shapes and sticking them in the right position. This solves the problem of colouring over the top of  existing colours. Either do the puzzles on squared paper or on the squared grid we provide with the puzzle (if you have a printer). You can also do them on your computer in our special dot-to-dot puzzle powerpoint slides.

Your turn

SVG: A real graphics drawing language

It is fairly easy to convert these puzzles (or your designs) into the industry standard graphics language, SVG. SVG stands for Scalable Vector Graphics which what this kind of drawing by programming is. Creating dot-to-dot style polygons is one way to create the shapes of a picture in SVG.

Here is the above puzzle in SVG, which we will explain line by line below, but see if you can work out how it corresponds to our puzzle instructions first. Start by looking at the middle lines.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
    <rect x="0" y="0" width="10" height="10" fill="lightblue" />

    <polygon fill='white' points='2,1,1,3,1,6,3,9,7,9,9,6,9,3,8,1' />
    <polygon fill='blue'  points='6,3,6,4,7,4,7,3'                 />
    <polygon fill='blue'  points='3,3,3,4,4,4,4,3'                 />
    <polygon fill='red'   points='2,6,4,8,6,8,8,6,6,7,4,7'         />

</svg>

The first two lines start by telling you this is an SVG program and the size and colour of the background box to draw.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
<rect x="0" y="0" width="10" height="10" fill="lightblue" />

You may want to change the sizes and colour but otherwise you don’t need to worry too much about the detail for now as the rest is always the same.

Next you have the sequence of instructions for drawing different polygons. You need to tell it you are drawing a dot to dot polygon using the special word “polygon” and the special brackets.

<polygon .../>

Inside this instruction, you give the colour to fill it with,  and a list of coordinates separated by commas. So the line to draw the mouth is:

<polygon fill='red'   points='2,6,4,8,6,8,8,6,6,7,4,7'          />

So in the above the first numbers in the list are 2,6 meaning the first dot is at position (2,6). The next numbers are 4,8 so the next dot is at (4,8) and so on.

Finally, all SVG programs finish with the following command:

</svg>

Your turn

  • Copy and paste the above full SVG clown program into a text editor like Notepad or TextEdit (not Word!) and save it as a file with ending .svg (eg clown-face.svg). When you open the saved .svg file (or drag the file into a web browser window) you will see the picture the program draws.
  • Or download and unzip this zipped version of the clown svg file (clown-face.svg.zip) then open it in a text editor to see the code, or a browser to see the picture.

On a Windows computer you can find notepad.exe using either the search option in the task bar (or Windows+R and start typing notepad…). On a Mac use Spotlight Search (Command+spacebar) to search for TextEdit. Save your file and then open it in a browser (on a Mac you can grab the title of the open file and drag and drop it into a web page where it will open as the drawn image).

If you open the svg file in a browser you will see the image. If you open the svg file in a text editor you will see the instructions that draw that image.

  • Take the clown face svg file, make a copy and edit the instructions to make an SVG version of your own clown face.

More Vector dot-to-dot Puzzles

 

QMUL - Queen Mary University of London logo