OER.ai

← Image Representation (Colour by Numbers)

Grades 2–3 reading level

Image Representation (Colour by Numbers)

Adapted with AI from the original open resource by CS Unplugged. Nothing is invented — only the reading level changes.

Colour by Numbers — How Computers Store Pictures

Activity 2: Colour by Numbers — Picture Representation

Summary

Computers keep drawings, photos, and pictures using only numbers. This activity shows how they do it.

What You Need to Know First

  • Math skills: Shapes and space (Level 2 and up)
  • Skills used: Counting and graphing
  • Ages: 7 and up

Materials

  • A special sheet for the teacher to show the class (called an OHP transparency)
  • A worksheet called Kid Fax
  • A worksheet called Make Your Own Picture

Colour by Numbers

Let's Talk About It

  1. What does a fax machine do? (A fax machine sends pictures of pages to another machine far away.)
  2. When would a computer need to store a picture? (Think about a drawing program, a video game, or a website.)
  3. How can a computer store a picture if it can only use numbers?

Tip for teachers: It might help to send or get a real fax before doing this activity!

Watching the Demonstration

Computer screens are made of a grid of tiny dots. Each dot is called a pixel (which is short for "picture element"). In a black-and-white picture, every pixel is either black or white.

Look at the letter "a." If you zoom in super close, you can see all its pixels.

To store a picture, a computer just needs to remember which dots are black and which are white.

Here is the code for the letter "a":
```
1, 3, 1
4, 1
1, 4
0, 1, 3, 1
0, 1, 3, 1
1, 4
```

This shows how numbers can stand for a picture. Look at the first line: it has one white pixel, then three black pixels, then one white pixel. So we write it as 1, 3, 1.

The first number always tells us how many white pixels come first. If a line starts with a black pixel instead, we begin with a 0.

Now try the worksheet! You'll use this same method to figure out the pictures.


Worksheet: Kid Fax

The first picture is the easiest. The last one is the hardest. It's easy to make a mistake, so use a pencil and keep an eraser close by!

Picture 1:
```
4, 11
4, 9, 2, 1
4, 9, 2, 1
4, 11
4, 9
4, 9
5, 7
0, 17
1, 15
```

Picture 2:
```
6, 5, 2, 3
4, 2, 5, 2, 3, 1
3, 1, 9, 1, 2, 1
3, 1, 9, 1, 1, 1
2, 1, 11, 1
2, 1, 10, 2
2, 1, 9, 1, 1, 1
2, 1, 8, 1, 2, 1
2, 1, 7, 1, 3, 1
1, 1, 1, 1, 4, 2, 3, 1
0, 1, 2, 1, 2, 2, 5, 1
0, 1, 3, 2, 5, 2
1, 3, 2, 5
```

Picture 3:
```
6, 2, 2, 2
5, 1, 2, 2, 2, 1
6, 6
4, 2, 6, 2
3, 1, 10, 1
2, 1, 12, 1
2, 1, 3, 1, 4, 1, 3, 1
1, 2, 12, 2
0, 1, 16, 1
0, 1, 6, 1, 2, 1, 6, 1
0, 1, 7, 2, 7, 1
1, 1, 14, 1
2, 1, 12, 1
2, 1, 5, 2, 5, 1
3, 1, 10, 1
4, 2, 6, 2
6, 6
```


Worksheet: Make Your Own Picture

Now you know how numbers can make a picture. Try making your own coded picture for a friend!

Draw your picture on the top grid. When you finish, write the number codes next to the bottom grid. Cut along the dotted line. Give the bottom grid to a friend so they can colour it in.

(You don't have to fill the whole grid. If your picture is smaller, just leave the extra lines blank.)

Extra Challenge for Experts

Want to make a picture with colours, not just black and white? You can use a number to stand for each colour. For example: 0 could mean black, 1 could mean red, 2 could mean green, and so on.

Now each run of pixels needs two numbers: the first number tells how many pixels are in the run, and the second number tells the colour.

Try making a coloured picture for a friend. Just remember to tell them which number means which colour!


Extra Ideas to Try

  1. Put a piece of tracing paper over the grid and draw on that instead. Then you can lift it off and see your picture without all the grid lines. It will look clearer!
  2. Instead of colouring squares, try using small sticky-paper squares or little objects on a bigger grid.

Something to Think About

There's usually a limit to how long a run of pixels can be, because computers store the length as a special kind of number (called binary).

Here's a puzzle: What if you wanted to show a run of twelve black pixels, but you could only use numbers up to seven?

(One good way: write a run of seven black pixels, then a run of zero white pixels, then a run of five more black pixels. That adds up to twelve black pixels total!)


What's It All About?

A fax machine is really just a simple computer. It scans a black-and-white page into about 1,000 × 2,000 pixels. Then it sends those pixels through a modem to another fax machine, which prints the pixels back out on paper.

Fax pictures often have big blank spaces (like the margins) or long lines of black (like a horizontal line). Colour pictures repeat a lot too. So instead of storing every single pixel, computer programmers use tricks to shrink the file size. This is called compression.

The method you just learned is called run-length coding. It's a great way to make image files smaller.

Without compression, sending pictures would take much longer, and they'd need much more storage space. That would make it very hard to send faxes or put photos on websites!

For example, fax pictures are usually squeezed down to about one-seventh of their original size. Without that squeezing, they'd take seven times longer to send!

Photos and other pictures are often squeezed down to one-tenth—or even one-hundredth—of their original size, using a different method. This means many more pictures can fit on a disk, and they load much faster on the internet.

Programmers get to pick which squeezing method works best for the pictures they're sending.

Original licensed under CC BY-NC-SA 4.0. This adaptation is provided free by OER.ai.