Week 9 -- Intro to Digital Image Processing

back to syllabus

What is image processing?

From http://www.microsoft.com/windowsxp/experiences/glossary_h-n.asp

Image processing is defined as "the analysis, manipulation, storage, and display of graphical images from sources such as photographs, drawings, and video. Image processing spans a sequence of three steps. The input step (image capture and digitizing) converts the differences in coloring and shading in the picture into binary values that a computer can process. The processing step can include image enhancement and data compression. The output step consists of the display or printing of the processed image. Image processing is used in such applications as television and film, medicine, satellite weather mapping, machine vision, and computer–based pattern recognition."

This week, we'll look at a series of image processing examples implemented in processing. They will be grouped in 3 stages. Let's call them:

Level 1: Pixel Point Processing

Level 2: Pixel Group Processing

Level 3: Creative Visualizations

Processing: The PIXEL array and LOCATION calculation

In processing, we can get at the pixels of the display window, using the array "pixels". Each pixel on the screen has an X,Y coordinate. However, the array "pixels" in a one-dimensional array. In other words, we need to think of every pixel as living in 2 dimensions, but access the information in one. We can do this through the following formula:

1. Assume a window or image with a given WIDTH and HEIGHT.
2. We then know the pixel array has a total number of elements equaling WIDTH * HEIGHT.
3. For any given point in the windows (X,Y), the location in our 1 dimensional pixel array is:

LOCATION = X + Y*WIDTH

Examine the following simple example. This program sets each pixel in a 50x50 window to a random grayscale value. Note the use of a nested loop for each XY coordinate in combination with our location formula from above.

size(50,50);
//nested loop to walk through every x and y coordinate
//like with our 2D array
for (int x = 0; x < width; x++) {
  for (int y = 0; y < height; y++) {
    //pick a random number, 0 to 255
    int rand = int(random(255));
    //create a grayscale color based on random number
    color c = color(rand,rand,rand);
    //do our location calculation
    int loc = x + y*width;
    //set pixel at that location to random color
    pixels[loc] = c;
  }
}

If you examine the above program closely, you may notice that a nested loop and location calculation is not required here. Rather, we could have used a single for loop to walk through every element of the display window's pixel array. However, we use a nested loop with X and Y because as we move towards more advanced image processing functions, this will be required.

Level 1: Pixel Point Operations

We're going to take a step forward from the previous example and instead of setting every pixel to a random color, we're going to pull colors from an image and set colors in our display window accordingly.

To understand the workings of the code below, you'll want to examine the following processing reference pages:

BImage
BImage.pixels
loadImage()
color()
red()
green()
blue()
hue()
saturation()
brightness()

Ok, for our first level one example, we want to: simply load an image, get its pixels, and repaint it in our display window.

BImage a;

void setup()
{
  size(320, 240);
  a = loadImage("sunflower.jpg");
}

void loop()
{
  background(0);

  image(a,0,0);

  for (int x = 0; x < a.width; x++) {
    for (int y = 0; y < a.height; y++ ) {
      //calculate the 1D location from a 2D grid
      int loc = x + y*a.width;
      //get the R,G,B values from image
      float r,g,b;
      r = red   (a.pixels[loc]);
      g = green (a.pixels[loc]);
      b = blue  (a.pixels[loc]);

      //****DO OUR IMAGE PROCESSING STUFF HERE*******/

      //make a new color and set pixel in the window
      color c = color(r,g,b);
      pixels[loc] = c;

    }
  }
}

Again, examining the above code closely, we'll notice that we could have done numerous simplifications in order to merely display the image (for example, we could just use the image() function and skipped all this pixel work. However, now that we have a framework for getting the red, green, and blue values for each pixel, we can now move on and perform simple image processing techniques.

CONTINUE ON TO 2. . .

back to syllabus