Lesson 6: Processing with Bits

Overview

In this lesson, students continue to build an understanding of how computers represent information, and learn more about how to process information on the bit level. They will begin by using the pixel filtering tool in Code Studio to explore how pixels on a screen and combinations of bits either in an on or off state can represent different colors. As they progress through levels in Code Studio, students will process the colors in given images by applying different filters to see how the filters affect the output images. The lesson concludes with students applying filters to process images that they have created.

Purpose

Over the course of the previous two lessons, students have developed an understanding of computers as machines that input, store, process, and output information. In this lesson, they will look more closely at how information can be processed by the computer within the context of image filtering. This lesson gives students an opportunity to explore the ideas of representing and processing information in a plugged in context.

Agenda

Warm Up (5 mins)

Activity (40 mins)

Wrap Up (5 mins)

Objectives

Students will be able to:

  • Use a bit level representation system to process information.
  • Manipulate and reason about information at different levels of representation.
  • Process color information to create a desired effect in an image.

Preparation

  • Forum
  • Web access to Code Studio

Links

For the Teacher

For the Students

Support

Report a Bug

How much time does it take for students to complete the Code Studio levels?

In the wrap up, are students able to think of advantages and disadvantages of using the computer to process color information?

Teaching Guide

Warm Up (5 mins)

Representing Colors with Cards

Prompt: In previous lessons, you used a binary system of face up and face down cards to represent different types of information. I have a challenge for you: How would you represent color using face up and face down cards? Share an idea with your neighbor.

Discussion Goal

The goal of this discussion is to review information storage within the context of representing colors. Students are not expected to understand how color information is actually represented in the computer, but to review that information can be represented a variety of ways.

Discuss: Students discuss possible ways to represent color using cards with their neighbor. Afterwards ask a few people briefly share out their ideas.

Remarks

Those are great ideas. There are many ways that a computer could represent any kind of information, including color. Today, we’re going to use a two state system to store and process colors on the screen.

Activity (40 mins)

Filtering Pixels

Remarks

Today we’re going to look at one way to store information about color on the computer, and how we can process that information to change the way the colors look on the screen.

Distribute: Activity Guide: Pixel Filtering - Activity Guide

Transition to Code Studio

Content Corner

Students may have learned that the three primary colors are red, yellow, and blue, and that, for example, yellow and blue make green. That type of subtractive color system is based on mixing paints (and predates modern scientific color theory). The RGB (red, green, blue) system is additive and is based on mixing light sources, such as light bulbs. More can be read about that here: https://en.wikipedia.org/wiki/Additive_color

Puzzle 1: 3 bit colors

Students should try all 8 combination of the red, green, and blue lights turned on or off.

  • 000 (no lights) - Black
  • 001 (blue) - Blue
  • 010 (green) - Green
  • 100 (red) - Red
  • 011 (green, blue) - Cyan
  • 101 (red, blue) - Magenta
  • 110 (red, green) - Yellow
  • 111 (red, green, blue) - White

Encourage students to use these standard color names as they proceed through the activity. They will need to know “Magenta” and “Cyan” for later puzzles.

Circulate: Give students 3-5 minutes to record the 8 different colors the tool can create. Prompt students who finish early to speculate as to why the tool works the way it does, and what different aspects of it mean (e.g. the 0s and 1s below each light bulb).

Prompt: Can someone share with us the different colors you were able to get by combining the red, green, and blue lights?

Share: Students share answers from “Level 1-How Many Colors” from Activity Guide

Remarks

So you were able to turn red, blue, and green lights on or off to get different colors. This is how a computer displays information to us. To make yellow, the computer needs to turn on the red and green lights, and turn off the blue. We represent the information about which lights should be on or off using ones and zeros, so yellow is can be represented with the pattern “110”.

Now we’re going to look at how a computer might process this information. While we can talk to other people about changing colors, computers will need to process the information by looking at the ones and zeros that it uses to represent the colors.

Display Show the level 2 tool and quickly demonstrate its features.

  • The filters determine which color channel each bulb in the lower row “gets”
  • Turning on and off the bulbs in the upper row shows what that color would get filtered to

Allow students to explore the tool for themselves and ask any questions they may have. Encourage them to try things out for themselves, and reassure them that it is impossible to break the tool, and that they will have as many tries as they need to get the correct answer.

Model: The next section of the activity asks students to do some focused practice filtering one color to create another. You may wish to model this with the first example, changing Blue (001) to Cyan (011). Afterwards ask students to complete the rest of the color transformations in the table they’ll find in their Activity Guide.

Puzzles 2-7: Filtering

The answers to the Activity Guide can be found in the Answer Key.

Puzzle 2: Filtering Pixels

In order to change Blue to Cyan, the Green bulb (2nd bit) will need to change from “off” to “on” when the blue bulb is on. You can do this by going to the “Green gets” drop down menu and choosing “Blue”. This will link the blue bulb in the “input” row to the green bulb in the “output” row. When you make the top “input” row Blue, the bottom “output” row will now be Cyan.

Students may notice that this filter changes other colors as well. (Magenta filters to White; Yellow filters to Red, Green filters to Black.) Let them know that we are only worrying about one color at a time right now, but that they will look at multiple colors in future puzzles.

Puzzle 3: Filtering Images

This puzzle asks students to use the same skills as they did in the previous puzzle, but within the context of a complete image.

Puzzle 4: Combining Filters

This puzzle builds on the first by asking students to apply changes to multiple light bulbs.

Puzzle 5: Combining Filters

