Pixmap Assignment

1. Background
2. Classes to Review
3. Completing New Image Manipulation Commands
4. Extra Credit
5. Grading and Submitting

This programming project involves manipulating pixmaps. Your program will be able to read in gif, jpg, and png image formats, and perform several operations on these images including invert, reflect, and expand.

Classes To Review

java.awt.Color

This class represents the Color of a pixel as three values ranging from 0 to 255, one each for the level of red, green, and blue that combined to create the color you see on the computer screen. For the purposes of this program, you need to understand how to construct a Color, but you don't really need to understand the internal workings of the class. For more information about why colors are represented using combinations of red, green, and blue, see this reference online.
 

Pixmap

This class represents an image, i.e., a 2D-grid of pixels. A black-and-white image can be represented as a 2-dimensional grid of 0/1 pixels. Gray-scale images can be represented using multi-valued pixels. For example, numbers from 0 to 255 can represent different shades of gray. Color images are represented by pixels in which each pixel has three color values: a red value, a green value and a blue value. For example, three numbers from 0 to 255 can represent the different shades of the red, green and blue colors.

For black-and-white images, a bitmap is a 2-D grid of 0's and 1's, where a 0 corresponds to white and a 1 corresponds to black. For example, the following is a bitmap which represents a 9x8 black-and-white picture of a `<' sign. The bitmap of 0's and 1's on the left is as an image on the right (enlarged eight times).

0 0 0 0 0 1 1 0 0 0 0 0 1 1 0 0 0 0 0 1 1 0 0 0 0 0 1 1 0 0 0 0 0 1 1 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 1 1 0

For gray-scale images, a bitmap is a 2-D grid of numbers from 0 to 255 representing the shades of gray. The value 255 is white, and the value 0 is black. For example, the gray-scale bitmap below is of size 4x6 and the pixels get a little lighter as the row numbers increase and a lot lighter as the column numbers increase. The last column is much different from the previous columns as the graphic shows.

0 10 30 45 95 200 1 11 32 47 97 215 1 11 32 47 97 235 3 12 34 49 99 255

For color images, a bitmap is a 2-D grid of numbers from 0 to 255, with three numbers representing a pixel. For example, the color bitmap below shows the 3x6 image displayed on the right. Each row has two pixels of red represented by the three numbers 248 0 0 followed by two pixels of green represented by the three numbers 0 252 0, followed by two pixels of yellow represented by the three numbers 248 252 0.

248 0 0 248 0 0 0 252 0 0 252 0 248 252 0 248 252 0 248 0 0 248 0 0 0 252 0 0 252 0 248 252 0 248 252 0 248 0 0 248 0 0 0 252 0 0 252 0 248 252 0 248 252 0

A Pixmap object can be used to access or set the color of an individual pixels and to access or set the total size of the image. Methods that you will use include:

• getSize(): returns the Dimension of the entire image
• getColor(int x, int y): returns the Color of the pixel at (x, y)
• setSize(int width, int height): changes the Dimension of the entire image to the given width and height
• setColor(int x, int y, Color value): sets the color of the pixel in the Pixmap to the specified color

Note, you can change the image displayed on the screen only by calling one of the last two methods described above (the ones that start with set).

Negative

This class is an example of a completed Pixmap Command that determines the negative a Pixmap in a straightforward manner, by subtracting each color in the image from the brightest possible color, white. For example, in a black-and-white bitmap where each bit must be inverted: 0's are changed to 1's and vice versa. The images below are inverted versions of each other.

 0 0 0 0 0 1 1 0        1 1 1 1 1 0 0 1
 0 0 0 0 1 1 0 0        1 1 1 1 0 0 1 1
 0 0 0 1 1 0 0 0        1 1 1 0 0 1 1 1
 0 0 1 1 0 0 0 0        1 1 0 0 1 1 1 1
 0 1 1 0 0 0 0 0        1 0 0 1 1 1 1 1
 0 0 1 1 0 0 0 0        1 1 0 0 1 1 1 1
 0 0 0 1 1 0 0 0        1 1 1 0 0 1 1 1
 0 0 0 0 1 1 0 0        1 1 1 1 0 0 1 1
 0 0 0 0 0 1 1 0        1 1 1 1 1 0 0 1

In a color pixmap, the same principle is used: each value (red, green, and blue) is subtracted from its highest possible level, 255.

Main

You can execute the Pixmap application by running the class Main. The Open button allows you to browse your file system and load images. The other buttons are bound to the various image manipulation commands. Initially, only Reverse Colors is functional. You will complete the code to make the Resize, Mirror Vertically, Mirror Horizontally, Blur and Sharpen commands functional.

Code you will write

1. Add mirror functionality
   1. Complete the execute method of class MirrorVertically.

      An image can be reflected along an axis (usually horizontal, vertical, or diagonal). Reflecting along a vertical axis through the middle of an image is the same as reversing the contents of each row (similarly, reflecting along the horizontal axis is the same as reversing each column). For example, the images below are vertical reflections of each other.

      0 0 0 0 0 1 1 0        0 1 1 0 0 0 0 0
      0 0 0 0 1 1 0 0        0 0 1 1 0 0 0 0
      0 0 0 1 1 0 0 0        0 0 0 1 1 0 0 0
      0 0 1 1 0 0 0 0        0 0 0 0 1 1 0 0
      0 1 1 0 0 0 0 0        0 0 0 0 0 1 1 0
      0 0 1 1 0 0 0 0        0 0 0 0 1 1 0 0
      0 0 0 1 1 0 0 0        0 0 0 1 1 0 0 0
      0 0 0 0 1 1 0 0        0 0 1 1 0 0 0 0
      0 0 0 0 0 1 1 0        0 1 1 0 0 0 0 0
      

   2. Complete the execute method of class MirrorHorizontally.

      The original image above (the < symbol) is unchanged if it is reflected in a horizontal line through the middle of the image since the image has symmetry in this direction. Mirroring the letter Y, however, is diagrammed below: the image on the left, when reflected in a horizontal line though the middle of the image, results in the image on the right. Note that each column of numbers is reversed.

           1 0 0 0 1            0 0 1 0 0
           0 1 0 1 0            0 0 1 0 0
           0 0 1 0 0            0 0 1 0 0
           0 0 1 0 0            0 1 0 1 0
           0 0 1 0 0            1 0 0 0 1
      

2. Add expand functionality

   Complete the execute method in the class Expand.

   The method already prompts the user for the scale factors and correctly grows the pixmap to the new, expanded, size by expanding it horizontally, vertically, or in both directions using the setSize method. Your task is to fill in the now expanded image with a copy of the colors from the original image. To do this, take each single color value and copy it so that it represents a rectangle of color in the expanded image whose width and height is the scale factors given by the user.

   If you are not careful about the order in which copy the colors, you will destroy the original image by changing its colors before you have copied them into the correct new position in the expanded image. Thus, to start, you might want to create a separate pixmap and simply copy the colors into it and then copy them back into the original pixmap.

   However, two points of Extra Credit will be given for solutions done without an extra pixmap. Expanding an image in place, i.e., without using an auxiliary pixmap, requires some planning. In the figure below, an image is shown partially expanded by three vertically, and by two horizontally. By beginning the expansion in the lower right corner as shown, the image can be expanded in place --- that is without the use of an auxiliary array or another Pixmap object. This method will require careful planning in order to expand without using extra storage.

   

3. Complete the Generic Image Processing operation, Filter

   Image processing operations use the current pixel's neighboring pixels to calculate its new color value.

   For example, the diagrams below represent part of a grey scale image: a 3-neighborhood and a 5-neighborhood of the middle pixel whose grey-scale value is 28.

   

   Given the standard corresponding box blur filters of size 3x3 and 5x5 below:

   1 1 1          1 1 1 1 1
   1 1 1          1 1 1 1 1
   1 1 1          1 1 1 1 1
                  1 1 1 1 1
                  1 1 1 1 1
   

   The value of the first is 9 and the value of the second is 25. So the result of applying each filter to its corresponding set of grey scale pixels is

                                               (10 * 1 + 12 * 1 + 12 * 1 + 10
   * 1 + 10 * 1 +            
   (10 * 1 + 12 * 1 + 28 * 1 +                  10 * 1 + 10 * 1 + 12 * 1 + 32
   * 1 + 32 * 1 +            
    10 * 1 + 28 * 1 + 25 * 1 +                  25 * 1 + 10 * 1 + 28 * 1 + 18
   * 1 + 18 * 1 +            
    25 * 1 + 32 * 1 + 32 * 1) / 9 = 22.44       25 * 1 + 25 * 1 + 32 * 1 + 32
   * 1 + 18 * 1 +            
                                                32 * 1 + 32 * 1 + 32 * 1 + 25
   * 1 + 25 * 1) / 25 = 21.09
   

   Implement the class Filter that tranforms an image by applying a convolution filter from a selected file to each pixel of a pixmap.

Make sure your README.txt file notes any extra credit you attempt.

Grading and Submit

This assignment is worth 34 points.

Submit your project as pixmap, using the Ambient menu within Eclipse. Always be sure to submit all java files, even if you did not modify them. You must also submit a README.txt too. See the assignment page for details on the README.