Color Filters

Step 1: Displaying a Photo

Below are the steps to get a photo onto your canvas:

1. Create a new program (.pde file) and save it somewhere on your computer.
2. Put your chosen photo in the same folder as the .pde file.
3. Determine the width and height of the photo.
4. Declare an image variable of type PImage at the top of your program.
5. In setup(), set the drawing canvas size to be equal to the photo's width and height.
6. In setup(), load the photo into your program and store it into the image variable from part 4 using something similar to loadImage("greatPic.jpg");.
7. In draw(), position the image on the canvas starting in the upper-left corner using the statement image(<baseIm>, 0, 0); where <baseIm> is replaced with your variable name.

At this point, running your program should display the image. Test it out to verify!

Step 2: Linearizing a Picture

Next we need to read the RGB values from the individual pixels. When you call the special built-in function loadPixels() it will automatically create an array called pixels[] and fill it with the canvas' pixel color data. The i^th pixel is referenced as pixels[i], with i starting from 0.

The curious thing about the array of pixels is that it is one-dimensional despite the fact that the picture is two-dimensional. The pixel in the upper-left corner is pixels[0] and pixels[1] is the pixel just to the right of that one. The pixel in the lower-right corner is pixels[width*height-1] (minus 1 because we start at 0).

If mouseX and mouseY contain the current position of the mouse, then its pixel color value is found at pixels[mouseX + mouseY*width].

In the example shown above, mouseX is 7, mouseY is 3, and width is 16. Our formula evaluates to pixels[7 + 3*16], which is pixels[55].

Step 3: Extracting RGB

At the top of the program, declare a variable c of type color and use it to store the color of the pixel under the mouse pointer. You should be using the formula from Step 2 in draw().

The RGB colors of this pixel can be extracted by the functions red(c), green(c), and blue(c). These function calls will return floats, but we need them to be ints, so you should cast them to ints using the function int(). After assigning the pixel pointed at by the mouse to the c variable, write it to the console with a println statement:

println(int(red(c)) + " " + int(green(c)) + " " + int(blue(c)));

Here, the color values are converted to a string and spaces are positioned in-between using the concatenate operation (+). You should now be able to move the mouse around and see the pixel RGB values printed at the bottom of your working window.

Step 4: Filter a Color

Next we want to display only the red pixels when the user presses the 'r' key. Create an if-statement in a keyPressed() function to accomplish this. If the user presses 'r', then refill pixels[] with only the red component of the pixels, as shown below:

pixels[i] = color( red(pixels[i]), 0, 0 );

This line of code should be run on every pixel of your drawing canvas, so place it inside of an appropriate loop.

However, all we've done so far is change the array pixels[] without affecting our drawing canvas! To update the canvas using the new color values in pixels[], you need to call the special function updatePixels(). Add this function call to draw() to make sure that the drawing canvas gets updated every frame.

Try it out to make sure that the red filter works as expected.

Step 5: Restoring the Image

Once the pixels have been modified/filtered, we'd like to restore them when a new key is pressed. To do this, place calls to image() and loadPixels() at the top of keyPressed(). Note: you will want these calls in both setup() and keyPressed().

Try it out to make sure image restoration (press 'r', then another key) works as expected.

Notice that when you press any other key, it returns to the original image. Be prepared to explain why this is the case to a TA.

Step 6: Add Additional Filters

Make additions to keyPressed() to respond to the following additional key presses:

• 'g' displays only the green component of each pixel.
• 'b' displays only the blue component of each pixel.
• 'c' displays the green and blue components of each pixel ('c' for cyan).
• 'm' displays the red and blue components of each pixel ('m' for magenta).
• 'y' displays the red and green components of each pixel ('y' for yellow).