Use this thread to discuss your questions and comments about how to run the lesson.
When using the Pixelation Widget to create images, is there a way to make a portion of the image transparent? We looked at the different Favicons open in our browser, and some of them have a portion that is transparent. That’s the goal of some of us when creating the images.
No, not using the widget! The widget only supports RGB values for the pixels. In order to add transparency, we need an alpha value (RGBA).
I used AppLab to create a game that goes along with this lesson: https://studio.code.org/projects/applab/eCkPhvM6fCEIQhjYVlJsLQ
To play the game, you must guess the RGB code for the color shown. There are 4 different levels, with each level increasing the number of possible colors, thus making it more difficult.
Two of the levels use binary, the other two use hex.
For example:
6 bit binary: 001100 would be green.
9 bit binary: 101000100 would be a shade of pink
12 bit hex: 0DE would be a bright green-blue
24 bit hex: 00FF45 would be a mainly green color with some blue.
This game also incorporates searching strategies because the player is given feedback on each color component: too much red, or too little green, or just the right amount of blue.
Try it out and let me know if you find any bugs!
4 Likes
Thanks for sharing! I plan to share this with my class tomorrow!
@nbaltatzis I LOVE this! I think Ss will like it too!
As a reminder, 10% of men are color blind so this might be tough for some students - but it will be a lot of fun for the others!
Thanks SO much for sharing! I love how it foreshadows what Ss will be able to do in app lab too! It’s a great, socially useful, app!
Wow! I had no idea that number was so high! I am using the game as an optional activity so the color blind students can opt out of it.
Thanks for the game @nbaltatzis - this will be a nice addition if students have extra time.
Once again my students are LOVING This project. However, I have had two students who have ran into issues with theirs saving. It is showing a black image for some reason. Has anyone else ran into this issue?
I find it weird that the image is all black and not all clear - that makes me think it is something else going on… not that they didn’t save or something. I took a picture of the screen here. I will file a bug report too.
Thoughts?
Hey Katie,
I’m looking at the bits of your image and I think the issue is just that all the colors your student is using are very dark. It looks like all of the channels are set to 1 on a scale from 0-15. Want to try to set them a little brighter and see if you’re still getting bugs?
Cheers!
GT
Well, the image was originally the start of a bright blue cookie monster - I don’t know how the image got to be all these dark colors. I am wondering if the student had two tabs open with the same stage on it if that impacts the saving of the image. He actually re-started in class and the same thing happened again just now. He did have a second tab open with the same stage/bubble at that time which is why I was thinking that might have been the issue… I had him file a bug report the second time too.
We will see what happens 6th hour!
Ahhhh, ok that sounds a lot more like the source of the problem. Do file the bug, I’ll make sure to check in on who’s handling it, and I’ll report back here once I know how it’s being solved. Obviously in the meantime advise students to only work in one tab and then if you still get the problem let us know. Thanks for reporting!
1 Like
Hi All,
I used Padlet to do our “gallery walk” - I just kept it up on the board and as students finished they posted it to Padlet. It is free to use and very intuitive for students. Students loved it! Here is our padlet. After seeing this student work, I’m really excited for the first programming unit where students draw a scene - I think it could be pretty creative! Students also commented how fast these classes went which is usually a good indicator for engagement! This unit 2 chapter 1 is maybe some of my favorite lessons and activities of the curriculum!
4 Likes
Great idea to use Padlet for this gallery walk. I will definitely follow suit when my students finish their favicons.
Why is the metadata only 24 bits (3 bytes per pixel) on the first bubble question? Why doesn’t the answer reflect the dimensions?
@carmichaelc The metadata is the 3 bytes total (1 byte for width, 1 byte for height, and 1 bit for number of bits per pixel). This is a total of 3x8 =24 bits for the meta data.
The answer reflects the dimensions in that you have 25x50 pixels which is a total of 1250 pixels. Each pixel needs 24 bits to determine the color so the total number of bits is 1250x24 which is 30,000 bits. And that is just for the ACTUAL data. So we still need to include the metadata (from above).
So… metadata (24 bits) + data (30,000 bits) = 30,024 bits. Does that help?
1 Like
I was interpreting the metadata to include the bits per pixel as 3 bytes if set to 24.
Not sure if I’m answering your question here or not…but let me try:
The metadata for this image is ALWAYS 3 bytes - 1 byte for width, 1 byte for height, 1 byte for bits-per-pixel. No matter what the dimensions are, no matter how many bits per pixel.
Note that this is abstract! The bits-per-pixel metadata just needs to hold a number in the range 1-24. So 1 byte easily covers that. But if bits-per-pixel is set to 24 it means that every pixel in the pixel data will have to be specified with 3 bytes.
The format reserves a whole byte to store the bits-per-pixel even though the bits per pixel can only range between 1 and 24. So, technically you’d only need 5 bits to store that number in the metadata but using 1-byte-offsets for metadata is more common.
Thus the calculation for total bits is (width * height * bits-per-pixel) + 24 bits of metadata. You can take that number and divide by 8 for bytes, but it might not come out as a nice integer if the student chose some bits-per-pixel value that results in odd offsets.
1 Like