1, 2, 3, code ! - Cycle 3 activities - Lesson 3.2. How to code a black and white image

Summary

Students apply what they learned in the previous lesson by coding black and white images. They first view a single file in a text editor and an image editor to understand how the information is coded. They then code a small checkerboard themselves.

Key ideas
(see Conceptual scenario)

"Information"

  • An image can be represented by a grid of squares called pixels.
  • A computer represents all information using a code with only two symbols, 0 and 1, called bits: this is binary code.
  • In black and white, each pixel can be represented by a single bit.

Inquiry-based methods

Observation, experimentation

Equipment

For each pair

  • Computer with basic text editing program (Notepad, for example) and a basic image editing program and file accessible to students containing the files III-3.2_research_BnW et III-3.2_challenge_BnW_blank.
  • Magnifying glass/microscope
  • Video projector

For the class

Glossary

Image, pixel, coding

Duration

1 hour

Teaching notes:

  • It is highly recommended to use the image editor XnView in its minimal version, because of the following advantages:
  1. It is free for educational use;
  2. It correctly reads files in PBM format (and PGM and PPM for Lesson 3.3);
  3. It has a simple interface;
  4. Zoom function possible without entering text, using magnifiers “+” and “-”;
  5. An open image can be refreshed (“Reopen” in the “File” menu or use keyboard shortcut “Ctrl + R”), which facilitates students’ trial and error.
  • XnView can be downloaded here: http://www.xnview.com/en/xnview

 

Introductory question

The students pay attention to the board, where the teacher shows them the picture of the apple they pixelated to 256 pixels (Grid 2) in the previous lesson (Handout 39, Image A): “Our explorers want to send this image to the base, without travelling there.  How can they do it?”

In the ensuing discussion, the class suggests several methods and various concepts. The teacher writes the different ideas on the board. In particular, several suggestions should be explored further, such as “there are white pixels and black pixels”, or “each pixel can be described in Morse code with a flashlight”.

The suggestions are an opportunity to remind students of the key idea of binary code (0 for black pixels, 1 for white pixels) if this key idea was addressed in Lesson 1Imagine if the explorers couldn’t send a simple text message (SMS) to describe this image.” Little by little, the students evoke the possibility of a text composed of 0s and 1s being enough to define the image.

 

Observation: Understanding how a black and white image is encoded (first as a class, then in pairs)

In order to check if a text written with 0s and 1s is enough to represent a pixelated black and white image, the teacher shows the students how to open the text file III-3.2_research_BnW.pbm with a basic text editor (Notepad in Windows, for example). The file contains the following:

P1
16 16
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0
0 0 0 0 0 0 0 1 1 1 1 1 1 1 0 0
0 0 0 0 0 0 0 1 1 1 1 1 0 1 1 0
0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 0
0 0 0 1 1 1 1 1 0 1 1 1 1 0 1 0
0 0 1 1 0 0 0 0 0 0 0 0 0 1 1 0
0 0 1 0 0 0 0 0 0 0 0 0 0 1 1 0
0 0 1 0 0 0 0 0 0 0 0 0 1 1 1 0
0 0 1 0 0 0 0 0 0 0 0 0 1 0 1 0
0 0 1 1 0 0 0 0 0 0 0 1 1 0 0 0
0 0 0 1 1 0 0 0 1 1 1 1 1 0 0 0
0 0 0 0 1 1 1 1 1 1 1 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

 

The teacher explains that this file is a digital version of the image of the pixelated apple in 16x16 pixels. They ask the class if the grid of 0s and 1s appears to correctly illustrate the apple. It does, as we can see some of the leaf and the outline, visible in the 1s. If the students appear uncertain, the teacher can automatically replace all the zeros with periods (.) in Notepad using Ctrl + H. The apple can then be seen very clearly (this can be quickly undone with the command “Ctrl + Z”).

 

The teacher asks if there is anything else in the file aside from the grid of 0s and 1s. Students study the first two lines of the file and may suggest that 16 and 16 corresponds to the pixel grid’s dimensions. The teacher explains that these first lines define the format of the data written to this file: “P1” indicates binary code (0s and 1s only) and the “16 16” line tells us that a table of 16 columns and 16 lines of data will follow. There are 16x16=256 bits (0s and 1s) in the file (description of the actual pixel grid).

The teacher then shows the class how to view this file with an image editor rather than a text editor, such as XnView (see teaching note at the beginning of the lesson). The apple appears very small. To see it properly, you need to zoom in completely. The class notices, by comparing the grid of 0s and 1s and the image of the apple, that the black pixels are encoded with a 1 and the white pixels with a 0.

They immediately practice what the teacher has shown them: they open a file using both a text editor and an image editor (see upper section of Handout 41). They look at the miniature apple using a magnifying glass on the screen before zooming in, then zoom in as much as necessary.

 

A group summary is written about the file format: P1 on the first line, the number of columns and the number of lines on the second, then a grid of 1s (for black) and 0s (for white) of suitable size on the following lines.

Scientific notes:

  • The PBM extension on the file means “portable bit map”.
  • If, in the pixel grid, there are values other than 0 and 1, they are interpreted modulo 2: 0 produces white, 1 produces black, 2 (and all even values) produces white again, 3 (and all uneven values) produces black, etc. 

Challenge in pairs: Digitally encoding a checkered grid

The teacher gives the class a challenge: they must use the text editor to create a file representing a small, black and white checkered grid with 5 lines and 5 columns, with black squares in each corner. The file, which is empty for now, is called III-3.2_challenge_BnW_blank.pbm.

Then they save the file and open it with the image editor, without closing the text editor, and call the teacher once they have the file opened side by side in both programs, with the checkered grid visible in the image editor.

The students should suggest the following code:

P1
5 5
1 0 1 0 1
0 1 0 1 0
1 0 1 0 1
0 1 0 1 0
1 0 1 0 1

 

Conclusion and lesson recap activity

The class summarizes together what they’ve learnt in this lesson:

  • The pixels of an image can be represented by numbers.
  • Each pixel in a black and white image is represented by either a 0 (white pixel) or a 1 (black pixel).
  • To send a black and white image, we have to encode it and send the coded version, which is decoded upon receiving to reproduce the image.

 

Students write down these conclusions in their science notebook. The teacher updates the “Information” section of the poster entitled “Defining computer science”. 

 

 


<< Lesson 3.1 Sequence III Lesson 3.3 >>

 

Project partners

Aucun résultats