OER.ai

← Image Representation (Colour by Numbers)

Grades 4–5 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.

Activity 2

Colour by Numbers—How Computers Store Pictures

Summary

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

Skills

  • Counting
  • Graphing

Materials

  • An overhead transparency called "Colour by numbers"
  • Each child will need two worksheets: "Kid Fax" and "Make Your Own Picture"

Colour by Numbers

Introduction

Discussion Questions

  1. What do fax machines do?
  2. When would computers need to store pictures? (Think about a drawing program, a video game, or a website with images.)
  3. How can computers store pictures if they can only use numbers?

You might want to have your class send or receive a real fax before doing this activity.

Demonstration

Computer screens are made up of 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" has been zoomed in on to show its pixels. When a computer stores a picture, it only needs to remember 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 shows how a picture can be turned into 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 always tells how many white pixels come first. If the very first pixel is black, the line starts with a 0.

Kids can use this method to figure out hidden pictures on the worksheet.


Worksheet Activity: Kid Fax

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

(Number codes for coloring in the pictures go here.)


Worksheet Activity: Make Your Own Picture

Now that you know how numbers can stand for pictures, try making your own coded picture for a friend! Draw your picture on the top grid. When you're done, write the number codes next to the bottom grid. Cut along the dotted line and give the bottom grid to a friend so they can color it in. (You don't have to fill the whole grid — just leave blank lines at the bottom if your picture is smaller.)

Extra for Experts: Want to make a colored picture instead of black and white? Use a number to stand for each color (for example: 0 = black, 1 = red, 2 = green). Now you'll need two numbers for each run of pixels — the first number tells how many pixels are in the run, and the second number tells the color. Try making a colored picture for a friend. Just make sure to tell them which number means which color!


Variations and Extensions

  1. Try placing a sheet of tracing paper over the grid while drawing. This way, the finished picture can be seen without the grid lines, making it look clearer.
  2. Instead of coloring the grid, kids could use small squares of sticky paper, or place small objects on a bigger grid.

Discussion Point: Usually, there's a limit to how long a "run" of pixels can be, because the length is stored as a special kind of number (called binary). Here's a challenge: how would you show a run of twelve black pixels if you could only use numbers up to seven? (Hint: you could code seven black pixels, then zero white pixels, then five more black pixels.)


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. These pixels are sent through a device called a modem to another fax machine, which prints the pixels back out on paper.

Fax pictures often have big blocks of all-white space (like the margins) or all-black space (like a line). Colored pictures also repeat a lot of the same colors. To save storage space, programmers use tricks called compression techniques to shrink pictures down.

The method used in this activity is called run-length coding, and it's a great way to compress images. Without compression, it would take much longer to send pictures, and they would need much more storage space. That would make it very hard to send faxes or put photos on a website.

For example, fax pictures are usually squeezed down to about one-seventh of their original size. Without compression, they would take seven times as long 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 web.

Programmers get to choose which compression trick works best for the pictures they are sending.

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