<< Chapter < Page Chapter >> Page >

(Instructions for writing an image explorer sketch were provided in Pr0120-Image Explorer .)

Program output

Image 1 shows the raw image being displayed in an image explorer window. Note the red, green, and blue color component values and the coordinates of the pixel to which those colors belong.

Image 1. the raw image displayed in an image explorer.

The raw image displayed in an image explorer.
Image 1. The raw image displayed in an image explorer.

Image 2 shows the modified image in an image explorer window. Once again, note the red, green, and blue colorcomponent values and the coordinates of the pixel to which those colors belong.

Image 2. the modified image displayed in an image explorer.

The modified image displayed in an image explorer.
Image 2. The modified image displayed in an image explorer.

The algorithm

The algorithm required to transform the image from Image 1 to Image 2 is:

  • Set the blue color value for every pixel to zero.
  • Invert the red and green color values for every pixel.

A color value is inverted by subtracting the color value from 255.

Obvious that the blue color value is reduced to zero

By exploring the pixel colors at several different locations, it should be obvious to the student that the blue pixel value has been set to zero forevery pixel in the modified image.

Color inversion is not quite so obvious

Deducing that the red and green colors in the output pixels are the inverse of the red and green colors in the input image isn't as straightforward.However, color inversion is one of the most common forms of image color manipulation, so a little research on the web should suffice to figure it out. I have also publishedseveral online tutorials that involve color inversion.

The implementation of the algorithm will be explained below.

Discussion and sample code

Will explain in fragments

This sketch consists of two classes, which are provided in Listing 4 and Listing 5 .

I will break the sketch down and explain it in fragments.

The driver class named Pr0130a

The driver class named Pr0130a , which is shown in its entirety in Listing 4 , is almost exactly like the class that I explained in Pr0120-Image Explorer . Therefore, I won't repeat that explanation in this module.

The runner class named Pr0130aRunner

The runner class named Pr0130aRunner is shown in Listing 5 . This class is only slightly different from the class that I explained in Pr0120-Image Explorer . Therefore, I will explain only those portions of the class that are different inthis module.

The first difference

The first difference begins within the for loop shown in Listing 1 . Recall that in the original version in Pr0120-Image Explorer , the code in the for loop copied pixel colors from the input image to the output image taking the different widths of the images intoaccount.

This version is essentially the same except that in this version, the code inverts the red and green color values and sets the blue color value to zerobefore inserting the pixel color into the output image.

Listing 1. copy pixel colors from the input image to the display image.

//Copy pixel colors from the input image to the // display image.for(int cnt = 0;cnt<img.pixels.length;cnt++){ //Get and save RGB color values for current pixel.reD = red(img.pixels[cnt]);greeN = green(img.pixels[cnt]);bluE = blue(img.pixels[cnt]);//color c = color(reD, greeN, bluE);//raw color c = color(255-reD, 255-greeN, 0);//modified
Listing 1. Copy pixel colors from the input image to the display image.

Get Jobilize Job Search Mobile App in your pocket Now!

Get it on Google Play Download on the App Store Now




Source:  OpenStax, The processing programming environment. OpenStax CNX. Feb 26, 2013 Download for free at http://cnx.org/content/col11492/1.5
Google Play and the Google Play logo are trademarks of Google Inc.

Notification Switch

Would you like to follow the 'The processing programming environment' conversation and receive update notifications?

Ask