AP CSP: Pixelation – B&W/Color Images October 17, 2016

Black and White Image Encoding: Back in Unit 1 you encoded a line-drawing image as a list of numbers that made up the coordinates of the points in the image. That works for line drawings, but how might you encode a different kind of image? You are now going to create a protocol to represent how you would encode a B&W image in Binary. Follow the directions on the page and try to recreate some of the images using your protocol. Think about how you are going to represent the height and width of a particular image. Try and make your protocol applicable to larger B&W images.

Encoding Strategies: What was your strategy? Is your protocol flexible enough to accommodate images of any size? How do you accomplish this? Are there limits in terms of size with your protocol? Is your encoding intuitive and easy to use? Is your encoding efficient? How many bits does your protocol require?

What are Pixels? Images on computer screens are created by illuminating pixels on the screen. B&W images are simply created by either turning a light on or leaving it off. Pixel -  Short for "picture element" it is the fundamental unit of a digital image, typically a tiny square or dot which contains a single point of color of a larger image. Images on computers screens are simply a collection of many many colored pixels that combine to create an image

Metadata: When creating an image using pixels it is important to include information that has nothing to do with the pixels and everything to do with the size of the image. Some bits will be reserved to determine the width and height of your image. The information that we include for the width and height of an image is called Metadata. Metadata - is a set of data that describes or gives information about other data. Where have we seen metadata used before? Think about some of the lower layer Internet protocols we have learned about? How do they use metadata?

Creating B&W images using Binary: Now you will create your own B&W image using Binary. Log into code.org and go to Unit 2 Stage 3. You can watch the B&W Pixelation Video if you want to learn specifics about the widget. Basically your first 8 bits represent the width of the image and your next 8 bits represent the length of your image. The rest of the bits you will use determine whether or not you want a white or a black pixel. In the widget, the bits are spread out to make it easier for you to create your image. Follow the onscreen instructions and complete the tutorials. Eventually you are going to create an Image of your choosing using binary pixel data.

Reflection questions: What are the largest dimensions (width and height) of an image we can make with the pixelation widget? How many total bits would there be in the largest possible image we could make with the pixelation widget? How many bits would it take to represent the smallest possible image (i.e. an image with one pixel)? What would happen if we didn’t include width and height bits in our protocol? Assume your friend just sent you 32 bits of pixel data (just the 0s and 1s for black and white pixels). Could you recover the original image? If so, how?

Image Pixelation Details: The image file protocol we used contains “metadata”: the width and height. Metadata is “data about the data” that might be required to encode or decode the bits. For example, you couldn’t render the B&W image properly without somehow including the dimensions. Prompts: What other examples of metadata have we seen in the course so far? What other types of data might we want to send that would require metadata?

Image Compression: (Optional) Prompt: “Did you think about compression at all while doing this exercise? Can you think of a way that you might represent an image of pixel data with fewer bits? What would have to change about the encoding strategy?” Run-length encoding – CS UNPLUGGED

Color Images: Well now that we have learned about B&W images we will now look into how color images are encoded. For B&W images we only needed a 0 to represent white light and a 1 to represent black (absence of light) But now we want to represent all the different colors we know about. How could we represent all these different colors in Binary? Now you will devise an encoding scheme for color in an image file. How would you represent color for each pixel? How many different colors could you represent? Do you have a particular order of the colors

Color Image Encoding Strategies: What are some of the difficulties of representing color? So many colors!!! What are some of the strategies or schemes you came up with to represent all the colors? The way color is represented in a computer is different from the ways we represented text or numbers.  color, we actually use binary to encode the physical phenomenon of LIGHT. To represent all the different colors we use three different types of light to create all the colors on the screen. Red, Green, and Blue

Color Image Phenomenon: Now we’ll watch a video that describes how colors are represented on the screen both in the hardware and binary. Important ideas from this video include: Image sharing services are a universal and powerful way of communicating all over the world. Digital images are just data (lots of data) composed of layers of abstraction: pixels, RGB, binary. The RGB color scheme is composed of red, green, and blue components that have a range of intensities from 0 to 255. Screen resolution is the number of pixels and how they are arranged vertically and horizontally, and density is the number of pixels per a given area. Digital photo filters are not magic! Math is applied to RGB values to create new ones.

Color Encoding-Hexadecimal and Binary: The way that color is represented in binary is using 24 bits to represent each pixel. The first 8 bits represent the intensity of Red light. The next 8 bits represent the intensity of Green light and the last 8 bits represent the intensity of blue light. 00000000 -> 11111111 Darkest to most intense light To represent the many pixels that an image on the computer has you will need tons of bits. Instead of representing all the pixels in Binary, color images are usually represented in Hexadecimal. We can represent those 8 binary bits that represent the intensity of each color with two hexadecimal bits. Every 4 binary bits can be represented with one hexadecimal bit

Hexadecimal and Binary Encoding: 0000 0001 1 0010 2 0011 3 0100 4 0101 5 0110 6 0111 7 1000 8 1001 9 1010 A 10 1011 B 11 1100 C 12 1101 D 13 1110 E 14 1111 F 15 Hexadecimal and Binary Encoding:

Hexadecimal/Binary Encoding So every four binary bits is represented by 1 hexadecimal bit Binary: 1111 0101 -> Hexadecimal: F5 Since color pixels are represented with 24 binary bits ( 8 for Red, 8 for Green, 8 for blue), we can represent this with 6 hexadecimal bits. R G B R G B 1111 1111 1000 1100 1010 0010 -> FF 8C A2 We can represent color images with less bits but the standard is 24 binary bits or 6 hexadecimal bits.

Color Image Pixel Simulator: Now you are going to create color images in the online simulator. Go to Unit 2 Stage 4 and begin the exercises to learn more about color images Watch the tutorial videos for each exercise and complete the tasks.

Personal Favicon Project: Now that we learned how color images are represented now you are going to create an icon of your choosing. Directions: Create a personal 16x16 favicon and encode it using the Pixelation Widget on the final level of this lesson in Code Studio. The image you make should represent your personality in some distinctive way. You will be using this favicon in future lessons and web sites that you make, so be creative and thoughtful. After you have finished your favicon, share it with others in the class by sending them the bits with the Internet Simulator Widget!

Personal Favicon Project Continued: Requirements: The icon must be 16x16 pixels. You must use the Pixelation Widget to encode the bits of color information. The image must be encoded with at least 12 bits per pixel. Things to think about: A simple design with a few basic colors is probably the best solution. How could you use more colors? Plan ahead: Sketch your design before starting to encode the bits. You might want to use a tool to help you draw small images. Suggestions: Favicon & App Icon Generator: http://favicon-generator.org/editor/ Make Pixel Art: http://makepixelart.com/free/