A sketch is a list of commands, and each one draws something. They are used one after another, from the top down, and each line ends with a semicolon.

Most commands are a name followed by round brackets, and the brackets hold the details that command needs, separated by commas. What those details are depends on the command. Some want numbers — a position, a size. Some want a colour name. Some want words, in quote marks. A few want nothing at all, and keep their empty brackets anyway. Every challenge names them in a comment just above the line, so you never have to guess.

Your commands go inside one of two parts, between its curly brackets. Commands in start() run once, at the very beginning — it is also where you set how big the canvas is, with canvasSize(). Commands in everyFrame() run again and again, about 30 times a second, once for every frame you see. Both names have to be spelled exactly, or Visuco cannot find your drawing and nothing appears at all.

One detail catches everybody out. A circle and a square both take three numbers — across, down, size — but the pair means different things: a circle sits with its MIDDLE on those numbers, while a square sits with its TOP-LEFT CORNER there. Give both the same pair and they land in different places.

Because everyFrame is used for every frame, a drawing that comes out the same each time looks like a still picture. If something is different from one frame to the next, it moves. frameNumber counts the frames as they go by, so you can watch that happening — and putting frameNumber where a number should go is all movement is.

Colours, now that you know the shape of a sketch. Everything here happens inside everyFrame, on the lines that draw each frame.

Colours have names you can simply type, in capital letters: RED, ORANGE, YELLOW, GREEN, BLUE, PURPLE, PINK, BROWN, CYAN, MAGENTA, WHITE, BLACK and GREY. You never have to remember them — the Reference button above your code lists all thirteen, with a patch of each colour beside its name, and clicking one types it in for you.

shapeColour(RED); chooses the colour for shapes drawn after it. Think of it as picking up a coloured pen: everything you draw from then on uses that colour, until you pick up another one. So one shapeColour line can serve several shapes, and shapes that need different colours need a line each — placed just above the shape it should reach. Moving the same line higher or lower changes which shapes it affects.

backgroundColour(BLUE); paints the whole canvas instead, which is why it belongs at the top: anything drawn above it gets painted over and disappears.

In this topic you will name colours from the target picture, learn where a colour reaches, paint the canvas, and finish by changing a shape's name as well as its colour — which is where the next topic picks up.

A shape is drawn by naming it and giving it some numbers. circle(200, 200, 120); draws a circle: the name says what to draw, and the numbers in the round brackets say where it goes and how big it is. Get the name wrong and you get the wrong shape — not an error — so the target picture beside you is always the thing to check against.

There are five shapes, and this is the whole list:

circle(across, down, size) — the first two are its middle
square(across, down, size) — the first two are its top-left corner
rectangle(across, down, width, height) — corner first, then both sizes
oval(across, down, width, height) — middle first, then both sizes
triangle(x1, y1, x2, y2, x3, y3) — a pair of numbers for each corner

How many numbers a shape takes is a clue to which one it is: three for a circle or a square, four for a rectangle or an oval, six for a triangle. A square and a circle need only one size because they are equal all round; a rectangle and an oval need two, because their width and their height can differ.

The one thing worth committing to memory: circles and ovals are placed by their MIDDLE, while squares and rectangles are placed by their TOP-LEFT CORNER — so the very same pair of numbers puts them in different places.

This topic works through the names first, then the numbers each name needs. You never have to remember the lists: every challenge repeats them in a comment above the line, and the Reference button above your code has them all.

Every position on the canvas is two numbers: x across and y down. x counts from the left edge. y counts from the TOP edge, so y gets bigger as you move DOWN the picture — that catches everybody out at first.

The canvas here is 400 by 400. That makes 0, 0 the top-left corner, 400, 400 the bottom-right, and 200, 200 the dead centre — a handy landmark to measure everything else from.

circle(200, 200, 90); puts the middle of a circle 200 across and 200 down and makes it 90 wide. The last number is the size, and shapes that need two sizes take two: width first, then height. Swapping those two does not cause an error, it just gives you a tall shape where a wide one belongs.

The grid over the picture is there so you can read numbers off rather than guess at them. The Grid button in the top bar changes how fine the grid is, or turns it off altogether.

One thing worth remembering: for a square or a rectangle the first two numbers are the top-left corner, while circles and ovals are placed by their middle. Two shapes given the very same pair of numbers will not line up.

And two shapes can be positioned relative to each other: give them the same y and they sit level, or the same x and they sit one above the other.

So far every shape has been a solid block of colour, but a shape really has two parts: the fill inside, and the outline around the edge. They are set by two different commands and never affect each other.

shapeColour(…) sets the fill. outlineColour(…) sets the edge, and outlineThickness(…) sets how many pixels wide that edge is drawn.

Every shape starts with a thin black edge already on it. On a black background you barely notice it, but it shows up as a seam wherever two shapes touch or overlap — which is why switching it off matters more than it first seems.

You can switch either part off. noShapeColour(); gives you outline-only shapes — hollow ones, with whatever is behind them showing through, because a hollow shape is not filled with black, it is not filled at all. noOutline(); takes the edge away completely. Both stay off for every shape after them, until you set a colour again.

backgroundColour(…) paints the whole canvas, so it belongs at the top: anything drawn before it gets painted over.

All of these are pens you pick up. They change the shapes that come after them and never the ones before, so moving one line above or below another changes the picture.

One last thing, which the next topic builds on: a line has no inside at all, so shapeColour does nothing to it. A line is drawn entirely by outlineColour and outlineThickness.

A line is not placed like the other shapes. It is drawn between two points, so it needs four numbers: line(x1, y1, x2, y2); The first pair is where it starts and the second pair is where it ends.

