8_1_3

WHAT: Understand how images can be represented and manipulated using Binary digits

SMART START:

How many colours could you use if you had a 3 bit colour depth image?

Extra Mile:

How many bits per pixel would be needed to store an image with 20 colours?

HOW:

Activity 1 - Read

A bitmap image file stores the colour of every single pixel in an image. They take up a lot of storage space. Below is a representation of a 1 bit depth image. It uses two colours, black and white.

Imagine each block above is a pixel. A bitmap image would save this file as:

white, white, white, white, white, white, white, white, white, white, white, white, black, black, white, white, black, black, white, white etc...

Or in binary this would be:

00000000000011001100 etc...

A computer wouldn’t be able to output this on the screen with just these binary digits alone. It also needs something called metadata.

Metadata is the extra data that is required for the computer to create the image. It will need to know the resolution of the image, the bit-depth (or colour-depth) and when the file starts and ends.

The metadata for the image above would be:

  • Resolution - 10 x 7 pixels
  • Bit-depth - 1 bit per pixel

Activity 2

A 1-bit depth images can only use 1 bit to represent each pixel. This means that you can only ever have 2 colours because there are only 2 combinations of 1's and 0's that can be used. 

1
0

A 2-bit depth image can use 2 bits to represent each pixel. Now we have 4 possible combinations of 1's and 0's. 

00
11
10
01

A 3-bit depth image can use 3 bits per pixel. Now we have even more combinations and more colours to use. 

000
001
010
011
101
111
100
110

Can you spot the pattern?

The number of colours doubles each time an extra bit is added.

How many colours could be used with a 5-bit depth image?

Activity 3

Create your own pixel art using 3-bits. Click on the spreadsheet below to try this yourself. You might need to download the file in order to make changes.

Pixel Art

CHECK:

EMBED:

Create your own version of the spreadsheet used in Activity 3 using 4 bits. I made my spreadsheet using conditional formatting in Google Sheets.

  1. Create your layout
  2. Select the layout and the pallet and change the data type to plain text
  3. Type your binary digit combinations into the pallet
  4. Highlight the layout and the pallet
  5. Go to Format > Conditional Formatting
  6. Choose "format cells if text contains" and type the number that you want to link with a colour
  7. Repeat for each colour

Watch the YouTube tutorial below if you need more help.

CLASSROOM IDEAS:

A practical way to introduce this activity is to give the students some squared paper and a limited amount of coloured pencils and ask them to create an image.

To make it even more fun you could use hama beads. An example of this can be seen in the image.

Students are given a limited number of "pixels" (beads) to create an image.

You can extend this activity by asking the students to calculate the file size of the image that they have created.