A variable is a named box that holds a value. You make one like this: var score = 10; The word var says "make a new box", score is the name you chose for it, and 10 is what goes inside.

From then on, writing score anywhere means "whatever is in that box" — here, 10. That is the whole idea, and the rest of this course is built on it.

Why bother, when you could just type 10? Because a box can be used in more than one place. Write score three times and all three show the same number, and changing the one var line changes all three at once. You never have to hunt for every copy.

To see what a variable holds, draw it: write(score, 20, 40); puts the value onto the canvas. It is the same write() you used in Course 1, but with a variable name instead of words in quote marks. No quotes, because you want what is inside the box, not the word score itself — write("score", 20, 40); would draw the five letters s-c-o-r-e.

Names are up to you, but choose ones that say what they hold: score, lives, top. In this topic you will set values, name boxes yourself, and keep several at once.

Adding is written the way you would write it on paper: var x = 2 + 3; The sum is worked out first, and its answer — 5 — is what ends up in the box.

That is worth pausing on, because it means you never type the answer. You give the parts and the sketch does the arithmetic. Change one of the parts and the answer changes with it, without you touching anything else.

The parts do not have to be numbers you typed. They can be other boxes: var total = a + b; makes total hold whatever a and b add up to at the time. Set a to 3 and b to 5 and total is 8; change a to 10 and total is 15, on its own.

A sum can be as long as you like — var total = maths + science + art; adds all three.

Adding is forgiving about order: 3 + 5 and 5 + 3 both make 8, so a pair of numbers can go in either way round. That stops being true in the next topic.

In this topic you will fill in missing numbers to hit a total, keep several sums at once, and then add boxes together by name.

Taking away is written with a minus sign: var x = 10 - 4; The sum is worked out first and the answer, 6, is what goes into the box — the same way adding worked.

One thing is different, and it is the thing to remember. Adding did not care which number came first: 3 + 5 and 5 + 3 both make 8. Taking away cares. 11 - 3 is 8, but 3 - 11 is -8, the same number with a minus sign in front. So the amount you start from goes first, and the amount coming off it goes second.

A negative answer is not an error. It is a real number, and sometimes it is the right one — a football team that lets in more goals than it scores has a negative goal difference. But if you did not mean to get one, it usually means the two numbers are the wrong way round.

Amounts can come off one after another, left to right: var left = start - monday - tuesday; takes Monday off the start, then Tuesday off what remains.

And as with adding, the numbers can be boxes: var difference = big - small; never needs setting by hand. Change either box and the difference follows.

In this topic you will fill in missing numbers, keep several take-aways at once, and then subtract boxes by name.

Multiplying uses a star and dividing uses a slash: var x = 5 * 4; makes 20, and var x = 20 / 4; makes 5. The line is the same shape as adding and taking away — only the sign in the middle changes.

A times is really a shortcut for adding the same number over and over. 4 * 3 is 4 + 4 + 4. Once you see that, multiplying stops being a new idea and becomes a quicker way of writing an old one.

Order does not matter for a times, the way it did not for adding: 3 * 5 and 5 * 3 both make 15. It does matter for a share, like taking away — 20 / 4 is 5, but 4 / 20 is not.

Sharing has one wrinkle. It does not always come out even. 24 / 4 is 6, but 24 / 5 is 4.8 — a number with a decimal point. Nothing is broken when that happens, but in this course the numbers are meant to be whole, so it usually means the two numbers are not a tidy pair.

The second half of this topic does something new: a box can size a shape, not just print a number. circle(200, 200, size); makes the circle as wide as whatever is in size, and if that size is worked out — var size = count * 30; — then changing one small number resizes the whole picture. That is the real reason for all of this.

A last note: a size on screen cannot be judged to the pixel, so where a challenge needs an exact one it tells you the number to aim for.

A box can hold words as well as numbers. Words go inside quote marks: var name = "Piccio";

