In these lessons, you’ll learn how to use your knowledge of encoding information to create more advanced methods for representing images in binary form. You’ll start with simple black and white images and develop your own methods to communicate all the necessary details found in these images. After that, you’ll improve your methods to handle the encoding of color images.
These lessons explore how abstraction, data, and creativity come together in computer science. You’ll use a tool called the pixelation widget, which lets you apply and test your image encoding methods. You can find more details about this widget and how it works in the tutorial videos in the CSP Unit 1 course on Code Studio.
Digital images are stored in a computer as a series of pixel data. This data tells the computer how much light and what color should be used at different points in the image. When the computer displays the image on a screen, it uses this data to set the color and brightness of the tiny lights on the screen, which we see as an image. The light levels in the pixel data change depending on the color, with the simplest being 0 and 1 for black and white, and becoming more complex as color is added.
The methods you develop need to convey both the pixel color data and the size of the image. As you work with color images, you might want to use hexadecimal representations for your color values. You can learn more about hexadecimal in the tutorial videos in the CSP Unit 1 course on Code Studio.
When using the pixelation widget, you need to think about how you’re encoding the dimensions of the image as well as the pixel data. Since the pixel data changes the colors in the image, you might focus on adjusting it. Remember, to make the image look right, all bits must be encoded correctly. Changing how colors are represented might require updating a lot of data for the image to appear correctly.
It’s natural to experiment with the widget, and this is encouraged. By trying different color representations, you’ll build an understanding of the numeric values of colors. While experimenting, ask questions that help you uncover the core concepts behind what you’re seeing. Consider questions like: Why does the image look strange when you change the bits per pixel without updating the pixel information? How are black and white images different from color images? How does the order of the image data in the pixelation widget matter? What happens when you switch the color data with the size data?
Refer to your walk-around card for the pixelation widget for more questions to ask and things to look out for while using the tool. This will help you deepen your understanding and improve your skills in encoding images.
Use graph paper to draw a simple black and white image. Then, convert your drawing into binary code by assigning 0 for white and 1 for black. Share your encoded image with a classmate and see if they can recreate your original drawing from the binary code.
Experiment with the pixelation widget to encode a small color image. Try changing the number of bits per pixel and observe how it affects the image quality. Discuss with your peers why certain changes make the image look different.
Learn about hexadecimal color codes and use them to encode a simple image. Create a color chart using hexadecimal values and apply these to your image. Share your encoded image with the class and see if they can decode it back into the original colors.
Work in groups to develop a new method for encoding images that balances simplicity and detail. Use abstraction to simplify the image data while maintaining important details. Present your method to the class and explain how it improves upon existing methods.
Prepare a list of questions about image encoding, such as how different data representations affect image quality. Pair up with a classmate and take turns answering each other’s questions. Use the pixelation widget to test your answers and deepen your understanding.
In these lessons, students will apply their experience with encoding information to build more complex protocols for representing images in binary. They will start with black and white images and develop their own protocols to communicate all the necessary data found in these images. Next, students will enhance their protocols to handle the encoding of color images.
These lessons explore the overlap between the key concepts of abstraction, data, and creativity in computer science principles. We will use a tool called the pixelation widget, allowing students to apply and test their protocols for encoding images. More information about this widget and how it works can be found in the tutorial videos in the CSP Unit 1 course on Code Studio.
Digital images are stored in a computer as a series of pixel data, which encodes how much light and what color should be used at various points in the image. When the computer displays the image on a screen, it uses that data to set the color and brightness of the tiny lights on the screen, which we perceive as an image. The light levels captured in the pixel data change depending on the color, with the most basic color channels being 0 and 1 for black and white, and becoming more sophisticated as color is added.
The protocols that students develop will need to convey both the pixel color data and the size of the image. As the images include color, students might want to use hexadecimal representations of their color values. More information about hexadecimal can also be found in the tutorial videos in the CSP Unit 1 course on Code Studio.
When using the pixelation widget, students must consider how they are encoding the dimensions of the image as well as the pixel data. Since the pixel data is what changes the colors in the image, students may become focused on adjusting it. It’s important to remember that to achieve the intended appearance of the image, all bits must be encoded correctly. This means that changing how colors are represented may require updating a significant amount of data for the image to look just right.
It’s natural for students to experiment while using the widget, and this is encouraged. By exploring different color representations, students will build context and understanding around the numeric values of colors. While experimenting, it’s important to ask questions that help them uncover the core concepts behind what they are observing. Consider asking questions like: Why does the image look unusual when you change the bits per pixel without also updating the pixel information? How are black and white images different from color images? How does the order of the image data in the pixelation widget matter? What happens when you switch the color data with the size data?
Refer to your walk-around card for the pixelation widget for more questions to ask and things to look out for while using the tool.
Encoding – The process of converting data into a different format using a specific method. – When you save a text file, the computer uses encoding to store the characters as binary data.
Images – Visual representations of objects, people, or scenes, often stored in digital formats. – We use software to edit images before uploading them to the website.
Pixel – The smallest unit of a digital image or display, representing a single point of color. – The resolution of a screen is determined by the number of pixels it can display.
Data – Information processed or stored by a computer. – The program analyzes data to generate a report on user activity.
Color – The property of an object that is produced when light reflects off it, often represented digitally by codes. – In web design, we use color codes to ensure consistency across the site.
Hexadecimal – A base-16 number system used in computing to simplify binary code, often used to represent colors. – The color blue can be represented by the hexadecimal code #0000FF.
Widget – A small application or component that provides a specific function or feature on a computer interface. – The weather widget on my desktop shows the current temperature and forecast.
Computer – An electronic device that processes data and performs tasks according to a set of instructions. – I use my computer to complete homework assignments and play games.
Brightness – The level of light emitted from a screen or display. – Adjusting the brightness of your monitor can help reduce eye strain.
Abstraction – A concept in programming that simplifies complex systems by focusing on the essential features rather than specific details. – Using abstraction, programmers can manage large codebases more efficiently by hiding complex details.
