Digital Information - Lesson 7: Black and White Images
Overview
Students explore how black and white images are represented. Students use the black and white pixelation widget to represent each pixel of an image with black or white light. They learn how to sample an analog image using small squares of uniform size (each represented with a black or white value) and reflect on the pros and cons of choosing a smaller or larger square size when sampling.
Goals
Students will be able to:
- Explain how bits can be used to represent the individual pixels of a black and white image
- Explain how sampling is used to create a digital form of an analog image
Purpose
Throughout this unit, students gradually discover how to use bits to represent more complex data types. In this case, students work on representing images using sampling. Students quickly realize that very tiny sample squares are needed to approximate an image's curves and small details. The smaller we make each sample, the more bits are needed. Students must also wrestle with deciding whether each square should be a 0 or 1, as many squares have both white and black in the same square. They will have more control over the representation of each bit in the next lesson.
Resources
To download the CSP Widget repository using Git, clone this url: https://github.com/qorf/CSP-Widgets.git
Supplemental Code.org material
For the students
Getting Started (5 minutes)
Prompt: You recently did some online shopping and are expecting a package to arrive in about a month. The delivery service has a tracking system which reads the location of the package.
How often would you want the location read? Every week? Every day? Every hour? Every minute? Be ready to explain your answer.
Discuss: Students should think for a minute, then share with a partner. Once students have shared, call on a few students to explain their answers with the class.
Discussion Goal: The goal here is for students to realize that, depending on the situation, we may want to take readings more frequently. Later in the lesson as students interact with the widget, you can help students make connections that the frequency of readings affects the digital representation that we obtain.
Remarks
- Thank you for sharing your insights. It seems to depend on the situation. Sometimes we want to take a reading of the location more frequently. Today, we're actually learning about how images are represented in computers, but let's keep in mind these ideas about how often to take a reading or measurement.
Activity (35 mins)
The Pixelation Widget (10 minutes)
For today's activity, each student will use the Pixelation Widget, which can be found in the CSP-Widgets repository. Each widget is a Quorum project which you can run inside of Quorum Studio.
Here are a few resources you can use to guide you through using Quorum Studio and downloading the repository:
Using the Pixelation Widget
Display (Optional): Watch the Code.org pixelation widget video. The widget shown is different than the one we will use, but the primary concept (using 1's and 0's to set pixel colors) is the same.
Teaching Tip
Students type in the textbox on the right to sequentially set pixel values. Typing a 1 will make the next pixel white, and typing a 0 will make the next pixel black.
Students can set the width and height of the image using the text fields at the top of the widget. You can ignore the settings for colored pixels or bits per pixel for now -- these will be used in a future lesson.
The widget is accessible with screen readers. While using a screen reader, students can focus on the pixel region, then use the arrow keys to inspect how bright each pixel on the grid is. The first grid coordinate, (0, 0), is in the top left corner.
You can also increase or decrease the size of all text in the widget using the CONTROL + PLUS or CONTROL + MINUS keyboard shortcuts, respectively.
Teaching Tip
Not all students can see color, like students that are color blind or part of the visually impaired community. This lesson embeds alternate descriptions that can describe these colors to these students. Students that can see color may explore these alts or come up with their own to see how they work.
Do This:
Level 2: Students will recreate the letter A as shown in the image below using the black and white Pixelation Widget. They must first use the fields at the top of the widget to adjust the width and height of the image. Then, they will type the appropriate bit for each portion of the image ("0" for black, "1" for white).
Level 3: Students must find and delete the extra bit that is causing the image to be distorted.
Teaching Tip
The point of this activity is to get students familiar with the tool and practice entering the bits. Once most of the class has finished, you can move on, or optionally give students another challenge of your choosing to practice with. Encourage students who are finished to help those who haven't.
Sampling an Analog Image (20 minutes)
- Now that you've had a chance to see how to set each pixel black or white, we are going to use the widget to represent an analog image using a process called sampling.
- What is an analog? It's a term used to mean something with continuous representation - such as a picture you draw on a piece of paper. Each pencil line smoothly connects to the next, no matter how much you zoomed in on the picture with a magnifying glass.
- When we represent an analog image digitally, we will have to make some choices on how to sample the image to get the smoothest representation possible while keeping in mind the number of bits it takes to build that image.
- What does it mean to sample? We are choosing how small to make section of the picture we look at when deciding whether to make it black or white. The smaller the sample, the more pixels required to represent that image. Larger samples require less pixels, but the image can become blurry.
- Try it out yourself!
Challenges A,B, & C
Teaching Tip
Questions to Ask as You Circulate: As students think about a good analog to put into the widget, circulate the room and ask pairs of students questions about their process:
- How are you deciding whether each square should be black or white?
- Do you think this process will give a good representation of the image? Why or why not?
- What would you change about the sampling process to produce a better representation of the image?
Alternative Strategies: While working with students with visual impairments, rather than using the images on the supplemental worksheet, you might consider asking your students to use geometric shapes as an analog source. Here are a couple of examples:
- Triangles - While one or two sides of a triangle might align with the pixel grid, at least one side will be angled. At larger sample sizes, the angled edge may feel more jagged, rather than a smooth line.
- Circles - Curved edges are particularly difficult to represent with large samples. If the dimensions of the grid are extremely small, such as 2x2, a circle can be indistinguishable from a square.
Do This:
For the next two challenges have students try and represent numbers, letters, and possibly a simple shape in the widget.
Challenges A
- Begin with a 3 by 5 grid and input the values into the widget. Use a 0 for black and 1 for white.
- When you are finished see if a partner or the instructor can guess what you represented
Answer the following questions after the challenge:
- What was the total number of grid spaces that you used?
- Did they guess correct?
Challenges B
- Repeat for another number, letter, or simple shape this time use a larger grid (say 7 by 5).
Answer the following questions after the challenge:
- What was the total number of grid spaces that you used?
- Did they guess correct?
- Was it easier or harder to guess this time?
Regroup: After students have finished Challenge A & Challenge B, discuss the challenges they encountered while completing the challenges. Then direct students on to Challenge C.
Challenges C
Do This:
- Select your favorite tactile company logo
- Decide how you are going to sample this logo - what is the plan for representing the logo in the widget?
- Recreate the logo in the Pixelation Widget.
- Run the widget. Do they recognize the logo? Make adjustments if needed. For example: You may need to increase the gridsize.
Wrap up (5 Minutes)
Discuss: In first two challenges, you and your partner practiced sampling the same image twice. The second time, we did a more frequent sampling by using a larger gridsize.
- What are the pros and cons of sampling an image more frequently?
Discuss: Allow students time to think, then have them share in pairs or groups of four. Call on a few students to share with the whole class.
Discussion Goal: We want students to start seeing that there are advantages and disadvantages as a result of decisions we make when we represent data digitally. Some key points to draw out from students:
- Pros: We get a much more smooth/clearer/accurate representation of the analog image. A little easier to decide whether to make a square black or white.
- Cons: More bits are needed. Took longer to enter in the widget. Still doesn't exactly replicate the analog.
Remarks
- Thank you for sharing. It looks like there are several advantages and disadvantages when it comes to sampling more frequently by using smaller squares. We get a better approximation of the analog image when we do more frequent sampling and it was a little easier to decide whether each square should be set to black or white. However, it took longer and we needed a lot more bits. We still got an image that didn't represent the image accurately enough, though.
- Fortunately, a computer does this process much more quickly than we can, and it can store thousands or even millions of bits to represent an analog image.
- By this point, we've used bits to represent numbers, text, and images. The same sequence of bits can represent different types of data depending on the context. It all comes down to 0s and 1s!
Journal
Have students add definitions to their journals for: analog data, digital data, and sampling.
- Analog Data: Data with values that change continuously, or smoothly, over time. Some examples of analog data include music, colors of a painting, or position of a sprinter during a race.
- Digital Data: Data that changes discreetly through a finite set of possible values.
- Sampling: A process for creating a digital representation of analog data by measuring the analog data at regular intervals called samples.
Assessment: Check for Understanding
For Students
Open a word doc or google doc and copy/paste the 3 following question.
Question 1
Assume your friend just sent you 32 bits of pixel data (just the 0s and 1s for black and white pixels) that were encoded after sampling an image. Choose the two statements that are true.
- The 32 bits of pixel data is enough to produce the image using the widget. Nothing else is needed.
- The digital image would be an exact copy of the analog image.
- The correct width and height must be input into the pixelation widget to produce the image.
- The fact that only 32 bits were used to represent the image indicates relatively large sample squares were used. The digital image may vary from the analog image significantly.
Question 2
Which of the following would result in a better digital approximation of an analog black and white image?
- Increasing the size of each sample square, thus decreasing the number of samples taken.
- Decreasing the size of each sample square, thus increasing the number of samples taken.
- Using fewer bits to represent the image.
- Using decimal numbers to represent each pixel.
Question 3
Your computer science teacher asks you to sample a black and white image that is 4"by 6". How would you sample the image to provide a good digital approximation using the pixelation widget? What sample size would you use? How would your decision affect the digital representation?
Standards Alignment
- CSTA K-12 Computer Science Standards (2017): CS - Computing Systems: 3A-CS-02 - Compare levels of abstraction and interactions between application software, system software and hardware layers.
- CSTA K-12 Computer Science Standards (2017): DA - 2-DA-07 - Represent data using multiple encoding schemes. 3A-DA-09 - Translate between different bit representations of real-world phenomena, such as characters, numbers, and images.
- CSP2021: DAT-1.A.10, DAT-1.A.7, DAT-1.A.8
Next Tutorial
In the next tutorial, we will discuss CSP Internet Lesson 8, which describes benefits and risks of a free and open internet.