OER.ai

← Image Representation (Colour by Numbers)

Kindergarten–Grade 1 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—Computer Pictures

What Is This About?

Computers store pictures.
They use only numbers to do it.
This activity shows you how.

Think About This

  1. What does a fax machine do?
  2. When do computers need to store pictures?

A drawing program needs pictures.
A game needs pictures too.

  1. Computers only use numbers.

How can numbers make a picture?

Pixels: Tiny Picture Dots

A computer screen is made of tiny dots.
The dots are called pixels.
Pixel means "picture part."

In a black and white picture, each dot is one color.
Each pixel is black.
Or each pixel is white.

Look at the letter "a" on a screen.
Zoom in close.
You can see all the little pixels!

A computer just needs to remember one thing.
Which dots are black.
Which dots are white.

Turning Pictures Into Numbers

Here is how it works.

The first line of dots might be:
1 white dot, then 3 black dots, then 1 white dot.
We write this as: 1, 3, 1.

The first number always counts white dots.
If the row starts with black, we write a 0 first.
Then we count the black dots.

This way, every line of dots becomes numbers.
The whole picture becomes a list of numbers!

Try It Yourself: Kid Fax

Look at the number lists.
Color in the dots they describe.

The first picture is easy.
The last picture is harder.
Use a pencil.
Keep an eraser close by!

Make Your Own Picture

Now you know the secret code.
Try making your own coded picture.

Draw a picture on a grid.
Write down the numbers for your picture.
Give the numbers to a friend.
Let your friend color it in!

You do not have to fill the whole grid.
Just leave blank lines if your picture is small.

Extra Challenge: Add Color!

Want to use colors, not just black and white?
Pick a number for each color.
0 can mean black.
1 can mean red.
2 can mean green.

Now each run of dots needs two numbers.
The first number tells how many dots.
The second number tells the color.

Make a colored picture for a friend.
Tell your friend which number means which color!

More Ways to Play

Try drawing on tracing paper over the grid.
Lay it on top.
Your picture will look clearer this way.

Or skip coloring.
Use small squares of sticky paper instead.
Stick them onto a big grid.

Why Do We Need This?

A fax machine is a simple computer.
It looks at a black and white page.
It turns the page into pixels.
It sends the pixels to another fax machine.
That machine prints the picture.

Pictures often have big blocks of one color.
Think of white margins.
Think of a black line.

Computers can shrink this information.
This is called compression.
It means making the numbers take up less space.

Our number trick is called run-length coding.
It counts runs of the same color.
This saves lots of space!

Without compression, sending pictures would be slow.
Fax pictures usually shrink to one-seventh their size.
That means they can send seven times faster!

Photos can shrink even more.
Some shrink to one-tenth their size.
Some shrink to one-hundredth their size!

This lets computers store more pictures.
This lets pictures load faster on the web.

Programmers get to choose the best way to shrink each picture.

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