Make a Picture

A program is a list of instructions for a computer. In this module your instructions draw shapes, so you can see at once whether the computer did what you meant. You need no experience: this is where the course starts.

By the end you will be able to read a line of drawing code and say what it draws and where, write a short program that draws a picture someone has described to you, and use an error message to find the line that is wrong.

A program is a list of instructions

Here is a whole program. Read it from the top.

from scimigo import canvas, rectangle, circle

canvas(600, 400)
rectangle(200, 100, 200, 200, color="orange")
circle(300, 200, 60, color="blue")

Python does the first line, then the second, and carries on down the page until there are no lines left. The line starting with from brings in the drawing instructions; every program in this module begins with it, and it is written for you. canvas(600, 400) makes an empty picture. Then one line draws an orange box, and the next draws a blue disc.

Those drawing instructions are not part of Python itself. Python is the language: the order of the lines, the names, the numbers and the text, and later the decisions, loops, functions and lists. canvas, rectangle and circle come from scimigo, a small set of drawing tools made for this course, and that is why a program has to bring them in before it can use them. Everything you learn about the language here is ordinary Python and works wherever Python runs. The drawing tools work on these pages.

The disc is in front of the box because its line comes later. Each shape is painted over whatever is already there. Swap the last two lines and the program still draws both shapes, but you see only one:

from scimigo import canvas, rectangle, circle

canvas(600, 400)
circle(300, 200, 60, color="blue")
rectangle(200, 100, 200, 200, color="orange")

The disc was drawn first and the box was painted on top of it. Nothing went wrong. The order of the lines is part of what the program says.

One instruction, taken apart

Look closely at one line:

circle(300, 200, 60, color="blue")

circle is the name of the instruction. The parentheses hold the details it needs, separated by commas. Using an instruction like this is called calling it, and the details are its arguments.

The first three arguments have fixed jobs, decided by their position: how far the centre is from the left, how far it is from the top, and how big the disc is. If you swap two of them, Python does not notice. It draws a different picture:

from scimigo import canvas, circle

canvas(600, 400)
circle(300, 100, 60, color="blue")
circle(100, 300, 60, color="lightblue")

The second line has the first two numbers the other way round. Python did exactly what it was told both times, so there is no error message to help you. When a shape appears in the wrong place, check the order of its arguments first.

These are the four drawing instructions you have in this module:

Instruction What it draws
canvas(width, height) An empty picture. Always first.
circle(x, y, radius, color="...") A disc with its centre at (x, y)
rectangle(x, y, width, height, color="...") A box with its top-left corner at (x, y)
text(x, y, "words", size=...) Words that start at (x, y)

Where is (x, y)?

Every position is two numbers. The first, x, says how far to go from the left edge. The second, y, says how far to go down from the top.

from scimigo import canvas, circle, text

canvas(600, 400)
circle(100, 100, 12, color="red")
text(120, 106, "(100, 100)", size=16)
circle(500, 100, 12, color="red")
text(385, 136, "(500, 100)", size=16)
circle(100, 300, 12, color="red")
text(120, 306, "(100, 300)", size=16)
x=100x=200x=300x=400x=500y=100y=200y=300(0, 0)(100, 100)(500, 100)(100, 300)

If you have drawn graphs at school, this will feel upside down: there, a bigger y is higher up. On a screen a bigger y is lower down. The point (0, 0) is the top-left corner. Almost every beginner places a shape too high or too low at least once because of this, and now you know why.

A circle is placed by its centre. A rectangle is placed by its top-left corner, and then stretches to the right and downwards.

Numbers, and text in quotes

The arguments so far have been of two kinds. 300 is a number. "blue" is text, and the quotes are what make it text.

The quotes matter. Without them, Python does not see a word. It sees a name, and expects to have been told what that name means:

from scimigo import canvas, circle

canvas(600, 400)
circle(300, 200, 60, color=blue)
  File "your_program.py", line 4
    circle(300, 200, 60, color=blue)
NameError: name 'blue' is not defined

The report names line 4 and quotes it. Python is not complaining about the colour. It is saying that nobody has told it what blue is. With quotes, "blue" is simply the four letters b, l, u, e, and circle knows what to do with those.

In the other direction, "300" in quotes is text, the characters 3, 0 and 0. It is not the number three hundred. A position needs a number, so it is written without quotes.

Arguments with names

color="blue" is an argument with a label on it. So is the size in this line:

from scimigo import canvas, text

canvas(600, 400)
text(150, 210, "Hello, Python", size=48)
Hello, Python

A labelled argument says which detail it is, so it does not depend on position, and you can leave it out when the usual value will do. Positions and sizes are given by position; colour and text size are given by name.

When Python says no

Sooner or later a program will not run, and Python will print a message. This is normal. People who have programmed for twenty years see these messages every day. A message has three useful parts: the line it is about, the kind of problem, and a few words about it.

from scimigo import canvas, circle

canvas(600, 400)
circl(300, 200, 40)
  File "your_program.py", line 4
    circl(300, 200, 40)
NameError: name 'circl' is not defined. Did you mean: 'circle'?

The report says which line: line 4. The kind is the first word of the last line, and the words after it say what Python could not do. Here a name is spelt wrongly: circl where circle was meant. To Python they are two different names, and it has only been told about one. This time it even suggests the name you probably meant. It will not make the change for you.

Three mistakes account for most early errors:

What happened What Python reports
A name is misspelt, or text has no quotes A name it does not know
A quote or a parenthesis was opened and never closed A problem with how the line is written, often reported at the line after the real mistake
A comma is missing between arguments A problem with how the line is written

When you get a message, read its last line first for the kind of problem, then find the line number and look at that line of your program, and then at the line above it.

In the lab

The lab starts by running a robot program and changing a colour. Then you will be shown a few lines and asked what they draw, before you run them. Then you will move a robot's eye, finish the robot, and draw a house from a description in words, choosing every number yourself.