Unit 1 · Lesson 8

Color Images

Postboard

How Many Shades of Blue?

How many different shades of the color blue can you name? Post as many as you can think of. We'll take a look at the board together once everyone has posted.

🖼️ Recap

Images, One Bit at a Time

Last lesson, we looked at black and white pictures and how we can represent them using binary.

FRQ · Recap

Bigger Pictures, Bigger Binary

What did you notice about the size of the binary as you increased the size of the images you drew?

🎨 Colors

Colors!

Today, we're going to see how the relationship between analog and digital plays out in the world of color. You'll get a chance to play with the pixelation widget again, but this time you'll use it to make your own color blends, or gradients.

But first, we need to look at how color works inside the pixelation widget.

Colors

One Switch, Two Choices

Last lesson, we used 1 bit for each pixel. That meant we had only two choices for each pixel: black or white.

You could think of each bit like a light switch.

Bit
0 1
black pixel white pixel
Colors

Three Switches, Three Lights

Now we'll use at least 3 bits for each pixel. Think of each bit as a switch that controls a different color of light inside the pixel: red, green, and blue.

Red
1
Green
0
Blue
0

Turning on the first bit turns on the red light and makes the pixel red.

Red
0
Green
1
Blue
0

Turning on the second bit turns on the green light and makes the pixel green.

Red
1
Green
1
Blue
0

Turning on the first and second bits turns on both the red and green lights, making the pixel yellow.

Colors

All Off, All On

With three bits, we can have 8 colors in total, since 23 = 8.

What color would you get if all the bits are 0?

Red
0
Green
0
Blue
0

All the lights in the pixel are off, so we get black.

What color would we get if all of the bits are on?

Red
1
Green
1
Blue
1

White. Red, green, and blue are additive primaries: when we add all of them together, we get white.

Video

Intro to the Color Pixelation Widget (Part 1)

To Code.org

Your Turn: Level 2

Follow this link to code.org to complete level 2.

Check the metadata: the first 3 bytes of each image's data describe what the bits that come after mean. Look at the top left corner for a diagram. These bytes are the image's metadata: data about the data.

Video

Intro to the Color Pixelation Widget (Part 2)

To Code.org

Keep Going: Levels 4-9

Follow the same link to code.org to complete levels 4 through 9.

Check in with your partner as you complete each level to double check your work.

Wrap Up

Color, Bit by Bit

Video

Images, Pixels, and RGB

Abstractions

Layers of Abstraction in Color Images

In computer science, abstractions come up a lot, and images are no different. Each layer builds on the one beneath it, without needing to know exactly how that lower layer works.

Digital Image Layer

A digital approximation of an analog image, made up of a grid of pixels.

↓ sampling assigns pixels
Sampling Layer

Sampling reads equally sized parts of the analog image and assigns each part to a pixel.

↓ built from
Pixel Layer

Each pixel holds levels of red, green, and blue light that describe its color.

↓ built from
Binary Layer

Those color levels are represented using a sequence of binary numbers, carried as electrical signals.

Video

How Computers Work: Binary & Data