ITEC 120 2010fall ibarland

home—info—lects—labs—exams—hws
tutor/PIs—breeze (snow day)
Object120 + its docs—java.lang docs—java.util docs

lab14b
2-D arrays
processing pictures II

We will continue working on lab14a.

Review

Review, on processing a 2-D array: a helper method, vs. a nested loop:

• Approach 1: To fill the array, fill each row. To fill a row, fill the pixel in column 0 through column rowlength-1.

  static void fillArrayRandomly( int[][] someArray ) { for (int rowNum=0; rowNum<someArray.length; ++rowNum) { fillRowRandomly( someArray, rowNum ); } } static void fillRowRandomly( int[][] someArray, int rowNum ) { for (int colNum=0; colNum<someArray[rowNum].length; ++colNum) { someArray[rowNum][colNum] = rng.nextInt(256); } } // A static field: only one random-number-generator is needed // for all the numbers we'll ever want. static java.util.Random rng = new java.util.Random();

• Approach 2: we can in-line the code for fillRowRandomly into fillArrayRandomly:

  static void fillArrayRandomly( int[][] someArray ) { for (int rowNum=0; rowNum<someArray.length; ++rowNum) { for (int colNum=0; colNum<someArray[rowNum].length; ++colNum) { someArray[rowNum][colNum] = rng.nextInt(256); } } } // A static field: only one random-number-generator is needed // for all the numbers we'll ever want. static java.util.Random rng = new java.util.Random();

representing Colors

A java.awt.Color has three components: red (from 0 to 255), green, and blue (customarily in that order). So new Color(0, 255, 0) represents bright green: it has the maximum possible green-ness, but zero red-ness and zero blue-ness. White light is the mixture of all of these three primary colors: new Color(255, 255, 255). What represents black? What colors can we mix, to get purple? Gray?

We can use Pict.getPixelsColor to take in a filename or URL, and be given a 2-D array of java.awt.Colors, to work with. Likewise, Pict.displayPixels will take such a 2-D array and display it on the screen as an image. And as before, we might modify that 2-D array ourselves.

  /** Change one pixel of an image, keeping all the red 
   *  (but throwing away the blue and green components).
   * @param img The image (2-D array of Colors) to modify.
   * @param r the row-number of the pixel to modify.
   *   pre-condition: 0 <= r < img.length
   * @param c the row-number of the pixel to modify.
   *   pre-condition: 0 <= c < img[r].length
   */ 
  void filterRed( Color[][] img, int r, int c ) {
    Color origPxl = img[r][c];
    int origRed   = origPxl.getRed();

    Color udpatedPxl = new Color( origRed, 0, 0 );
    img[r][c] = updatedPxl;
  }

Color effects

1. Make method filterPurple which keeps the red and blue components of an entire image, but sets the green component of each pixel to zero.
2. Task: Make method invertColor, similar to invert, which complements each component: a color of red=0,green=10,blue=254 would be replaced with a color of red=255,green=245,blue=1.
   Submit this on WebCT (by Friday 17:00). It will count as 5pts of homework extra-credit. (Your code can also include other functions, of course.) You need only submit your code that uses Pict; you don't need to submit Pict.java itself since I already have that file (and you didn't change it!).
3. Make method toBlackAndWhite, which replaces each pixel with the average of the three components. That is, a color of red=0,green=10,blue=80 would be replaced with a color of red=30,green=30,blue=30.
4. We can also combine two pictures in various ways:
   Superimpose one small picture on top of another.
   Or, take the average of two pictures, to create a third.
   Best: for any double p in 0..1, blend two pictures by adding p times each pixel from the first picture, plus (1-p) times each pixel for the second picture. (If you were make a movie where p varied from 0 to 1, you'd have a continuous fade from one picture to another.)
5. Greenscreen -- Take a picture of yoruself against a solid green background¹ Now, copy all non-green pixels in that picture onto a picture of (say) the moon. Voila, we now have a pciture of you on the moon!
6. Take any two other effects you've written, and make a method which applies both of them. (Does the order matter? That is, if you filterRed and then convert to black and white, is that the same as converting to black and white and then filtering out the red?)
7. Write a method filterRight which is like FilterRed except that it only filters the right half (or, the bottom half) of the image.

More Ideas

If you want more ideas of photoshop effects, there are plenty more ideas. Try any of these, if they grab your fancy:

• Write a method fadeLeftToRight which leaves the left column untouched, the middle column mulitplied by 1/2 (that is, faded halfway to 0), and the rightmost column multiplied by 0 (entirely black), in a continuous fashion.

• Make method jailbar, similar to filterRed, which puts black vertical stripes over the image.

  Hint:

  • First try a version which makes (say) exactly 20 jailbars, each exactly 5 pixels wide. ('Course, this is impossible to do on images less than 100 pixels wide in total!)

    Helper functions are your friends: This sounds like calling “drawOneBar” twenty times, which might in turn call “drawPartOfBar” five times. What might the inputs to these helper functions need to be?

  • Now, make a version which where the number of jailbars actually depends on the image's width, though they are still exactly 5 pixels wide.

• Write blocky, which replaces each 3×3 group of pixels with a single color (the average of the original nine).
  For a further challenge, generalize this to making n×n blocks, where n is a parameter.
• Make method blur, which replaces each pixel with the average of the pixels adjacent to it.
  (Why is this more difficult than the previous version?)

• Make method edgy, which replaces each pixel with the difference between it and the pixel to its left. (the leftmost column is unchanged). That way, edges (which have a big difference from nearby pixels) will be bright, while large areas of the similar brightness (like a bright sky) will be dark.

  For better edge detection, replace each pixel with the maximum difference between it and the pixel to its left, above it, or above-left. (Credit to jmdymacek for the exact scheme.)

Further notions

• Write a method which adds colorful diagonal slashes at random.
• (This can be difficult. Don't attempt this until you have written edgy.)
• Red-eye reduction (more difficult).
  First, by hand, find some pictures that have red-eye in them, and try to detect what RGB values the eyes have. Then write a filter to try to detect and ameliorate such colors in actual photographs.
  (A professional application might even try to detect circles in the input image, but that's a lot tougher.)
• Write a method which applies one of your effects just to a circle in the middle of the picture (with, say, a radius of 20 pixels).
  Hint: As before, still call the pixel-changing method on every single location, but have that method only do its work if it is within 20 pixels of the image's center.
• See if you can find on the web, how to make an effect replicating sepia (old-timey) photographs, and implement that.
• Surprise me!

For each of the above effects, it's interesting to wonder:

• Does applying the effect twice differ from applying it once? (“idempotence”)
• Are there two different input pictures which might end up looking identical after the effect? (“invertable”)
• If we keep applying the effect over and over and over, will we converge on a certain solution? (“a fixpoint”) Are there different images which might converge to the same solution? (“basins of attraction”)
• If we apply two effects in a row, does it matter which order we do that in? (“commutativity”)

home—info—lects—labs—exams—hws
tutor/PIs—breeze (snow day)
Object120 + its docs—java.lang docs—java.util docs

©2010, Ian Barland, Radford University Last modified 2010.Dec.09 (Thu)

Please mail any suggestions (incl. typos, broken links) to iba�rlandrad�ford.edu