Exerpad
🔥 1
10 XP
Lesson · Chapter: Your First Frame+10 XP for reading

Frames

A cartoon is just pictures shown quickly, one after another. Each picture is called a frame. Show enough of them fast enough and your eye sees movement.

That is all animation is. No magic.

In this milestone you don't print pictures — you hand them over. You write a function called draw, and the computer calls it twenty times a second and puts whatever you return on the screen.

python
def draw(state):
grid = blank_grid()
return grid
Output
Press Run to see the output.

blank_grid() gives you a fresh picture: blue sky with a strip of brown dirt at the bottom. Your job is to change some squares and hand it back.

The picture is a list of lists

The grid is 14 rows tall and 40 columns wide. Each square holds a colour.

python
grid[0][0] # top-left square
grid[13][39] # bottom-right square
grid[5][20] # row 5, column 20 — near the middle
Output
Press Run to see the output.

Rows count downward. Row 0 is the very top of the sky. Row 13 is the bottom, down in the dirt.

To colour a square, assign to it:

python
grid[3][10] = "red"
Output
Press Run to see the output.

You can use ordinary colour names — "red", "gold", "lime", "white" — or codes like "#ff8800".

Two helpers you already have

WIDTH is 40. HEIGHT is 14. GROUND is 12 — the row things stand on.

Use those names instead of typing the numbers. If you write for col in range(40) and the grid ever gets wider, your code breaks. range(WIDTH) keeps working.

One rule that catches everyone

draw must return the grid. Colouring squares changes the picture, but if you forget to hand it back the computer gets nothing:

python
def draw(state):
grid = blank_grid()
grid[3][10] = "red"
# forgot to return!
Output
Press Run to see the output.

You'll see: "draw() didn't return anything. Add 'return grid' as its last line."

That message is your friend. It will find you at least once today.