AP CSP Unit 1 Lesson 8 Color Pixelation: Task 2

I am stuck on Bubble/Level 8 in Lesson 8 of Unit 1. I am building a PowerPoint for this entire lesson. I do not know what is needed on bubble 8 Color Pixelation: Task 2. I am confused, and if I am confused, I cannot teach/explain it.

Look at my PPT and maybe you have suggestions for me on how to guide the students on this exercise.[Aug 31 Presentation Lesson 8 Color Images.

pdf|attachment](upload://fJ2OeHPZ9jlVDO5KROs0dutY6L4.pdf) (2.0 MB)

Students are basically creating shades of colors. I am attaching a few samples that my students did. I have attached the original and the student samples. I hope this will help.

image image image image

This is great. But what I am confused about, is how to get those colors with just using 0s and 1s. I am not as smart as many students so I need to know how you got pink, yellow and orange with just using zeros and one’s; please.

Hi @msmith,

The key is in the pixel format - in the case of Bubble 8, the default is set to 9 bits per pixel, formatted as shown:
image
You can see to represent one pixel, it takes 9 bits.
The first 3 bits represents how much red. If you want full red, the first 3 bits should be 111. If you wanted no red (think of it as turning the red lights off), the first 3 bits should be 000.

Let’s say you wanted this pixel to be red. You’d set the first 3 bits to 111 to set the red channel to max, but then you’d want to turn the green and blue channels off, so you’d set the middle 3 bits (the green channel) to 000 and the last 3 bits (the blue channel) to 000.

To set a pixel to be white, you want to set all 3 channels to max, so max red, max green, max blue - 111111111.

Now what about pink? It’s somewhere between the red pixel and the white pixel.
So you want full red. 111------
And let’s do something between what we did for the red pixel and white pixel - let’s set the green to half and blue to half. 111 is full, 7 in decimal. 000 is empty, 0 in decimal. Halfway-ish can be 3 in decimal, which is binary 011. Let’s use that for the green and blue, giving us a red of 111, green of 011, blue of 011…
111011011.

Try it and see how it looks.

To play around with the concept of adjusting red, green, and blue channels to create shades of colors, try these pixel widgets:
https://studio.code.org/projects/applab/qiyLvNCBDuOYbaBB8oe0isTwNDYTOeGA5cpWlhHNTzM (by Alan Schmitt)
https://studio.code.org/projects/applab/IzbopHNf4l7BGMQtPeJLDIRbINVYVXvmM72v8f41ykM
(ignore the references to 12-bit hex code since you’re using a 9-bit binary code, but the concept of adjusting color channels still applies)

Awesome, and thanks for the explanation.

So, here is what I did since I had to have the lesson completed by Friday. I told them to:

  1. Set height and width to 24
  2. Set pixels to 24
  3. Work from hexadecimal
  4. I provided a link to a hexadecimal chart
  5. So for pink the hexadecimal could be: ff99cc
  6. I then told them to switch from hexadecimal to binary to see what happens as they input colors from the hexadecimal chart

When I get to my computer I will send you the ppt I created for this lesson. I would love your feedback.

Michael