Introduction to Digital Images

Intro Computing

Here we'll look at how digital images work, and in particular the code to manipulate them. (Hat tip to Mark Guzdial and Barbara Ericson for promoting the media computation idea of using images, sounds etc. to introduce computers.)

Image Data

You see images on computers all the time. Here we will look behind the curtain, seeing how images are put together. What looks like a whole image to us, in the computer is a structure made of many little numbers.

Thematic Aside: this will echo a common theme in computer science -- what looks like an organic complicated whole, is "atomized" in the computer ... made up of a very large collection of very simple elements.

Here is an image of some yellow flowers:

Zooming in on the upper left flower, we can see that it is actually made of many square "pixels", each showing one color:

• An image is a grid of little square "pixels", e.g. a 600 x 400 image is 600 pixels wide by 400 pixels high, 240,000 pixels in all
• Each pixel is a small square that shows a single color
• The pixels are organized as a grid, identifying each by an (x, y) coordinate
• x=0, y=0 is the upper left -- aka (0, 0) the top left pixel of the whole image
• x=1, y=0 is the pixel 1 to the right -- aka (1, 0)
• x=2, y=0 is the pixel 1 more to the right -- aka (2, 0) -- still in the top row
• The color of each pixel is set by three numbers: red, green and blue (detailed below)

Pixel RGB - Red Green Blue

What is the color of a pixel? The color of each pixel is made by mixing together red, green, and blue lights of various strengths. Each of the red, green and blue light levels is encoded as a number in the range 0..255, with 0 meaning zero light and 255 meaning maximum light. So for example (red=255, green=100, blue=0) is a color where red is maximum, green is medium, and blue is not present at all, resulting in a shade of orange. In this way, specifying the brightness 0..255 for the red, blue, and green color components of the pixel, any color can be formed. See: RGB explore.

The code we'll play with later on will not require an intuition about what blue=137 looks like. However, you will need to understand that any color can be made by combining the three color components.

Here are some example RGB values

• r:0 g:0 b:0 -- pure black (all values 0)
• r:255 g:255 b:255 -- pure white (all values 255)
• r:255 g:0 b:0 -- red (setting one color to 255 and the others to 0)
• r:0 g:255 b:0 -- green
• r:0 g:0 b:255 -- blue
• r:255 g:255 b:0 -- yellow = red + green
• r:255 g:0 b:255 -- violet = red + blue
• r:0 g:255 b:255 -- turquoise = green + blue
• In an image from the real world, the values are rarely exactly 0 or 255. Instead you have colors made from mixing intermediate quantities of the 3 lights.

Red, Green, and Blue Channels

Every pixel in the image is made with a mixture of red, green, and blue light. To see this, you can divide the original image into three color "channel" images, one for each color. Below is the flowers.jpg image followed by its three color channels. The red channel shows only the red light with green and blue stuck at 0, the next shows just the green light, and so on. Adding these three channels together yields the original image. Notice that the yellow flowers are bright in both the red and green channels. The green leaves pretty much only appear in the green channel. The blue channel is mostly near 0 everywhere, as the original image just does not have much blue in it.

Image Code

The image "x.png" is very simple -- it's a very small black square with a white "x" at its center. Here it is:

Our first image code example loads the "x.png" image and manipulates and prints it. Run the code to see what it does, and then we'll look at each line in detail.

image = new SimpleImage("x.png"); image.setPrintScale(6); pixel = image.getPixel(0, 0); print(pixel); pixel.setRed(255); print(pixel); print(image);

Here's an outline of what this code does: the code loads the image "x.png" into a variable named "image". The image.setPrintScale(6); line sets an option for the image to print at 6x size which is useful for these very early examples where the code changes just one or two pixels. The image.getPixel(0, 0); line retrieves the pixel at (0, 0) and stores it in a "pixel" variable. The pixel.setRed(255) line changes the red value of that pixel to 255, overwriting the previous red value for that pixel. The pixel red/green/blue values are printed before and after the change, in the format "r:23 g:120 b:220".

Image Functions Reference

For reference for later exercises, here is a list of all the functions we will use to manipulate images and pixels. You can ignore this for now, but you can come back to it for reference when working on code.