This puzzle asks students to use the same skills as they did in the previous puzzle, but within the context of a complete image. Students also consider the effect of their filters on multiple colors.

Puzzle 6: UnFiltering

This puzzle asks students to combine mulitple filters to affect multiple colors. Students will need to plan ahead for each color that they want to change, and which bits are affected, then find a combination of filters that will work for all the color changes.

Puzzle 7: Free Play

This puzzle gives students a chance to get creative with their filters, deciding for themselves what they want the effect to be.

Circulate: Support students as they progress through the levels. It may be necessary to model one of the later lessons as well, but encourage students to try out things on their own or discuss with a partner before asking for help from the teacher. Make sure they understand that they will have as many tries as they need to get the correct answer in Code Studio.

Wrap Up (5 mins)

Journal Reflection

Prompt: Today, we solved the problem of filtering a simple image. We did this by creating image filters on the computer, but we could have just filtered our images by hand (by literally redrawing the images in the colors we wanted). Computers are often used to automate tasks that humans could do ourselves.

  • What parts of solving this problem on a computer were harder than just doing it by hand?
  • What parts of solving this problem on a computer were easier than just doing it by hand?
  • Why was it important for you to understand how the information was represented in order for you to process it using the filter you created?

Remarks

In the last couple of classes we’ve seen how computers and people deal with information in different ways. When you are creating a filter you are identifying the steps the computer would need to go through to change one color to another.

Even though computer scientists don’t usually work with ones and zeroes on a day to day basis, understanding how computers represent and process information to solve problems is a fundamental aspect of computer science. By repeatedly applying and combining simple steps like these, we can solve more complicated problems.

View on Code Studio

Problem Solving - Computers and Logic: Lesson 6 - Processing with Bits

Background

In this lesson you’ll learn how computers process binary information as you design bit-level filters of simple images.

Resources

View on Code Studio

Student Instructions

3 Bit Colors

Each pixel is a square on a screen that emits light. Each pixel can have a certain number of bits assigned to it, and bits per pixel determine the colors that can be rendered.

In this tool we’re using 3 bits to define the one large black pixel. The first bit affects the red tint. The second bit affects the green tint. The third bit affects the blue tint.

Do This

  • Click on the light bulbs to turn on or off each color and see what happens to your pixel
  • See how many different colors you can create with just three bits
  • Write down the binary associated with each color you come up with
View on Code Studio

Student Instructions

Filtering Pixels

If you’ve ever used Instragram you’ve probably encountered an image filter. Image filters read in each pixel, process it in some way, and the return the filtered pixel. In this tool we’re going to start by filtering just a single pixel before moving on to a full image.

Do This

  • Try changing the color drop downs in the Filter section
  • Click on the top row of lightbulbs in the Diagram section to see how the filter will convert the input (top bulbs) to the output (bottom bulbs)
  • Look at how the numbers in the Binary section reflect changes to the colors
  • Based on how the bits change, can you formulate what replace is doing? Talk to your partner and see if you can figure it out.
  • Complete the Level 2 table in your Activity Guide
View on Code Studio

Student Instructions

Filtering Images

Now that we’ve seen how a single pixel can be filtered to change its color, let’s try applying a filter to an image made of multiple pixels. The filter your create will be applied to each pixel in the image - and you still have the light bulbs available to experiment with how your filter will work with individual colors.

Do This

Here’s a picture of a red mushroom - you’re going to try and turn it into a yellow mushroom.

  • First, determine which bit needs to change in order to turn red into yellow
  • Once you’ve figured out which bit needs changing, use the filter dropdowns to make all of the red areas turn yellow
  • After you’ve got the filter working so that the red has turned yellow, see if you can come up with filters that turn the mushroom other colors

How many tries did it take you to find the right filter?

View on Code Studio

Student Instructions

Combining Filters

Now that you’ve played with filtering a single color channel, it’s time to see what happens if we filter more than one color.

Do This

  • Using the color dropdowns in the filter section, build a filter that changes the value of more than one color channel
  • Click on the top row of lightbulbs in the Diagram section to see how the filter will convert the input (top bulbs) to the output (bottom bulbs)
  • Look at how the numbers in the Binary section reflect changes to the colors
  • Complete the Level 4 table in your Activity Guide
View on Code Studio

Student Instructions

Combining Filters

Sometimes you’ll need to filter more than one pixel to get the color change that you want.

Do This

Check out Mario, he’s lookin’ pretty good in his red hat and overalls. Your job it to set up the filter so he looks like Luigi, with a green hat and overalls.

  • First, determine which bit(s) needs to change in order to the change you want
  • Once you’ve figured out which bit needs changing, set the filter dropdown appropriately
  • After you’ve got the filter working so that, try to come up with other filters that change only his hat and overalls - how many different clothing colors can you come up with?

How many tries did it take you to find the right filter?

View on Code Studio

Student Instructions

UnFiltering

Bit filters can be used to undo filtering as well, here’s an image of a bird that’s been filtered from it’s original colors - can you get it back to normal?

Do This

Here’s what our bird should look like, use the filter to get him back to normal.

  • First, determine which bits needs to change in order to the change you want
  • Once you’ve figured out which bits needs changing, set the filter dropdown appropriately to test your answer
  • After you’ve fixed the image, write down both your process and your final filter in the Level 6 section of your Activity Guide

How many tries did it take you to find the right filter?

View on Code Studio

Student Instructions

Free Play

Do as you will, make something awesome

Standards Alignment

View full course alignment