The quote marks are the whole difference. They tell Visuco "this is text to keep", not code to run. Leave them off and it reads Sam as the name of a box, goes looking for a box called Sam, and stops with "Sam is not defined". So "Piccio" is a word, and Piccio with no quotes is a box name.

Whatever is between the quotes is kept exactly as typed. Capitals count — "Cat" and "cat" are two different pieces of text — and so do spaces, so "Well done" with two spaces is not the same as with one. When a challenge asks for particular words, copy them exactly.

The plus sign does a second job here. With numbers it adds: 5 + 3 makes 8. With words it joins them end to end: "5" + "3" makes 53. And if you mix the two, the number is turned into text and stuck on: "Level " + 5 makes Level 5.

Joining runs things straight together, so any gap has to be put there on purpose. That is what the lone space in first + " " + last is for — a piece of text one character long.

In this topic you will fill in words, add the quotes yourself, draw a box by name, and then join words and numbers into whole sentences.

So far a box has held a number you chose. Here it holds a piece of the window, and the maths works out where things go.

Half the width is the middle across; half the height is the middle down. Divide by a bigger number and you get somewhere nearer the left or the top: width / 4 is a quarter of the way across. Multiply that back up and you can reach any fraction you like — width / 4 * 3 is three quarters.

You do not have to measure the window yourself. It already keeps its own size in two ready-made boxes called width and height.

Why bother, when this window is 400 across and you could just type 200? Because 200 is only right for a 400-wide window. width / 2 is right for any of them, and one challenge in this topic is deliberately not square so you can see the difference.

For a row of shapes, name the gap once — var step = width / 5; — and put each shape some number of steps along. Change that one line and the whole row respaces itself.

The same maths sizes shapes as well as placing them. One box called scale, multiplied into three sizes, resizes all three at once.

A last note: a position on screen cannot be judged to the pixel, so where a challenge needs an exact one it tells you the number to aim for.

Everything from this course in one place: number variables, words, the four sums, and placing shapes with width and height.

As in the last topic of Course 1, each picture has missing lines with a // comment above telling you what to write. The difference is that positions should now be worked out from variables rather than typed as fixed numbers. If a comment says "60 left of the middle", that is width / 2 - 60, not 140.

It gives the same answer today, but it says why. Written that way the picture still holds together if a number above it changes, and it reads as a description of the drawing rather than a list of measurements someone once took. That is the habit worth building.

Two things make these easier than they look. Most pictures are symmetrical, so a line you have already written is usually most of the next one — copy it and change the number that differs. And where a value is already sitting in a box, use its name rather than the number inside it.

Take the lines one at a time and press Run after each. A picture that is half right scores partly right, so you can watch yourself getting closer rather than guessing at the end.

The biggest step so far: bigger pictures, more shapes, and most of the drawing left to you.

What you are given is the scaffolding — the background, the colours, and a group of variables at the top holding the important positions and sizes. What you write is the shapes themselves.

One rule keeps this a variables topic: place every shape relative to a variable, or to width and height, and never by typing a raw pixel number. The comments are worded that way on purpose — "a quarter down", "70 above groundY" — so reach for the variable named at the top rather than working the number out in your head.

Most of these pictures are symmetrical, and that halves the work: write the left-hand shape, copy the line, and flip the sign. One catch, though. A circle is placed by its middle, so its mirror really is the same number with the sign changed. A rectangle is placed by its LEFT edge, so a mirrored pair needs its own width taken off one side — which is why you will see a pair like "25 left of the middle" and "21 right" for two rectangles four pixels wide. That is correct, not a typo.

And not everything that looks like a pair is one. Some are deliberately uneven — a castle with one tower taller than the other, a robot with one arm raised. The comments always say which, so read them rather than assuming.

Seven or eight shapes is a lot to hold in your head at once, so do not try. Write one line, press Run, check it landed where you meant it to, then write the next.