'15-'16 Encoding Color Images

I like the lesson as it combines many concepts from previous lessons as well as gives a glipse into the future. It also brings in hexadecimal numbers to introduce students to other numerical systems. Those who had experience with HTML and color schemes should make a connection to the colors. For now, I will go with the lesson as it is but will look for other interesting ways to introduce the concept of colors and encoding.

I am just putting together this lesson for the class and I think I see an error in the Hex Worksheet.

The first example says “The second digit contains “A” or 11. The 4-bit binary representation of 11 is 1011.” But isn’t “A” the same as 10 in decimal?

Thanks!
Kaitie

Hi Katie,

We looking into this for you but not sure where the example is you are referring too. Could you point us to where you are seeing this?

Thanks!

CSP Team

Hey Katie,

We’ve made the appropriate change.
Good catch and thanks!

Hi @gtwrobel,

I was thinking that “A” mapped to 10 (NOT 11) and the binary conversion for 10 is 1010. Thus the image did not need to be changed just the text above the image in the document. Where it says “The second digit contains “A” or 11…”

I am teaching this lesson tomorrow so I just want to make sure I understand the content correctly! Am I missing something?

Thanks!
Kaitie

Katie,

You are absolutely correct about that, the error was entirely mine and I’ve updated the doc to reflect the fact that A is 10. I appreciate your persistence in getting this taken care of. Wishing you a successful lesson tomorrow!

GT

Students really enjoyed this lesson and seemed to internalize the RGB and pixel ideas. The video from Instagram was also well-done and drove home the big ideas in an engaging way for students. I think this goes above the scope of CSP, but it would be nice to have a tool to have students think about and create functions that filter images and predict what would happen when specific functions are used. There was some of that on the worksheet, but I think students would have enjoyed going more into that.

The task that asks students to create different shades of red I think needs some verbal explaining from the teacher as far as what makes a “redish” color. When I think red shades I think red, but darker but the directions I think want students to make red the primary color (you can throw blue in there too, as long as it is more red than blue). I really like how this transitioned into asking for shades of gray which really threw students initially but then helped students think of how light creates white vs. black colors and how to get shades in between.

I think there is maybe an opportunity to loop in abstraction again here since students spend so long making their favicon, it is a good time to talk about, what if you wanted to make your favicon face green instead of blue - it would take a lot of time to find every blue pixel and replace it with green, it would be nice if you could set a variable “face color” and then switch the variable to find every blue pixel in the face and make it green.

Finally, many of my students perfered binary over hex which was obnoxious for them to type in, but they were more comfortable with it. I looked in the CSP curriculum framework and the EK statements did not seem to indicate students needed to know how to translate from binary to hex, but rather just know that hex is a system that is used to represent numbers and has a different base. However, there was an example question that required students to interpret some hex values. How essential is it that students are comfortable with hex? I could see doing a day of hex-practice before headed into this lesson so students didn’t go so crazy looking at all those ones and zeroes.

One more thing was that the videos before each “bubble” were good, but since students were going at their own pace, they would play the videos out loud over one another and it didn’t make sense to show it to the class since they were all at different parts. Some students had ear-buds but others just skipped the videos. I think having more detailed notes for this section would be helpful vs the videos.

Overall - students are really getting into this unit (as am I) and I am excited to see what unit 2 holds!

One other note - today we came back to finish up the unit and some students had lost their favicon in code studio. For some students nothing showed up, for other students something weird showed up. Was this a bug in the system or was the system never supposed to save it? I had a few students “report a bug” so hopefully that helps. I told students to copy and paste their code into an e-mail or something yesterday just in case, but some students didn’t listen.

If it is not supposed to save, I think a little warning /pop up would be helpful so students are aware they will lose the information.

Hi Kaitie (and others who are experiencing this) – there was indeed a bug where autosave was not working properly. For any students that explicitly clicked the ‘Save image’ or ‘Finished’ buttons, that would have successfully triggered a save, but if they were in the middle of work, unfortunately the tool was not saving.

