Activity 2

Colour by Numbers—Image Representation

Summary

Computers store drawings, photographs, and other images using nothing but numbers. This activity shows how that's possible.

Curriculum Links

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

Skills

• Counting
• Graphing

Ages

• 7 and up

Materials

• An overhead projector (OHP) transparency made from the OHP Master: Colour by Numbers (page 16)

Each student will need:

• Worksheet Activity: Kid Fax (page 17)
• Worksheet Activity: Make Your Own Picture (page 18)

---

Colour by Numbers

Introduction

Discussion Questions

1. What do facsimile (fax) machines do?
2. In what situations would computers need to store images? (Examples: 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 may want to have students send and/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 image, each pixel is either black or white.

The letter "a" shown above has been enlarged so you can see the individual pixels that make it up. To store this picture, a computer only needs to record 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 sequence of numbers shows how a picture can be represented using only digits. The first line of the image contains one white pixel, followed by three black pixels, followed by one more white pixel — so that line is coded as 1, 3, 1.

By convention, the first number in each line always tells you how many white pixels come first. If a line begins with a black pixel instead, it starts with a 0 (meaning "zero white pixels first").

The worksheet on page 17 gives students several coded pictures to decode using this method.

---

OHP Master: Colour by Numbers

• A letter "a" from a computer screen, shown alongside a magnified view revealing its individual pixels
• The same image, coded using the number system described above:

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

• A blank grid (for teaching purposes)

---

Worksheet Activity: Kid Fax

The first picture is the simplest; the last is the most complex. Since it's easy to make mistakes, use a pencil so you can erase and correct as needed.

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 represent a picture, try creating your own coded image for a friend to decode. Draw your picture on the top grid. Once you're finished, write the code numbers next to the bottom grid. Cut along the dotted line and hand the bottom grid — with your codes — to a friend to color in.

(Note: You don't have to fill the whole grid. If your picture doesn't use every line, just leave the remaining rows blank.)

[Grid space for drawing]

---

Worksheet Activity: Make Your Own Picture (continued)

Extra for Experts: If you'd like to create a colored image instead of just black-and-white, assign a number to each color (for example: 0 = black, 1 = red, 2 = green, and so on). Now each run of pixels needs two numbers instead of one: the first number still tells you the length of the run, and the second number tells you which color to use. Try making a colored picture for a friend — and be sure to give them a key showing which number stands for which color!

[Grid space for drawing]

---

Variations and Extensions

1. Try placing a sheet of tracing paper over the grid while drawing, so the final picture can be viewed on its own, without the grid lines showing through. This makes the image look cleaner.
2. Instead of coloring in the grid, students could use small squares of sticky paper, or place physical objects, on a larger grid.

Discussion Point

In real computer systems, there's usually a limit to how long a "run" of same-colored pixels can be, because that length has to be stored as a binary number (a number written using only 0s and 1s, which is how computers represent all data).

Suppose you could only use numbers up to seven — how would you represent a run of twelve black pixels? (One good solution: code a run of seven black pixels, followed by a run of zero white pixels, followed by a run of five more black pixels.)

---

What's It All About?

A fax machine is essentially a simple computer. It scans a black-and-white page into roughly 1,000 × 2,000 pixels, sends that pixel data through a modem to another fax machine, and that second machine prints the pixels back out onto paper.

Fax images often contain large blocks of a single color — think of the white space in a margin, or a solid black horizontal line. Color images tend to have a lot of repetition too. To save storage space, programmers use various compression techniques — methods for shrinking the amount of data needed to store an image.

The method used in this activity is called run-length coding, and it's an effective way to compress images. Without compression, pictures would take far longer to send and require far more storage space — so much so that sending faxes or posting photos on a webpage would barely be practical. For instance, fax images are typically compressed down to about one-seventh of their original size. Without that compression, they'd take seven times as long to transmit.

Photographs and other pictures are often compressed even further — 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 viewing them online takes only a fraction of the time it otherwise would.

A programmer chooses whichever compression technique best fits the type of image being sent.