1, 2, 3, code ! - Cycle 3 activities - Lesson 3.3. (Optional) How to code a grayscale or color image


Students take what they learned in the previous lesson further by learning how to code  gray and color digital images.

Key ideas
(see Conceptual scenario)


  • An image can be represented by a grid of squares called pixels.
  • The more bits are combined, the greater the variety of elements can be represented.
  • In grayscale, every pixel can be represented by several bits.
  • In color, every pixel can be represented by 3 numbers (in one or several bits) that represent a quantity of red, green and blue. 

Inquiry-based methods

Observation, experimentation


For each pair

  • Computer with basic text editing program (Notepad, for example) and a basic image editing program (XnView, for example)
  • Folder that can be accessed by students, containing files III-3.3_research_grayscale, III-3.3_challenge_grayscale_blank, III-3.3_research_color et III-3.3_challenge_color_prefilled.
  • Hand-held magnifying glass

For the class

  • Video projector
  • Handouts 42 and 43 projected on the whiteboard


Image, pixel, coding 


1 hour 30 minutes, which can be divided into two 45-minute lessons


Introductory question

The teacher returns to the conclusions of the previous lesson: a black and white image can be coded with a pixel grid, by indicating 0 for a white pixel and 1 for a black pixel.

If the students suggested during Lesson 3.1 to improve the reproduction of the images of the fruits by coloring in the boxes in lighter or darker shades, the teacher picks up this suggestion, noted on the whiteboard: “When we pixelated the images of the fruits, you suggested not only coloring in the boxes in black or leaving them white, but also coloring in some boxes in gray.”

Whether or not the suggestion was made by the students, the teacher then opens a grayscale image using the image editor (file III-3.3_research_grayscale) and zooms in sufficiently so that the pixels are visible. The teacher asks the class if this image has only black or white pixels. The students remark that there are light, medium and dark gray pixels, as well as black and white pixels, which brings them to the first research activity.


Research (in pairs and as a class): Encoding an image in shades of gray

The teacher asks if 0s and 1s will be enough to encode the black, white and various shades of gray pixels. The students answer “no”, and suggest adding in other numbers aside from 0 and 1. The teacher asks the students to try and figure out how this image was encoded (they have access to the file III-3.3_research_grayscale and can open it with the program of their choice).  If they have difficulty, the teacher can suggest opening the file using both the text editor and image editor programs (see upper section of Handout 42).

In a few minutes, the class report back together. They will have noticed, by comparing the file opened with the text editor and with the image editor, that:

  • P2 is indicated on the first line, and not P1 (the teacher explains that this means that what follows will be encoded in shades of gray).
  • On the second line, there is an indication of the number of lines and the number of columns (here 15 15), as was the case for the coding of black and white images.
  • There is an extra line where the figure 7 is indicated, the highest figure that appears in the pixel grid that follows.
  • The pixel grid contains figures between 0 and 7, i.e. 8 different figures (and not just 0s and 1s as was the case for the coding in black and white).
  • The lower the figure, the darker the corresponding pixel (black pixels encoded by 0, increasingly lighter shades of gray pixels encoded with figures 1 through 6, and white pixels encoded by 7). The opposite was true for black and white coding (0 corresponded to white pixels).

If only some or none of these observations were made in pairs, the teacher guides the class. If questions remain, the teacher can encourage the students to make changes to the file in the text editor, and refresh the image in the image editor (File/Reopen), to see what has been changed.

Scientific notes:

  • Grayscale images are usually coded with a number of shades corresponding to a power of 2 (for example, 8, 16, 32 or 256 grayscale), which corresponds to a code for each pixel in 3 bits, 4 bits, 5 bits and 8 bits, respectively) (see Lesson 1.3).
  • The PGM extension of the image files means “portable grayscale map”.


 Challenge (in pairs): Encoding a grayscale

The teacher gives the class the following challenge: they must use the text editor to create a file representing a grayscale, like the one projected on the board (point out the white pixel on the left if it is not visible). The file, which is empty for now, is called III-3.3_challenge_grayscale_blank.pbm.



Then the students 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 grayscale visible in the image editor.

A possible code, that most pairs will suggest, is the following:

16 1
15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0


To achieve this result, the students will have counted the number of gray levels on the scale (16, in this case) and adapted the third line accordingly. They must also have adapted the format of the pixel grid (16 columns and a single line) and encoded the pixels with values in descending order from 15 to 0, so that the white pixel appears on the left and the black pixel on the right, to match the request of the challenge.

Here is another possible code (among many others):


16 1


31 29 27 25 23 21 19 17 15 13 11 9 7 5 3 0


Research (in pairs and as a class): Coding a color pixel

