Module 17 : Pixel manipulations

• Topics
• Resources
• In-Class Activities
• Sample Quiz Question

Topics

• Pixel-level manipulations

New processing syntax:

• PImage class, and especially its get() and set() functions
• loadImage() function
• image() function
• createImage() function
• red(), green(), and blue() functions

Resources

• My own notes

• pp. 89-94 of Ch. 7 of the Reas/Fry book

• processing.org tutorial on Images and Pixels

• Daniel Shiffman videos:

  • 15-0: Intro to Images (13 minutes)
    available at learningprocessing.com, YouTube

  • 15-3: Pixels and the Pixel Array (21 minutes)
    available at learningprocessing.com, YouTube

  • 15-4: Intro to Image Processing (16 minutes)
    available at learningprocessing.com, YouTube

  • 15-5: Pixel Neighbor Operations (13 minutes)
    available at learningprocessing.com, YouTube

  and to a lesser extent...

  • 15-1: Animate an Image (7 minutes)
    available at learningprocessing.com, YouTube

  • 15-2: Array of Images (11 minutes)
    available at learningprocessing.com, YouTube

  • 15-6: Painting with Pixels (13 minutes)
    available at learningprocessing.com, YouTube

In-Class Activities

We begin with our own demonstration of a script that loads and image from a file or URL and displays it on a Processing canvas. This particular 408x300 image can be found at http://business.slu.edu/uploads/2012/11/08/slu-homepage-campus4.jpg

If we use our knowledge that this image has size 408x300, we can load and render this image with the following code (downloadable as basicDisplay.pde):

PImage slu;
int w,h;

void setup() {
  size(408,300);  // take advantage of our knowledge of the size

// Can either load an image stored locally, as follows:
//  slu = loadImage("campus4.jpg");
// Or can load an image from a URL as follows:
  slu = loadImage("http://business.slu.edu/uploads/2012/11/08/slu-homepage-campus4.jpg");

  w = slu.width;
  h = slu.height;
  image(slu, 0, 0);
}

Note: It is possible to write a script to size the canvas based upon a loaded image's size, but this requires advanced techniques

Now, try to recreate the appearance of the following imagery.

Grayscale (näive)
For this version, replace each pixel's components with the (unweighted) average of its red, green, and blue values.

Spoiler: my code

Grayscale (luminosity)
A more commonly used formula for grayscaling a color image is based on weighted formula whereby luminosity = 0.21 * R + 0.72 * G + 0.09 * B.
(do your eyes notice any difference between this and the previous näive version? Perhaps look at the shadows and the grass.)

Spoiler: my code

Color-to-Grayscale gradiant
In this version, we use the luminosity formula for grayscale, but then we adjust the original image to create a gradient that transitions between original color on the left and complete grayscale on the right.

Spoiler: my code

Sepia
To get a sepia tone, we use the following formulas relative to the original pixel colors:
red = 0.393*R + 0.769 * G + 0.189 * B
green = 0.349*R + 0.686 * G + 0.168 * B
blue = 0.272*R + 0.534 * G + 0.131 * B
(noting that Processing will cap each of these at a maximum of 255).

Spoiler: my code

Color Inversion
In this example, we invert each component of each pixel.
(For example a red value of 12 is converted to a red value of 243 and vice versa.)

Spoiler: my code

Swapping Color Channels
In this example, we play with color channels, replacing red with green, green with blue, and blue with red.

Spoiler: my code

Left-to-right Flip
In this sketch, we have flipped the image left-to-right. (I hadn't noticed until now how well the pedestrians were doing in walking on the right side of the path).

Although we could accomplish this by carefully editing the original image, we choose to take the easier approach of making the flipped version as a second PImage having the same width and height (using createImage()). This allows us to write to the new image without worry about overwriting information in the original.

Spoiler: my code

Individual Color Panels

In this interactive sketch, the user may use keyboard commands to switch between individual color panels, pressing 'r' for red, 'g' for green, 'b' for blue, and anything else for the original photo.

To avoid losing any information, we keep the original PImage unchanged, and then precompute the other three panels during setup.

Spoiler: my code

Adjusting Saturation
In this interactive sketch, we allow the user to adjust the color saturation level, using the up and down arrows. (Pressing 'r' resets to original.)

The methodology used is to take a linear interpolation between the original version of the image and a grayscaled version of the image, computing t*original + (1-t)*grayscale for each component and a parameter t. When t=1, it is exactly the original, and when t=0 it is exactly the grayscale. For amusement, we allow them to adjust t to be bigger than 1 for over-saturated color, or less than 0 for negative color space.

Spoiler: my code

Sample Quiz Question