CompSci 6 Spring 2010: Assignment 7

Due: Thursday, March 25 - 11:59pm

30 points

Pixmap Assignment

Background
Assignment Overview
Classes to Review
Completing New Image Manipulation Commands
Extra Credit
Grading and Submitting

Background

Images are stored by computers in a variety of formats, such as gif, jpg, tiff, and png. These formats differ in how faithfully they represent the original picture, how well they can be compressed to reduce the space each image takes up, or how well they can be copied from on type of computer to another. However, no matter what format the image is stored in, it can always be represented of as a mapping of (x, y) pixel position to a color (the range of colors may be restricted to values of grey or just black and white). Thus, for the remainder of this project, we will refer to all formats of digital images as pixmaps.

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

Snarf assignments/assign7_pixmap_cps006_spring10 or browse the code directory.

You will complete the following Pixmap classes (described below)

Classes already completed for you:

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

Complete MirrorVertically and Mirror Horizontally
Complete Expand
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

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
```
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.
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.

Extra Credit

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

Extra Credit: Expand in Place

(2 points) See assignment handout

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

(1-4 points) Add a new filter to the Student class.

Extra Credit: Art

(1-2 points) Create an interesting image to submit using various filters. It should be called image.gif or some other appropriate . extension. NOTE: If the image is very large, you might not be able to submit it (the submit command will tell you it is too large). If this is the case, then submit everything except the image, put the image in your public_html directory, and then include a message in your README file where the file is and we can look at it.

Grading and Submit

This assignment is worth 30 points.

criteria	points	goals
Mirror methods	8	works correctly and is well written
Expand method	8	works correctly and is well written
Filter method	10	works correctly and is well written
README	4	completeness

Submit your project as assign7pixmap, 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 as well. In addition, your README should describe any extra credit work that you attempted.