The teacher reminds the class that images can also be in color. They indicate the file III-3.3_research_color, which allows the class to code a single pixel in color. The teacher asks the students to try and understand how coding works using this file, as they did for the grayscale example. They suggest only touching the last line to begin, and to look at the result on the screen with magnifying glasses (that they distribute).

The coding suggested in the file, which yields a red pixel, is the following:


1 1


7 0 0


1 1


7 0 0

The students can try, for the third line, full colors 0 0 0 (black pixel), 7 7 7 (white pixel), 0 7 0 (green pixel), 0 0 7 (blue pixel), 0 7 7 (cyan pixel), 7 0 7 (magenta pixel), 7 7 0 (yellow pixel) and several other intermediary combinations of their choice (for example, 7 6 2, which produces a golden yellow or 1 5 6 which produces a sky blue).

During the group discussion, the students report that using the magnifying glass, they see little red, green and blue lights, of rectangular shape, aligned repetitively in this order, from left to right on the screen. When 0 0 0 is indicated on the last line of the file, the lights on the screen (of all colors — red, green and blue) are not very bright under the magnifying glass, whereas with 7 7 7, they are very bright. With 7 0 0, only the red lights are bright, etc. The class concludes together that the three values of the last line indicate the level of brightness of the pixel in red, green and blue (the square pixel has therefore 3 rectangular sub-pixels in three shades, R, G and B). The impression we get at a distance from the screen depends on the balance between the brightness in each shade. The color obtained for the following combinations is kept visible on the board, in order to complete the following challenge:


0 0 0 7 7 7 7 0 0 0 7 0 0 0 7 0 7 7 7 0 7 7 7 0
Black White Red Green Blue Cyan Magenta Yellow


The teacher can point out that, generally, there are 256 levels of red, green and blue possible, and not just 8. They specify that for the next challenge, the class is going to reduce the levels of red, green and blue, to have just two: switched off or switched on, just like for coding in black and white.

Scientific notes:

  • The ppm file extension means “Portable Pixel Map”.
  • Usually, the sub-pixels are encoded in 8 bits, which corresponds to 256 levels of possible intensity (values fro 0 to 255). Therefore, 24 bits are required to describe a pixel in RGB (see Lesson I.3 page XX).


Challenge: Code a mini-lighthouse in color

The teacher gives the class a final challenge. They have to code a small lighthouse in color, using only two levels of luminance for the sub-pixels: 0 for an “dark” sub-pixel and 1 for a “bright” sub-pixel.

In other words, the file III-3.3_challenge_color_prefilled to be modified begins with:


5 5


Followed by a grid of 0 (off pixels) and 1 (on pixels) values. The file is pre-completed with the correct number of 0s (15 per line, across 5 lines). A comment line beginning with the hashtag (#) makes finding the blocks of three sub-pixels easier.

The students who complete the challenge correctly suggest the following code:

5 5
#     #     #     #     #
0 1 1 0 1 1 1 0 0 1 1 0 1 1 0
0 1 1 0 1 1 1 1 1 0 1 1 0 1 1
0 1 1 0 0 0 0 0 0 0 1 1 0 1 1
0 0 0 0 0 0 0 0 0 0 0 0 0 1 1
0 0 1 0 0 1 0 0 1 0 0 1 0 0 1

This time, there is only one possibility, as the 1-bit code (0 or 1 for each sub-pixel) is obligatory in the challenge.


Conclusion and lesson recap activity

The class summarizes together what they learned in this lesson:

  • The pixels of an image can be represented by numbers.
  • Each pixel of a grayscale image is represented by a number. If the image has 8 shades of gray, this number is included between 0 (black pixel) and 7 (white pixel).
  • Each pixel of a color image is represented by 3 numbers which indicate the intensity of red, green and blue of this pixel.
  • To send a grayscale or color 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”


Further study

The students can practice by taking well-known images (Mario©, Tintin©’s rocket, the sword in Minecraft©, etc.) and, to begin, pixelate them with grids like those used in Lesson III-3.1 (16x16 grid for example) and then encode the images in a PBM, PGM or PPM file in order to make them visible on a screen.

In science and art, we can also study this topic further by recomposing colors in red-green-blue triplets.

Scientific notes:

  • Additive color (sometimes called “light color” at school) means adding streams of light colors together in order to recreate all the colors of the visible spectrum. Inversely, subtractive color (sometimes called “material color” at school) combines colored pigments which, when brought together, absorb certain colors of the surrounding light and reflect others.
  • By using three pocket torches covered with red, blue and green colored transparent paper (sweet wrappers for example), students can attempt to reproduce various colors, from dark to light: cyan, magenta, yellow and white.



<< Lesson 3.2 Sequence III Lesson 3.4 >>


Project partners

Aucun résultats