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:
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…

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)
(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.


Let me know if this helps

Michael Smith

(Attachment Aug 31 Presentation Lesson 8 Color Images.pptx is missing)

Thank You. I have been reading comments in the forum and I would like to know your thoughts on skipping Unit 2 and going on to Unit 3. After the Create Task is completed go back to Unit 3.


********************* CONFIDENTIALITY NOTICE: This e-mail contains private, privileged and confidential information belonging to the sender. The information herein is solely for the use of the addressee. If your receipt of this transmission has occurred as the result of an error, in such circumstances, you are advised that you may not disclose, copy, distribute or take any other action in reliance on the information transmitted. The Carson City School District does not guarantee that this communication is free of viruses, interceptions or interference, and does not endorse the sender’s personal opinions or similar information which may be contained in this message. To report email abuse - abuse@carson.k12.nv.us *********************