Section 7.8

Learning Goals

• Students will represent colors with bits.

• Students will create pixels of different colors to make an image.

• Students will explore tools that manipulate pixels, colors and images.

• DAT-1.A.6: Bits are grouped to represent abstractions. These abstractions include, but are not limited to, numbers, characters, and color. 

Objectives and General Description

Bits are grouped together to represent abstractions.  In Section 4.5, students learned that bits can represent numbers.  In Section 4.7, students learned that bits can represent characters.  In this section, students will learn how bits can be grouped to represent images and colors.  The students will use CS Field Guide to help them explore pixel colors and resolution settings while they complete a guided notes handout.  Then students will integrates art and coding by creating PixelArt.  There is an optional activity included as the third activity.  There is a link to a  software program from Georgia Tech that converts an image to a spreadsheet of data.  By manipulating the spreadsheet, students can modify the picture.  This can be done as a demonstration by the teacher if the software can't be installed on school devices.  

Activities

Activity 7.8.1 (30 minutes)

1.  Warm Up Challenge:  Place student’s name conversions from the previous lesson in a “hat”.  When students arrive in class, they must draw a binary name and convert it to the English version of the name.  Once they have successfully converted it, they can get a sticker, piece of candy, etc. 

2. Quick thought question for Think-Pair-Share:  We know that data stores numbers and text.  What else do we store on our computers that would not fall into the number or text category?

3. Introduce the focus today’s class --- images.  Walk through a series of questions to determine what the students already know.

   1. How are images stored on a computer?

   2. How are they rendered on a screen?

   3. What exactly is a pixel?

   4. How does the computer know the precise shade of color that a pixel should be?

   5. What does resolution mean?

4. Ask students to explore the tool on Chapter 5.5 of the CS Field Guide.  Note that there are two sets of sliding scales, one represents a printer and the other represents a monitor.  The questions in APCSP have always been using the monitor format (RGB).  

5. Ask students to make specific colors:  purple, mint green, brown, white, black, pink.

6. Give students time to read and explore the rest of that chapter.  Students should definitely play around with the pixel viewer.  They can use the preloaded picture and zoom in to see the individual pixels and it even shows the RGB value of each pixel.

7. Students should complete the Images and Colors Guided Notes for this chapter.  

Activity 7.8.2 (budget 15 minutes)

Discover the relationship between RGB and hexadecimal color notation.  Have students go to W3schools color picker.  

7. 1. Ask them to click on their “favorite color”.  

   2. Ask them to write down the RGB values for that color. Example:  204, 51, 255

   3. Ask them to write down the hexadecimal notation format for the color. This is the 6 digit value that is preceded by a #.  Example:  #CC33FF

   4. Then ask them to divide the hexadecimal value into three components.  Example:         CC  |    33    |   FF

   5. Have them convert each component to its decimal equivalent.  

   6. Compare those equivalent numbers to the RGB values.  What did you discover?  These converted values are the same as the RGB values.  So...the first two values in a hexadecimal color notation are the red value, the second two are the green value and the third set is the blue value.  I have seen several practice multiple choice questions that are focused on this concept.

Activity 7.8.3 (time varies)

Many students are very familiar with pixel art.  Minecraft is a popular game in which students have learned to create entire worlds using pixel art.  This is an opportunity to bring in a fun, educational element to APCSP.   

There are many ways to make pixel art in the classroom.  Here are some options:

• Use Google Sheets to make pixel art.  

• Use Scratch to make pixel art.  Online tutorial video

• Find a pixel art tool online.  Do a quick google search and find one that will work for you.

Now for some creative ideas to incorporate art projects:

• Challenge students to make an avatar that looks like them.  

• Pick a flag from a country and recreate it using pixel art.

• Create the school mascot in pixel art.

• Incorporate current events by having groups of students work on google sheets collaboratively and create a pixel art representation of something in the news.  This can be a cultural event, a new innovation, etc.  Allow students to express themselves using the pixel art format.

• The sky is the limit!  Let students suggest ideas for pixel art.  

• Create a sprite in Scratch.  Make several versions of it with slightly different positions.  Then code the program so that the sprite looks like it is walking by rapidly changing costumes.

Activity 7.8.4 (15 minute demo)

Optional extension:  Students at GA Tech developed a tool that will convert an image to a spreadsheet of pixel locations & the RGB value of each pixel.  You can then mathematically manipulate the values on the spreadsheet and reverse the process to show picture manipulation.  For example, you can remove all the red and green from an image which leaves you with the image only in shades of blue.  Students can create grayscale images by averaging the RGB values, etc.  This software needs to be installed on a computer before you can use it.  It is NOT browser based.  I demonstrate this to the class and provide the link if they want to install it at home.  I start the demonstration by asking “Is the data for an image the same as the data for a spreadsheet?”  By the time I finish the demonstration, the students have learned that the same data can be rendered in a spreadsheet format or an image format.  The “data” is location on x, y axis and RGB values.  The tool renders it as an image or as a spreadsheet.  This is usually a powerful demonstration.  This software is free and can be found at Media Computation with Spreadsheets.  I highly recommend trying this out before demonstrating in class.  There is a link at the bottom of their webpage for a user manual.  One thing that I usually forget is that when you create a new spreadsheet, you need to name it differently than the original (use a Save As) and then close it before you upload the new spreadsheet back into the tool.

Resources

• 7.8.1: Chapter 5.5 of the CS Field Guide (student resource)

• 7.8.1: Images and Colors Guided Notes (student resource)

• 7.8.1: Images and Colors Guided Notes KEY (teacher resource)