Introduction

Recap the last lesson. What is binary code? How is it written? What do the columns represent? What are these binary numbers?

 

• 0011
• 1010
• 11100
• 100100

 

Last lesson we learned how binary data can be converted into decimal numbers and then also into letters if we add another layer of encryption, for which we need a key. In this lesson we are going to focus on how binary data can be used to represent other things as well, in particular images.

Images on a computer have been digitised and are shown on the screen as lots of tiny squares called pixels (short for ‘picture element'). To store a picture, the computer simply records a number to represent the colour of each pixel. Binary data is used for this.

 

So what is this picture?

000000010010000000010010011110000000

 

On their own these bits mean nothing to us. But with a bit of extra information, the computer can be told how to deal with the data, how many bits represent a pixel (colour depth) or how to arrange it, this is called metadata. Perhaps like this in a 6 x 6 grid: 

 

 

Each square is known as a pixel and this way of arranging the binary code in a grid is called a bitmap. It is called a bitmap because it is a 'map' of where the 'bits' of information are stored. Common bitmap image file types include JPEG, GIF and PNG. 

A bit more code might tell the computer how to interpret to data, let’s say ‘make 1s black and a 0s white’, what will that do to our grid of binary data? It creates a very simple pixel image with binary.

 

 

The dimensions of the bitmap are really important or the image won’t be displayed correctly. This data works fine in a 6 x 6 grid, but the same data in a 4 x 9 grid ruins the image:

 

 

In a simple black and white image only 1 bit per pixel is required as there are only two options for what the colour could be. 

Show the students this short video which shows more examples of how images can be created using binary code:

 

 

Main task 1

Give the students a copy of Binary pixel maps. Ask them to have a go at creating their own Binary pixel maps, start off with just using black and white and one bit per pixel. Make a simple pattern or picture, then write out the binary code for your image. 

 

 

This example (below) is shown in the teacher presentation, along with the binary code below it.

 

 

We’ve separated the code out into chunks which illustrate one line of the pixel map at a time. There would be no spaces in the code in reality, just one long string of bits. If this were saved as an image file, what other data do you think the image file would contain? What else does the computer need to know apart from the content/colour of each pixel? The file would also contain data that told the computer the dimensions of the image and how many bits per pixel were being used. 

 

More colour!

But this is a huge simplification of how things work in reality. If we want more colours in our image we need more than just two options (1 or 0, black or white), so for that we need more 'bits'.

This image is still made up of just four colours and therefore uses two bits per pixel. In this case the four colours are represented by four two-bit binary numbers, like this:

 

00 = black

01 = dark grey

10 = light grey

11 = white

 

 

Or we could interpret the 2 bits per pixel as different colours and end up with this image:

 

00 = red

01 = orange

10 = yellow

11 =  white

 

 

We call this representation of colours a “bit-plane”, and is also classed as metadata. Each extra bit doubles the number of available colours i.e. 1-bit gives us 2 colours, 2-bits give us 4 colours, 3-bits would give us 8 colours, which links back to binary numbers and the biggest numbers you can represent with 1, 2 or 3 bits. 

With 8 bits per pixel, we can represent 256 different shades of a colour. This gives a complete grey scale and is enough for a black and white photograph, but does not allow for subtle shades of colour in a colour photograph. 

 

A 256 level grayscale

 

The colours of all pixels are actually made up by mixing red, green and blue. What’s special about these colours?  They are the primary colours which the children should have learned about at some point in science or perhaps when painting and mixing colours! 

 

 

Any other colour can be created with a combination of red, green and blue.  This image is a close up of pixels on a screen. Each pixel is made up of tiny red, green and blue lights which can be seen when magnified like this. 

 

 

Adjusting the brightness of these individual colours changes the overall colour of the pixels, and in turn the image we see represented on the screen. 

 

For full colour images:

• 8 bits are used to represent 256 shades in the red spectrum 
• 8 bits are used to represent 256 shades in the green spectrum
• 8 bits are used to represent 256 shades in the blue spectrum
• So that’s 24 bits in total for each pixel as every colour is made up of some amount of red, green and blue.
• Which gives 16,777,216 possible colours! (255 x 255 x 255)

 

To reinforce all of this learning about pixels, show this great video from code.org.

 

 

Main task 2

Next give the students a copy of Pixel Colours and Binary. 

 

 

Explain that the grid represents 16 pixels on a screen. They are going to create a simple coloured pattern by colouring in each pixel with a colour. Then they are going to try and work out roughly how it would be shown on a screen; that is, how much red, green and blue would be used to make the colour they have chosen for each pixel, and how a computer would convert/read that colour as a binary number.

 

1. Choose 4 colours and create a pattern in the grid by colouring each ‘pixel’ in with felt pens or coloured pencils. Use one colour per pixel

For example:

 

2. Go to https://www.w3schools.com/colors/colors_picker.asp. Use the colour picker at the top of the screen  to try and find the colour closest to the first one  you’ve used on your paper. Take note of the RGB number combination that makes that colour.

 

The shade of blue in this example is made up of R:51  G:102   B:255

 

 

If you can’t find a colour close enough for your liking, scroll down the page to see more shades which may be closer to your colour. Each one has its RGB value in the table. 

 

 

 You can even use the colour mixer at the bottom to try and manually create your colour if needed.

 

 

Add the RGB numbers in the data key section on the sheet.

 

 

3. Then you must convert the RGB colour code into binary, as a computer would. For this you need to convert each RGB number into an 8 bit binary number, which will give you a 24 bit number when you put them together.  You can try and work one out on paper to start with, or use this converter tool if needed (don’t forget to add extra 0s at the start if needed to make it up to an 8-bit number)

E.g.

00110011 = R:51

01100110 = G:102 

11111111 = B:255

 

So the colour’s binary number is these three numbers combined:

001100110110011011111111

 

Add this to the Data Key section of your sheet as well.

 

 

Then repeat for the other three colours.

 

4. Finally, complete the question at the bottom of the sheet: So how many bits in total would be needed to create this pattern of pixels on a screen?  384 (24 bits per pixel x 16 pixels).

 

Here’s a finished example:

 

 

Resolution and compression

The more data (bits) in a bitmap image, the more space it takes up on a computer’s hard drive, but the more pixels in an image the better quality (smoother) it looks. We say an image with more pixels has a higher resolution.

Real images of course use a much greater number of pixels than we have seen so far. For example, a 12-megapixel camera takes images that measure about 4000 x 3000 pixels, like this photograph:

 

 

If each of those pixels is stored as a 24-bit value, that image would consist of:

4000 x 3000 x 24 = 288,000,000 bits of information! 

That is 36,000,000 bytes or approximately 34.3 MB. 

However, if you were to look at an image file produced by this camera, you would actually find it to be much smaller than 34 MB, even though the file also stores extra information beyond the contents of each pixel (the dimensions of the image, how many bits per pixel, etc). 

The size of the image above on disk is actually only 4,509,588 bytes (or 4.5 MB).

 

 

This is because the image has been compressed - most common image formats (gif, jpeg, png) include some form of compression to reduce the space needed to store their information.

You can find out more about different ways that data can be compressed to make a file smaller in this video from code.org. 

 

 

Plenary

Ask the students to explain to a partner in their own words how a computer stores and displays an image on the screen. They should try and use these keywords and phrases: pixels, colour, red, green and blue values, 24 bits per pixel, binary number, metadata, image dimensions. 

So we now know how images are created with binary code. Everything else on your computer; text, sound, video, graphics, are also all converted into a series of numbers, which can then be converted to binary code, and read by the computer as a series of electrical impulses flowing through circuits faster than the blink of an eye.