image = new SimpleImage("flowers.jpg");	Set the variable "image" to hold the "flowers.jpg" image
image.setPrintScale(5);	Set the image to print at 5x size on screen. Useful for early to make single-pixel changes visible.
print(image);	Print the image to the screen.
pixel = image.getPixel(0, 0);	Retrieve the pixel at x,y (0, 0) and store it in a "pixel" variable (i.e. the upper left pixel).
print(pixel);	Print the values for one pixel, in the format "r:200 g:12 b:166"
pixel.setRed(255);	Change the pixel's red value to be 255 (we can specify any value 0..255 within the parenthesis). There are analogous functions pixel.setGreen(n) and pixel.setBlue(n) for the other two colors. If the argument value is outside the range 0..255, it is automatically limited to 0 or 255.
red = pixel.getRed();	Retrieve the red value from a pixel (a number in the range 0..255), and store it in a variable "red". There are analogous functions pixel.getGreen() and pixel.getBlue().
image.getWidth(), image.getHeight()	Retrieve the width and height of an image.
image.resize(width, height);	Scale an image up or down in size so it has the given width and height.

Code Examples

image = new SimpleImage("x.png"); image.setPrintScale(6); // Your code here print(image);

To see how image.getPixel(x, y) and pixel.setRed(n) etc. work, try adding and running run code above for each of the problems below (solutions are available).

Example Problems	Solution
Set the top left pixel to be green.	show pixel = image.getPixel(0, 0); pixel.setGreen(255);
Set the top left pixel to be yellow.	show pixel = image.getPixel(0, 0); pixel.setRed(255); pixel.setGreen(255);
Set the top left pixel to be dark yellow -- set the necessary colors to 150 instead of 255.	show pixel = image.getPixel(0, 0); pixel.setRed(150); pixel.setGreen(150);
Set the top left pixel to white. How to set it to black?	show pixel = image.getPixel(0, 0); pixel.setRed(255); pixel.setGreen(255); pixel.setBlue(255); // For black, set all colors to 0.
Q: what is the x,y coordinate of the pixel to the right of the top left pixel? Set the top left pixel to yellow and the pixel to its right to red.	show pixel = image.getPixel(0, 0); pixel.setRed(255); pixel.setGreen(255); pixel = image.getPixel(1, 0); // note different x,y pixel.setRed(255);
Set the top left pixel to blue and the pixel below it to purple.	show pixel = image.getPixel(0, 0); pixel.setBlue(255); pixel = image.getPixel(0, 1); pixel.setRed(255); pixel.setBlue(255);
Set the top left pixel to red and the pixel diagonally down and to the right to green.	show pixel = image.getPixel(0, 0); pixel.setRed(255); pixel = image.getPixel(1, 1); pixel.setGreen(255);

Image Code Exercises

Exercise 1

Write code to set the top left pixel to purple.

image = new SimpleImage("x.png"); image.setPrintScale(6); // your code here print(image);

Exercise 2

Write code to set the top left pixel and the pixel below it to white.

image = new SimpleImage("x.png"); image.setPrintScale(6); // your code here print(image);

Exercise 3

The "stoplight" problem -- write code to set the top left pixel to red, the pixel below it to yellow, and the pixel below that to green.

image = new SimpleImage("x.png"); image.setPrintScale(6); // your code here print(image);

Exercise 4 (optional)

Red diagonal -- write code to set the four pixels starting at the upper left going down and to the right all to red.

image = new SimpleImage("x.png"); image.setPrintScale(6); // your code here print(image);

Exercise 5 (optional)

This exercise uses flowers-small.jpg, a smaller version of the flowers.jpg image. Set the red value of the upper left pixel to 255. The result is kind of a weak red. Why is that? Print the pixel values to explore why. How to fix it to be a strong, pure red? Write code to do that.

image = new SimpleImage("flowers-small.jpg"); image.setPrintScale(6); // your code here print(image);

Turn In

(goal count 5)
This retrieves the saved code (saved by the Run/Save button) and displays it below for copy/paste. Copy the code text, fill in your name (and your parter's) and any README notes for the grader. Paste it into a file named like "homework6.txt" and submit that file. You can also use this feature to get your code back if you mess it up (but have not clicked the Run/Save button).

Restores each code text area above to contain the saved code (you can preview the saved code with the Create Turn-In Text button above).