We have since fixed this issue on our end, so moving forward this should not happen. We apologize for the lost work and any frustration your students experienced!

-Sarah

I like the reading from Blown to Bits on Hiding Information in Images. But I don’t know the answer to the question “Besides hiding information sent to others, what other uses can stenography have for everyday users? For example, what uses would stenography have for an American businessman in China?”

I’m not sure there are “right” answers to this question. It’s more about thinking creatively in how you might “hide something in plain sight”. The line between steganography and cryptography is often blurry. For steganography what’s kept secret is the method by which you’re hiding information. In cryptography you usually assume the method is known, but what’s kept secret is some “key” that’s used as input to the method…But I’m getting wonky.

As for the American businessman in china? I’m guessing this question has a bit of a political assumption about data traveling into and out of China. Let’s generalize to say that you want to bring information into and out of a place or country that you assume will inspect everything and you don’t want to raise suspicions. If that businessman has a laptop with a lot of encrypted files perhaps it would be confiscated, or the man arrested and forced to give up the password. But if the businessman has all the sensitive information hidden in images, it might just look like a normal photo gallery that anyone might have on their computer and he could elude suspicion.

Examples of steganography in everyday life outside of images are usually thought of “coded” messages or ways to obscure what you’re really trying to communicate. For example: when I coached basketball (girls JV) we had a play called “color” and to run that play I would call out any color like “red” or “blue” or “green.” The other team might think these were different plays, but we were just obscuring the one play. Hope this helps.

Thanks for the quick response!

Is there a lesson where we do Stenography later in the course?

I think I’m going to ask an alternative question for that reading section. Maybe “What information might a high school student want to hide in an image?” in preparation for doing a hands on exercise with it later.

Also that has a typo. Should be Steganography

Besides hiding information sent to others, what other uses can stenography have for everyday users? For example, what uses would stenography have for an American businessman in China?

Noted and fixed. Thanks.

Students loved this lesson, but putting hex in there the same day was too much. This became very clear by the end of the unit when we did a unit reflection. I am not sure how essential this content is for the college board, but there were certainly some gaps in the content knoweldge for my students.

I did a “telephone” activity in class to remedy this and it worked quite nicely. Students were given a blank sheet of paper and wrote a 6 or 8 digit binary number at the top, then students passed their sheet of paper to the person next to them. That person changed the binary number to a decimal number and then folded over the binary number so the next person could not see it. Then they passed the paper to the next person in the line. That person saw just the decimal number and converted it to hex. They then folded the sheet of paper over again so the next person could only see the hex. We did a few rounds where students repeated changing the number from binary to decimal to hex and then back to decimal and binary again. When we were done, they unfolded the paper and checked everyone’s work and checked to see who went wrong and where/why. Attached is an image of a few of the outcomes.

They really enjoyed it and it was great practice too. I will definitely add this in before we do color images. I had a lot of students using binary for color images because they did not feel comfortable with hex - I think this would fix that issue.

3 Likes

Katie, my students also thought Hex needed more time. I found some online games.
Convert Binary to Hex - http://flippybitandtheattackofthehexadecimalsfrombase16.com/
Hex Invaders - Practice with colors - http://www.hexinvaders.com/

Unfortunately Flippybit was blocked but Hex Invaders worked great.

Another issue I had was that the Hex Worksheet is not legible when copied on my black and white printer.

3 Likes

these are some great resources, caroline!

since this lesson is all about color, i would definitely recommend students have a digital copy of the worksheet up so they can see the color values while going through the activity!

this is a really clever idea, kaitie!

We closed Stage 14/started Stage 15 by bringing in a couple microscopes from the science rooms and having the students pull up an image on their phones and looking at that under the microscope. We only did color images but next time we’ll do black and white first then a color image. That leads directly into discussions of RGB since they saw dots of red, green, and blue in the microscope.

We also talked about the Social Media outlets that communicate through images and what types of communications we can share through images. It led to talking about how the whole world can communicate even if they cannot read.

These were side steps we added to this Stage.