Skip to content

Hour of Code · Unplugged activity

Programming the Math Sheet

15 min

Turn a blank grid into a picture by following movement and colour commands, one square at a time, and see that every image is just data.

What it teaches

That images are data, and that precise instructions produce precise output. The screen of any device is a grid of tiny squares (pixels). Here you are the programmer: you write a list of symbols, and anyone who follows it to the letter gets exactly the same picture. Change one command and the picture changes; forget one colour command and a pixel stays blank.

What you'll need

  • Squared paper, or draw a 5x5 grid on paper or a whiteboard.
  • A pencil and one colour to fill in squares.
  • A symbol legend: star = start square, arrows = move (up, down, left, right), filled square = colour this cell.

How to run it

  1. 1

    Agree on the legend together: a star marks where the pen starts, each arrow slides the pen one square in that direction, and a filled-square command means colour the square the pen is on now.

  2. 2

    One student is the programmer and writes a short list of commands. A second student is the computer and follows them exactly, one command at a time, never guessing what the picture should be.

  3. 3

    The computer moves an imaginary pen across the grid. On every colour command they fill the current square; on every arrow they slide one square and colour nothing.

  4. 4

    Compare the finished grid with the picture the programmer had in mind. Any wrong or missing square is a bug: find the command that caused it and fix the list.

  5. 5

    Swap roles. Try a bigger picture, or hand your command list to someone who has not seen the drawing and check whether they can reproduce it exactly.

Try it now

Try drawing a plus sign on a 3x3 grid. Start in the middle square and run: Colour; Up, Colour; Down, Down, Colour; Up, Left, Colour; Right, Right, Colour. The pen fills the centre, then the top, bottom, left and right squares, leaving the four corners blank, a neat plus. Now change one arrow and watch the plus break, that is exactly how a single wrong pixel appears on a real screen.

Talk about it

Ask the class: if a photo is millions of tiny coloured squares, what is the computer really storing? Just numbers. Every image, on every screen, is data that an instruction wrote down.

Developed by alphaPlan Center.

Found something unclear, outdated or improvable? Suggest an improvement