Colour by Numbers—Image Representation

Summary

Computers store drawings, photographs, and other pictures using only numbers. This activity shows how they manage to do that.

Curriculum Links

• Mathematics: Geometry Level 2 and up. Exploring Shape and Space.

Skills

• Counting
• Graphing

Ages

• 7 and up

Materials

• An overhead transparency made from the OHP Master: Colour by Numbers

Each student will need:

• Worksheet Activity: Kid Fax
• Worksheet Activity: Make Your Own Picture

---

Colour by Numbers

Introduction

Discussion Questions

1. What do fax (facsimile) machines do?
2. In what situations would computers need to store pictures? (Think about a drawing program, a video game with graphics, or a multimedia system.)
3. How can computers store pictures if they can only work with numbers?

You might want to have students send or receive a fax as preparation for this activity.

Demonstration Using the OHP Transparency

Computer screens are divided into a grid of tiny dots called pixels (short for "picture elements"). In a black-and-white picture, each pixel is either black or white.

The letter "a" shown on the transparency has been enlarged so you can see the individual pixels that make it up. When a computer stores a picture like this, all it really needs to remember is which dots are black and which are white.

```
1, 3, 1
4, 1
1, 4
0, 1, 3, 1
0, 1, 3, 1
1, 4
```

This set of numbers shows how a picture can be represented using only numbers. Look at the first line: it has one white pixel, then three black pixels, then one white pixel. So that line is written as 1, 3, 1.

The first number in each line always tells you how many white pixels come first. If a line actually starts with a black pixel, then the first number will be a zero (meaning "zero white pixels before the black ones begin").

The worksheet Kid Fax gives students some pictures they can decode using this same method.

---

OHP Master: Colour by Numbers

• A letter "a" from a computer screen, along with a zoomed-in view showing the pixels that make up the image.
• The same image, now written using number codes:

```
1, 3, 1
4, 1
1, 4
0, 1, 3, 1
0, 1, 3, 1
1, 4
```

• A blank grid (for teachers to use during instruction)

---

Worksheet Activity: Kid Fax

The first picture is the easiest, and the last one is the trickiest. Since it's easy to make small mistakes, it's a good idea to color with a pencil and keep an eraser nearby!

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 Activity: Make Your Own Picture

Now that you understand how numbers can stand for pictures, try creating your own coded picture for a friend to solve! Draw your picture on the top grid. When you're finished, write down the code numbers next to the bottom grid. Cut along the dotted line, then give the bottom grid (with just the numbers) to a friend so they can color it in and reveal your picture.

Note: You don't have to fill the whole grid. If your picture doesn't use every row, just leave the extra lines at the bottom blank.

(Blank grids for drawing and coding appear here.)

---

Worksheet Activity: Make Your Own Picture — Extra for Experts

If you want to create colored images instead of just black-and-white ones, you can use a number to stand for each color. 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 instead of one: the first number tells you how many pixels are in the run (just like before), and the second number tells you what color they are.

Try making a colored picture for a friend using this method. Just remember to tell your friend which number stands for which color, or they won't be able to solve the puzzle!

(Blank grids for drawing and coding appear here.)

---

Variations and Extensions

1. Try placing a sheet of tracing paper over the grid while you draw. That way, once you're done, you can lift the tracing paper off and see the final picture without any grid lines getting in the way—it will look much clearer.
2. Instead of coloring in the grid squares, students could use small squares of sticky paper, or place small objects onto a larger grid, to build their picture.

Discussion Point

Normally, there's a limit to how long a "run" of same-colored pixels can be, because the length has to be written as a binary number (a number made up of just 0s and 1s, which is how computers store information). Here's a challenge: How would you represent a run of twelve black pixels if you were only allowed to use numbers up to seven?

(One good solution: write it as a run of seven black pixels, followed by a run of zero white pixels, followed by a run of five more black pixels. Added together, that's still twelve black pixels in a row!)

---

What's It All About?

A fax machine is really just a simple computer. It scans a black-and-white page into roughly 1,000 × 2,000 pixels, then sends that information using a device called a modem to another fax machine, which prints the pixels back out onto paper.

Fax images often contain large blocks of all white space (like the margins of a page) or all black space (like a solid horizontal line). Colored pictures also tend to have a lot of repeated patterns. To save storage space, programmers use different compression techniques—clever methods for shrinking down how much information needs to be stored or sent.

The method used in this activity is called run-length coding, and it's an effective way to compress images. Without compression, sending pictures would take much longer and require far more storage space—so much more, in fact, that sending faxes or posting photos on websites would become impractical. As an example, fax images are usually compressed down to about one-seventh of their original size. Without that compression, they would take seven times as long to send!

Photographs and other pictures are often compressed down to a tenth, or even a hundredth, of their original size, using a different technique. This means far more images can fit on a disk, and pictures load much faster when you view them on the web.

Programmers get to choose which compression technique works best for whatever type of image they're trying to send.