U1/Ch1/L8:  Encoding Color Images & Hexidecimal (15pts.)

Purpose: Students will learn how to encode color images. Gradesheet
Vocabulary: RGB

Journal #2: Encoding Color?

• Write down the names of as many shades of blue you can think of.
• How many do you think there are total? (partner/class)

Here are the Black and White Images that you encoded during the previous class.

• Devise an Encoding Scheme for color (with Partner) - Share.
• How many colors could you represent?
• What are some of the difficulties you face?

Video: "A Little Bit About Pixels." (Note: This is the same video we viewed with B&W images).

Activity 1: Color Pixelation  Widget
Log on to Code.org, U1Ch1L8 View Explanation 1.RGB Color. #1-Video Tutorial: Color Pixelation Widget  - (3 bit color) Recreate the image to the right using the Pixelation Widget. (Puzzle 2 of 9; Color pixelation Task 1)
View Explanation 3. More Shades of Color. #2-Video Tutorial: Color Pixelation Widget  - (6 bit color) Recreate the image to the right using the Pixelation Widget. (Puzzle 4 of 9; Color pixelation Task 2)
View #3-Video Tutorial: Color Pixelation Widget  - (12 bit color) Recreate the image to the right using the Pixelation Widget. (Puzzle 5 of 9; Color pixelation Task 2)(5pts.)
6. Color Sampling Widget For each of the four images, decide which would be the best 'Sampling to accurately recreate it. 7. Pixelation Widget (10pts.) Now you get to try and recreate any one of the 4 images...Good Luck!

Hexadecimal:

Hexadecimal is a numbering system with base 16. It can be used to represent large numbers with fewer digits. In this system there are 16 symbols or possible digit values from 0 to 9, followed by six alphabetic characters -- A, B, C, D, E and F (view Hex Chart below). Although it is used to better understand large binary numbers, it is seen most representing colors.

Video: Understanding Hexadecimal

Hexadecimal Chart:

Code.org - Return to Color Pixelation Widget #7 (U1Ch1L8) and just like you did above, recreate Red/Green/Blue. Here is the encoding scheme:

Now, select Hexadecimal.

View the coding scheme on the image and then view the Hexidecimal Chart above and notice how the conversion is made from Binary to Hex...and the colors remain the same.
On the Hex Chart, "F" represents darker shades and "0" represents lighter shades. So, "F00" (in an RGB format) shows red 'On' and Green and Blue are 'Off'.
What if I want a less vibrant shade of Red...remove 'F' and insert '7'. Notice the change.

Activity #1: Recreate this image that you previously made, but you have to use a Hexadecimal encoding scheme - using 12 bits per pixel. (Use the Color Pixelation Widget #7 (U1Ch1L8)

Professionals use a 24 bit encoding scheme instead of the 12 bits you have been using here. The numbers for each color are doubled up. This means there are 8bits for Red, 8bits for Green and 8bits for Blue. This doubles the variety of colors that you can be used.

Activity #2: Now, create Red/Green/Blue using 24 bits.

Take a look at this Hex Coding Chart!
Fill in the rest of this 4x4 grid by adding in colors of your choice from the Hexadecimal Coding Chart.

Review Video Encoding Data For Computers: How Computers Work: Binary & Data.