Vectorise Guide

The commands that you can use in Vectorise are outlined below. Note that the standard rules of programming and computational thinking apply, e.g.

the program runs from top to bottom (i.e. in sequence), and objects drawn later in the program will appear on top of those drawn earlier (if they overlap)
strings (e.g. the names of colours) need to be enclosed in speechmarks, but numbers do not
you can use valid calculations in place of numeric values
as the page is JavaScript-based, commands should end with a semi-colon, but it doesn't matter if you miss them off
there is some error checking - e.g. the number and type of arguments - and errors in your program are identified in the pane at the bottom of the page.

The canvas area is 800 x 600 pixels, with (0,0) at the top-left. The speed control on the Vectorise page simply slows the page down, e.g. so that you can more clearly see the order in which the shapes are drawn.

Command	Description
arc(x, y, width, height, start, end)	This is probably the most complicated command to use - have a look at the Pac Mac program for an example. The values of x and y are the co-ordinates of the centre of the shape - it's called an arc, but you can fill it and it will look like a cake slice. The width and height are the total width and height, rather than the radii (the same as with ellipse()). The start and end values are angles - they are measured clockwise from the right-most point of the circle (i.e. East). In the Pac Man program, for example, arc(270, 300, 264, 264, 30, 330) draws an arc from 30° (just below East) to 330° (just above East).
background(colour*)	Changes the background colour of the whole drawing area.
circle(x, y, radius)	Draws a circle with a radius of radius with its centre at the specified co-ordinates.
ellipse(x, y, width, height)	Draws an ellipse with specified dimensions and its centre at the specified co-ordinates. Note that width and height are the total width and height of the ellipse, rather than the radii.
fill(colour*)	Specifies the fill colour for any subsequent shapes or text.
font(font_name)	Sets the size (include the units - usually pt or px) and typeface used in following text() commands, e.g. font("50px Arial"). If the typeface name contains spaces, e.g. 'Times New Roman', then put apostrophes around it. Note that the text is printed in the current fill() colour.
line(x1, y1, x2, y2)	Draws a straight line between points (x1, y1) and (x2, y2).
noFill()	Specifies that subsequent shapes (and text) should not be filled - i.e. they are outlines only.
noStroke()	Draw subsequent shapes with no border.
point(x, y)	Draws a dot at co-ordinates (x, y).
rect(x, y, width, height)	Draws a rectangle with specified width and height - the specified co-ordinates are the top-left corner.
square(x, y, size)	Draws a square with height and width of size - the specified co-ordinates are the top-left corner.
stroke(colour*)	Sets the border/line colour to colour for subsequent shapes.
strokeWeight(weight)	Sets the border/line thickness to the specified number of pixels, e.g. strokeWeight(3) makes all subsequent lines/borders three pixels wide.
text(string, x, y);	Prints the string in the specified position, using the current fill() colour and font() style.
triangle(x1, y1, x2, y2, x3, y3)	Draws a triangle with corners at (x1, y1), (x2, y2) and (x3, y3)

*colour indicates a standard HTML colour name, e.g. red or a hexadecimal colour code. The name of the colour must be in speech marks.

The values x and y (including those with numbers) indicate co-ordinates, e.g. (x, y), but the y value is the other way up from what you might have learnt in maths - i.e. 0 is at the top. This is quite common in computer graphics. Note that you can use expressions as arguments, e.g. rect(205+405, 368-45, 26, 151) - look at the examples on the Vectorise page.

Vectorise is also compatible with examples from Code Guppy.