Pixmap Assignment

1. Background
2. Assignment Overview
3. Classes to Review
4. Completing New Image Manipulation Commands
5. Extra Credit
6. 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.

Overview

You will complete the following Pixmap classes (described below)

• Expand.java
• MirrorVertically.java
• MirrorHorizontally.java
• Filter.java

• Main.java - class that simply holds the main method
• Pixmap.java - class that represents a generic image (described in more detail below)
• Command.java - superclass for Pixmap Command classes you will complete
• Negative.java - example Pixmap Command subclass for you to study
• SizeInputDialog.java - GUI class that gets input from the user about how much to resize the image by
• PixmapCanvas.java - GUI class that displays the image your commands will affect
• ButtonPanel.java - GUI class that holds the buttons that activate the commands you complete
• Reader.java - brings up file chooser for reading images
• Writer.java - brings up filechooser for writing images
• images directory: includes images of dinosaurs and professors

Possible Plan

1. Complete MirrorVertically and Mirror Horizontally
2. Complete Expand
3. Complete Filter

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
   

   After computing the weighted sum of the neighborhood pixels according to the filter, you should divide by the sum of the filter values, unless the values in the filter sum to zero as in vdiff or vdiff_sobel. If the sum of the filter values is zero, you do not need to divide the weighted sum at all.

   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.

Extra Credit: Expand in Place

Extra Credit: Code Design

• (2 points) Create a superclass, such that MirrorHorizontally and MirrorVertically are subclasses and that they contain no duplicated code in common. Instead everything in common has been factored out into the superclass you create.

Extra Credit: New Filters

Extra Credit: Art

This assignment is worth 28 points.

Submit your project as assign6, using the Ambient menu within Eclipse. Always be sure to submit all java files, even if you did not modify them. You must submit a README.txt as well. See the assignment page for details on the README. In addition, your README should describe any extra credit work that you attempted.