Lesson 4: Representing Images

Display: Show the images of the bicycle and tree to students from the first slide

Prompt: What would be challenging about representing these two pictures to a computer? Do you think it's easier or harder than representing letters?

Discuss: Have students brainstorm silently, then share with a partner, then discuss as a whole class.

Discussion Goal: The aim is to point out how daunting representing this complex piece of information might be. Be prepared as you're presenting students with this challenge to normalize the fact that it is really hard but still give them a chance.

Display: Show the second slide showing different versions of the same image in more pixelated forms.

Prompt: What strategy is being used with these examples that might help a computer represent images?

Discuss: You may choose to run this as a second silent brainstorm or else just immediately discuss it as a whole class.

Discussion Goal: These images are intended to visually demonstrate the idea of breaking images up into smaller pieces. Students should hopefully recognize that what they are looking at is a binary system (black and white) and so with the right system they should be able to represent the last images. You should be prepared to acknowledge that while the last image is of lower quality, the same ideas could probably be used to make the original. It is on their screen after all!

Solving a big problem usually means breaking it into smaller ones. A big picture might be hard to represent, but if we break it into smaller pieces it's suddenly less intimidating. Today we're going to look more closely at how this system works.

Question of the Day: What systems do computers use to represent images?

Vocabulary: Briefly introduce the following vocabulary

• Pixel: a tiny square or dot which contains a single point of color of a larger image.

Code Studio: Have students navigate to this lesson in Code Studio beginning on Level 1.

Level 1: Students learn to type 0s and 1s to turn on the pixels of a 10 by 10 X-pattern.

You Can't Break It: Widgets are designed to enforce rules so that students can freely explore concepts. Encourage students to experiment and not to worry about breaking it.

Giving Students Space to Problem Solve: As a teacher you also will likely find that students learn more by playing with the tool themselves than having it explained. Try setting a timer for 5-10 minutes after which computers are put down to discuss what they're seeing. A little struggle at first should be expected but generally leads to the payoff of students solving problems on their own.

Level 2: Students make a 10 by 10 smiley. Show students the "Clean Format" vs. "Raw Format" buttons if they don't see it. This is a very helpful way to make the tool easier to use.

Level 3: Students change the width slider to "find" the image from a set of bits.

Knowing The System Being Used: This puzzle demonstrates the importance of knowing the exact "system" being used to interpret a string of bits. Reading an 8-bit wide image as though it is 10 bits wide will lead to a garbled image. This is one place where students clearly see this phenomenon but may miss it if it's not pointed out.

Level 4: Students "edit" an image to add eyebrows to a smiley face. This activity demonstrates that the bits are being read in sequence. If you delete or add one earlier on the computer doesn't "know" that the rest aren't supposed to move.

Level 5: Free-play. Students should create at least an 8 by 8 image (though ideally larger). You will probably want to time-box this activity and let students know in advance how long they'll have. 10-15 minutes before doing the class discussion is probably fine. If you have more time students can always come back to finish their drawings.

Have Ideas Ready: Many students may need help deciding what to draw. Have a couple of ideas ready to share like their hobby, their favorite animal, a personal logo, etc.

Share-Out: As students begin to finish up, have them share the images they created with one another. Consider creating a digital gallery for students to post their images and share beyond the classroom.

Prompt: Think about the ASCII system we learned yesterday and the image representation system we learned today.

• How are both examples of breaking down big problems into small ones that we are able to solve?
• What information BESIDES the 0s and 1s do you need in order to decode a binary message?

Discuss: Give students a minute to write their ideas before sharing with a neighbor. Eventually run a whole class discussion.

The first discussion calls out that both systems were breaking down complex information such as words or images into small pieces that are easier to represent. With text this is already done for us since a page of words is already broken into letters. With images we needed to get a bit more creative to break the image into pixels. Students should recognize that once this is done the problem gets much simple.

The second prompt is designed to call out that a series of binary information doesn't actually mean anything if you don't know the system used to encode it. Students should recognize that for any system to work, it must be known to everyone who needs to use it. They may also recognize that this system should be unambiguous, so that there is only one way to interpret a given sequence of bits.

Computer scientists are problem solvers. They need to work with the tools available. Representing something as complex as a picture using just ons and offs can seem really challenging. By breaking up a problem into smaller pieces, however, you can find solutions. Next time we're going to look at one more system for representing a new kind of information.