That is more numbers at once than you have typed before, so here is the way to do it: one point at a time. Set the first two numbers until the start of the line is in the right place, press Run, and then fix the other end. You do not have to get all four right together, and Reset will always put the starting numbers back.

If nothing appears at all, check whether both ends are still at the same spot — a line from a point to itself has no length to show.

Three lines can enclose a shape, but their ends have to meet exactly, and each corner ends up typed twice. A triangle does the same job in one command: triangle(x1, y1, x2, y2, x3, y3); — six numbers, a pair for each corner, and the ends are always joined for you.

A dot is the other extreme: dot(x, y); is a single point, just two numbers. It has no length and no inside, so its size comes from outlineThickness — a thick pen draws a fat dot.

Lines, triangles and dots are drawn with the outline pen, so outlineColour and outlineThickness are what make them visible. A triangle is still a shape, though, so shapeColour fills it in and noShapeColour leaves it hollow.

Grid helps here more than anywhere else in the course.

write() puts words on the canvas: write("hello", 150, 210); The words come first, in quote marks, then the x and y where they sit.

The quote marks matter, and this topic makes you type them. They tell Visuco "this is text, not code", and whatever is inside them is drawn exactly as you typed it — spaces, capitals and all. Leave one out and the sketch will not run: the results panel turns red and tells you what is out of place — for a missing quote it says so in as many words.

The x and y are roughly where the bottom-left of the text sits, so words hang above the y you give them rather than below it. That is the one way writing is not placed like a shape.

textSize(24); sets how big the writing is in pixels. Like the colour pens it holds for everything written after it, which is how a big title and a small subtitle can share one sketch.

Writing takes its colour from shapeColour — the same pen that fills shapes. It has no outline of its own. And because words are drawn on top of whatever is already there, a label on a shape needs a colour that shows against it.

In this topic you will type words, place them, size them, colour them, and use them to label pictures.

Named colours are quick, but there are only thirteen of them. Behind every colour on a screen are three numbers: how much red, how much green and how much blue, each from 0 for none to 255 for as much as possible.

shapeColour(255, 0, 0); is pure red. shapeColour(0, 0, 0); is black — no light at all. shapeColour(255, 255, 255); is white — all three full. And every named colour you have used is one of these triples underneath: RED is 255, 0, 0.

Turning a number down does not change which colour it is, it darkens it. 255, 0, 0 is a bright red; 128, 0, 0 is a deep maroon. Shades like that are the real reason to mix your own — there is no name for most of them.

Mixing is the interesting part, and it does not work like paint. A screen ADDS light, so piling colours on always gets brighter. Red and green together make yellow, red and blue make magenta, green and blue make cyan.

Equal amounts of all three give you a grey, and the higher the numbers the lighter that grey is. Because that means typing the same number three times, there is a shortcut: one number on its own, like backgroundColour(210);, means that amount of all three.

In this topic you will build up the three channels, mix the colours you already know by name, and then colour whole pictures by number.

Nothing new to learn here. This topic is for using what you already have: shapes, colours by name and by number, coordinates and sizes, outlines and thickness, words and text size.

One thing does change, though. Up to now a description usually told you which colour or which number to use. From here the target picture beside your code is the instruction — look at it, work out what would produce it, and try. That is the whole skill this topic is practising, and it is the one you will need when you write sketches of your own.

The pictures are built from several shapes at once, so the order you draw them in starts to matter — later lines are drawn on top of earlier ones. A window shows because it is drawn after its wall; a tree reads as one thing because its leaves are drawn after its trunk and cover the top of it. If part of your picture has vanished, check whether something drawn afterwards has covered it. The topic after this one is about exactly that.

A good habit for a bigger picture is to build from the back forwards: the background first, then the things furthest away, then the details on top.

Work one shape at a time and press Run often. You do not have to get a whole picture right in one go — the score tells you how close each run is, and the target is always there beside you to compare against.

Your code runs from the top of everyFrame to the bottom, one line at a time, and each shape is painted over whatever is already there. That is the whole rule of layers: later covers earlier.

It sounds obvious, but it is a tool. Draw a big circle, then a smaller circle in the background colour on top of it, and you have made a ring — with no ring command anywhere. The same move gives you crescents, wedges and smiles, none of which Visuco has a command for.

The trick to see is this: a shape painted the same colour as what is behind it has not vanished. It is still there, still drawn, still counted — it simply cannot be told apart from its surroundings. That is why it looks like a hole.

Overlap joins things up as well as cutting them out. Several circles of the same colour, with no outlines between them, read as one blob rather than several.

It is also the first thing to check when a shape "does not appear". Very often it did appear, and something after it painted straight over the top.

In this topic you will stack shapes on purpose and work out, from the picture you are aiming at, what colour a shape has to be to carve a piece out of another.

Until now the code has been written for you and you filled in the gaps. From here you write whole lines yourself.

Every missing line has a comment above it — a line starting with // — telling you what that line should do. A comment is a note for people: Visuco ignores it completely when the sketch runs, so it can never change the picture.

Everything you need you have already used. Every line has the same shape: a command name, then round brackets holding the numbers or words it needs separated by commas, then a semicolon. circle(200, 200, 150);

If you cannot remember a name, press Reference — every command you have met is listed there with what it does, and clicking one types it in for you.

Mistakes are part of this, and the results panel helps with them. Misspell a command and it names the line and highlights it: "Line 4: shapColour is not defined". Leave a bracket or a quote mark unclosed and it tells you what looks unpaired, though it cannot always say where — in that case check the line you just typed first.

Write one line, press Run, then write the next. That is the whole method, and it is how people who write code for a living do it too.