Lesson 8: Color Images

Discuss: How many different shades of the color blue can you name? How many do you think there are in total?

Have students share with a partner. Then, invite a few students to share what their partner said.

Discussion Goal: Start with having students name shades, but quickly transition to how many they think exist altogether. The goal here is to have students begin to wonder if computers can represent all of the vast shades of colors in our world. This should be a quick discussion. You can move on as soon as this point is made.

Great job! We came up with many different shades of blue. As we continue today, let’s keep thinking about whether there is a limit to the number of shades of blue there are in the world, and whether a computer can display all of those shades.

Note: This lesson includes color images in a number of places. See the teaching tip on the right for some additional guidance that may be useful when supporting students who are color-blind.

In Levels 2, 4, and 5: The directions are written in so that students who are color-blind do not need to be able to distinguish between colors to be able to complete the task. That being said, students who are color-blind may not be able to visually check their work in the same way as other students. You can suggest that students who are color-blind ask a partner to check their work at the end of each of these levels.

In Levels 6 and 7:It is recommended that students who are color-blind do the black and white gradient image which is the option in the lower right-hand corner of the pop-up in Level 8, which looks like this:

Today, we’re going to see how this relationship between analog and digital plays out in the world of color. You’re going to get a chance to play with the pixelation widget again, but this time you’ll be using it to make your own special color blends, or gradients. After each level, I want you to check your work with your partner.

Each section of levels begins with a reference level before moving on to a widget level. Make sure the students carefully read the reference levels.

Reference Tabs: Encourage students to keep the reference levels open in a second tab as they work with the widget. They can do this by hovering over the circle of the level at the top of the screen, then right click and choose “open in a new tab”.

Counting in Binary: Students who are struggling with the binary sequences should be encouraged to take out their Flippy-Do to help them count, especially on Challenge 3 and 4.

Sampling Support: Students may become frustrated if they feel they cannot match the analog images. Reassure them this is fine. Remind them about the discussion from the warm up and ask if it’s possible that digital images ever look exactly like analog images. You may also ask the students if their representation would be improved if they use more bits per pixel.

Group: Students will work individually in Code Studio, checking each level with a partner before proceeding.

Levels 1-2: Students should type in a unique 3-bit code for each pixel, producing 8 different colors.

In the video on Level 1, metadata (data that explains other data) is explained - these are the pixels we now see at the beginning of the work space which represent the height, width, and bits of pixel of the image. These can be changed using the sliders.

Level 3-4 Students make four different shades of blue, followed by four different shades of green, using 6 bits per pixel. The red row is already done for them.

Level 5: This time, students use 9 bits per pixel. They will make 8 different shades of green and 8 different shades of blue (the red row is done for them).

Do This: Regroup the class for levels 6-7 and direct everyone to the images on the slides.

Levels 6-7: Level 6 contains samples of various color gradients. Students should choose a section from one of the images, try to take a sampling using the widget on level 6 as a support, and attempt to reproduce the sample gradient as best they can on Level 7.

The widget on Level 6 is meant to help students visualize different sampling frequencies, just like the different grids on the last page of the activity guide from the previous lesson. Students should make their own attempt at matching one of these images using the widget on Level 7.

So as we saw in the last two lessons, the digital versions of images we produce differ from the original analog images. Analog images change smoothly and continuously. With digital images, we are limited by the number of bits we use. Even if we use a lot of bits, we can still only represent a finite number of colors, and gradual color changes can only happen discretely through a finite set of pixels.

Discuss: What happens at each level of creating a digital color image?

Discussion Goal: Students should understand how sampling, pixels, and binary work together to make a digital approximation of an analog image. They should also understand that while analog images are able to change color values smoothly and continuously, digital images rely on pixels to change from a fixed number of color values discretely using squares of equal size.

Use the Retrieve-Pair-Share strategy to facilitate this discussion by directing students to write down their thoughts and ideas first, then pair up students to compare their answers and expand their notes. This allows time for individual processing and idea generation before sharing thoughts with others. Ask students to share the ideas they discussed with their partners as a class.

For more ideas on how to adapt this strategy to fit the needs of your class, check out the CSP Guide to Classroom Discussions

Journal: Students record the layers of abstraction in their journals. Click through the animation.

We can see that a digital image is made up of several layers that work together to represent the analog image. This is an example of abstraction because we don’t always look at the details of what’s going on in all of these layers, but they are working behind the scenes. Let’s watch a video of how this works.

Display: How Computers Work Video

Videos are used throughout the curriculum to spark discussions, supplement key concepts with additional explanations and examples, and expose students to the various roles and backgrounds of individuals in computer science.

While interacting with the video, turn on closed captioning so students can also read along as they watch.

To encourage active engagement and reflection, use one or more of the strategies discussed in the Guide to Curriculum Videos.

Check For Understanding Question(s) and solutions can be found in each lesson on Code Studio. These questions can be used for an exit ticket.

Question: Which statement about analog and digital images is true?

Question: Describe how the process of sampling, RGB pixels, and binary sequences work together to display a digital color image.