Lesson 4: Representing Images
Overview
In this lesson students learn how computers represent images. To begin the lesson they consider the challenge of turning all the complexity of vision into a binary pattern. Through a series of images showing how this transformation is made students are introduced to the concept of splitting images into squares or "pixels" which can then be turned on or off individually to make the entire image. Students then do a short set of challenges using the Pixelation Widget in order to draw black and white images. Puzzles are designed to call out some of the challenges of representing images in this way. In the wrap up students make connections between the system for representing images and the system for representing text they learned in the previous lesson.
Purpose
This lesson introduces another commonly used system of representing information in binary. The most obvious takeaways from the Pixelation Widget will obviously be that a 1 means an "On" and a 0 means an "Off". What might be less obvious, however, is that the width and height of the image need to be agreed upon in order to interpret the binary image information as well. Finally this is an opportunity to explore how systems for representing information are created. A "raw" image is really hard to represent. The idea to turn an image into a grid of black and white squares significantly simplifies this challenge and makes it into the kind of problem that computer scientists knew how to solve. While the activity in this lesson may feel like just typing 0s and 1s, it actually reveals a lot about how people think about representing information in binary, and what challenges and tradeoffs are created as a result.
Assessment Opportunities
-
Create and manipulate binary patterns to represent black and white images
Code Studio: In bubble 3, the student should have created a smiley face with the widget.
-
Describe common features of systems used to represent information in binary
Wrap up: Students should identify key shared features of the binary systems they have seen.
Agenda
Lesson Modifications
Warm Up (5 mins)
Activity (40 mins)
Wrap Up (10 mins)
View on Code Studio
Objectives
Students will be able to:
- Create and manipulate binary patterns to represent black and white images
- Describe common features of systems used to represent information in binary
Preparation
- Practice using the Pixelation Widget for ~10 mins to prepare to respond to questions
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Teachers
- Images Examples - Slides
Vocabulary
- Pixel - short for "picture element", the fundamental unit of a digital image, typically a tiny square or dot that contains a single point of color of a larger image.
Teaching Guide
Lesson Modifications
Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please read the full lesson plan below, then click here to access the modifications.
Warm Up (5 mins)
Display: Show the images of the bicycle and tree to students from the first slide of Images Examples - Slides
Prompt: Look at these two pictures. What would be challenging about representing them to a computer? Do you think it's easier or harder than representing letters?
Discussion Goal
Goal: The aim is to point out how daunting representing this complex piece of information might be. Be prepared as you're presenting students this challenge to normalize the fact that it is really hard but still give them a chance.
Discuss: Have students brainstorm silently, then share with a partner, then discuss as a whole class.
Display: Show the second slide showing different versions of the same image in more pixelated forms.
Prompt: Do you think it's now easier. What's the "big idea" here that might help us represent images.
Discussion Goal
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 lower quality, the same ideas could probably be used to make the original. It is on their screen after all!
Discuss: You may choose to run this as a second silent brainstorm or else just immediately discuss as a whole class.
Remarks
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.
Activity (40 mins)
Teaching Tip
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.
Demonstrate: It can be hard to see pixels in modern screens since they're so small. Sometimes projector screens work well, using a magnifying glass, or even just putting a drop of water or a computer screen to create a lens effect. Whatever you choose, find some way to show students that all the images on their computers are actually just being broken down into tiny squares. Then introduce the vocabulary below which is the name of these squares.
Vocabulary: Briefly introduce the following vocabulary
- Pixel: a tiny square or dot which contains a single point of color of a larger image.
Pixelation Widget
Content Corner
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. While it is not explored in this curriculum, the image width and height could also be represented in binary as part of a more flexible system for representing images.
Puzzle 2: Students learn to type 0s and 1s to turn on the pixels of a 10 by 10 X-pattern
Puzzle 3: Students make an 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.
Puzzle 4: Students change the width slider to "find" the image from a set of bits.
Puzzle 5: Students "edit" an image to add eyebrows to a smiley face.
Teaching Tip
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.
- 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.
Puzzle 6: 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 times students can always come back to finish their drawings.
Wrap Up (10 mins)
Assessment Opportunity
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.
Share: Have students share the images they created with one another.
- 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.
Remarks
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.
- Lesson Overview
- Student Overview
Student Instructions
Do This
Complete the "X" shape by typing 0s and 1s. You can always click "Readable Format" if you want to clean up your work.
Student Instructions
Do This
Use the pixelation widget to draw a smiley face
Student Instructions
Do This
The width and height sliders are set incorrectly for this image so it doesn't look like anything. Change them until you find the image.
Student Instructions
Do This
Add eyebrows to this smiley face. Remember to use the "Readable Format" if you get stuck.
Student Instructions
Do This
Now it's your turn. Draw anything you want in the pixelation widget. Feel free to change the width and height of your image if you wish.
Standards Alignment
View full course alignment
CSTA K-12 Computer Science Standards (2017)
DA - Data & Analysis
- 2-DA-07 - Represent data using multiple encoding schemes.