# Picture Lab A1 - A3 This lesson has no coding exercises. The [Picture Lab](https://secure-media.collegeboard.org/digitalServices/pdf/ap/picture-lab-studentguide.pdf) is a fun lab where you learn how to modify digital pictures pixel by pixel using a 2D array. ## A1 Introduction to Digital Pictures and Color If you look at an advertisement for a digital camera, it will tell you how many megapixels the camera can record. What is a megapixel? A digital camera has sensors that record color at millions of points arranged in rows and columns (Figure 1). Each point is a **pixel** or picture (abbreviated pix) element. A **megapixel** is one million pixels. A 16.2 megapixel camera can store the color at over 16 million pixels. That’s a lot of pixels! Do you really need all of them? If you are sending a small version of your picture to a friend’s phone, then just a few megapixels will be plenty. But, if you are printing a huge poster from a picture or you want to zoom in on part of the picture, then more pixels will give you more detail. How is the color of a pixel recorded? It can be represented using the RGB (Red, Green, Blue) color model, which stores values for red, green, and blue, each ranging from 0 to 255. You can make yellow by combining red and green. That probably sounds strange, but combining pixels isn’t the same as mixing paint to make a color. The computer uses light to display color, not paint. Tilt the bottom of a CD or DVD in white light and you will see lots of colors. The CD acts as a prism and lets you see all the colors in white light. The RGB color model sometimes also stores an alpha value as well as the red, green, and blue values. The alpha value indicates how transparent or opaque the color is. A color that is transparent will let you see some of the color beneath it. ![RGB values and the resulting colors displayed in rows and columns](images/rgb1.png) *RGB values and the resulting colors displayed in rows and columns* How does the computer represent the values from 0 to 255? A decimal number uses the digits 0 to 9 and powers of 10 to represent values. The decimal number 325 means 5 ones (5 × 10⁰) plus 2 tens (2 × 10¹) plus 3 hundreds (3 × 10²) for a total of three hundred and twenty-five. Computers use **binary numbers**, which use the digits 0 and 1 and powers of 2 to represent values using groups of bits. A **bit** is a binary digit, which can be either 0 or 1. A group of 8 bits is called a **byte**. The binary number 110 means 0 ones (0 × 2⁰) plus 1 two (1 × 2¹) plus 1 four (1 × 2²), for a total of 6. Questions: > Check your understanding: How many bits does it take to represent the values from 0 to 255? See [https://mobile-csp.org/webapps/numbers/binaryConverter.html](https://mobile-csp.org/webapps/numbers/binaryConverter.html) for help. — answer it on CS Awesome: https://runestone.academy/ns/books/published/csawesome2/pictureLabA1toA3.html#picture-lab-A1-1 > Check your understanding: How many bytes does it take to represent a color in the RGB color model? — answer it on CS Awesome: https://runestone.academy/ns/books/published/csawesome2/pictureLabA1toA3.html#picture-lab-A1-2 > Check your understanding: How many pixels are in a picture that is 640 pixels wide and 480 pixels high? — answer it on CS Awesome: https://runestone.academy/ns/books/published/csawesome2/pictureLabA1toA3.html#picture-lab-A1-3 ## A2: Picking a Color Try the following Color Chooser (also at [https://www.cssscript.com/demo/rgb-color-picker-slider/](https://www.cssscript.com/demo/rgb-color-picker-slider/)) by moving the sliders to see the RGB values for each color: > Open it on CS Awesome: https://runestone.academy/ns/books/published/csawesome2/pictureLabA1toA3.html#a2-picking-a-color Java represents color using the java.awt.Color class described here [https://docs.oracle.com/en/java/javase/22/docs/api/java.desktop/java/awt/Color.html](https://docs.oracle.com/en/java/javase/22/docs/api/java.desktop/java/awt/Color.html). Questions: Use the color chooser above to answer the following questions. 1. How can you make pink? What is the RGB values you used? 2. How can you make yellow? What are the RGB values that you used? 3. How can you make purple? What are the RGB values that you used? 4. How can you make white? What are the RGB values that you used? 5. How can you make dark gray? What are the RGB values that you used? > Discuss this with your class, or answer it on CS Awesome: https://runestone.academy/ns/books/published/csawesome2/pictureLabA1toA3.html#pictureLabA2Qs ## A3: Exploring a Picture Images are often stored as jpg or jpeg files. A JPEG file is one that follows an international standard for storing picture data using lossy compression. Lossy compression means that the amount of data that is stored is much smaller than the available data, but the part that is not stored is data we won’t miss. > Check your understanding: What is the row index for the top left corner of the 640x480 beach picture? — answer it on CS Awesome: https://runestone.academy/ns/books/published/csawesome2/pictureLabA1toA3.html#picture-day3-0a > Check your understanding: What is the column index for the top left corner of the 640x480 beach picture? — answer it on CS Awesome: https://runestone.academy/ns/books/published/csawesome2/pictureLabA1toA3.html#picture-day3-1a > Check your understanding: What is the right most column index of the 640x480 beach picture? You can click on the Maximize button on the top right to see the scroll bars or use the right arrows. — answer it on CS Awesome: https://runestone.academy/ns/books/published/csawesome2/pictureLabA1toA3.html#picture-day3-2a > Check your understanding: What is the bottom most row index of the 640x480 beach picture? You can click on the Maximize button on the top right to see the scroll bars or use the right arrows. — answer it on CS Awesome: https://runestone.academy/ns/books/published/csawesome2/pictureLabA1toA3.html#picture-day3-3a > Check your understanding: Does the row index increase from left to right or top to bottom? — answer it on CS Awesome: https://runestone.academy/ns/books/published/csawesome2/pictureLabA1toA3.html#picture-day3-4a > Check your understanding: Does the column index increase from left to right or top to bottom? — answer it on CS Awesome: https://runestone.academy/ns/books/published/csawesome2/pictureLabA1toA3.html#picture-day3-5a > Check your understanding: Use the Zoom menu to set the zoom to 500%. Can you see squares of color? This is called pixelation. What is pixelation? — answer it on CS Awesome: https://runestone.academy/ns/books/published/csawesome2/pictureLabA1toA3.html#picture-day3-6a Through your exploration, you have discovered that the top left corner coordinate for an image is (0,0) and the bottom left is (width, height) for the width and height of an image. In the next lessons, we will modify Java code to manipulate the color values of each pixel in 2D arrays.