CPSC-115 Fall 2008
Project 5 - 100 points
Part 1 ZoomUpperLeft and Rotate 90 functionality (20 points) Due: 11:00 a.m. Tuesday 11/18.
Part 2 Full functionality (80 points) Due: 11:00 a.m. Tuesday 11/25
Professor Heidi Ellis
Goal
In this project, you will gain experience in maintaining existing code as well as manipulating 2-dimensional arrays. The application area is image processing. (Thanks to Richard Wicentowski and Tia Newhall at Swarthmore College who developed the original framework and corresponding assignment.)
This project will be completed using the following pairs:
| Teammate 1 | Teammate 2 |
|
Teammate 1 | Teammate 2 |
| Kristen Anderson | John Wilsterman |
|
Jake Elder | Jin Feng Liu |
| Jeffrey Young | Jesse Vazquez |
|
Catherine Doyle | Corazon Irizarry |
| Nick Dragu | Ryan Ersland |
|
Chelsea Bainbridge-Donner | Greg Vaughan |
Deliverables:
You must provide the following:
- 11:00 a.m. Tuesday 11/18 (20 points) email a copy of your ImageBase class that has correctly working code for the following functionalities:
- Zoom Upper Left
- Rotate 90
- 11:00 a.m. Tuesday 11/25 email a copy of your ImageBase class that has correctly working code for all eight functionalities described below.
Overview
The storage of photographs and other images in electronic form provides us with the ability to manipulate such images in a variety of different ways. Images are displayed on computer screens using rows and columns of pixels. A single pixel is displayed on screen as a combination of three basic colors: red, green and blue. The intensity of the color of each of the three basic colors is given in an integer value between zero and 255. The lower the color value, the greater the intensity. So a red, green, blue triplet (0,0,0) represents the color black.
In this project, you will be provided with a base application that displays an image and provides a variety of ways to manipulate the image. You will extend the functionality of the application by adding new ways to manipulate the image. The application begins by prompting the user for the name of a JPEG file that contains an image. Once the user has provided a correct file name, the application then produces a menu of buttons. These buttons identify the operations that can be performed on the image. The menu below shows the functionality provided by the existing application:
In addition to the menu, the application also displays the image contained in the JPEG file in a frame:
The functionality of the buttons shown above is described below:
- Flip Horizontal: Flips the image in the horizonal direction (around the x axis). This involves swapping pixels in opposing columns.
- Flip Vertical: Flips the image in the vertical direction (around the y axis). This involves swapping pixels in opposing rows.
- Gray Scale: Turns the color image to shades of gray. This is done by replacing the value of the red, green, and blue values for a pixel with the average of the red, green, and blue values that were originally contained in the pixel.
- Negative: Converts the image into a negative. A negative
is a gray scale image that has the intensity of the pixel reversed. This is done by making the red, green, and blue values to be the inverse of their original values. So if the original value of red is 50, the inverse would be 205. (black areas show as white and white areas show as black).
- Lighten: Lightens the image (by 40 units). This is done by adding 40 to the red, green, and blue values for each pixel.
- Darken: Darkens the image (by 40 units). This is done by subtracting 40 from the red, green, and blue values for each pixel.
- Horizontal Scroll: Moves the picture to the right by 30 pixels. The picture wraps around so that the 30 pixels that "fall off the end" of the image are added to the left side of the image. This is accomplished by moving all of the pixels in the image to the right 30 units. Because moving a pixel in an existing image would overwrite existing pixels that had yet to be moved, the pixels are actually copied to a new image and then the image is set to be the new picture.
- Vertical Scroll: Moves the picture down by 30 pixesl. The picture wraps around so that the 30 pixels that "fall off the bottom" of the image are added at the top of the image. The is accomplished by moving all of the pixels in the image down 30 units. Because moving a pixel in an existing image would overwrite existing pixels that had yet to be moved, the pixels are actually copied to a new image and then the image is set to be the new picture.
- Restore: Restores the image to its original form.
- Quit: Quits the application.
Implementation Details
For this lab you will be manipulating JPEG images. Images are stored as a 2-dimensional array of pixels. The numbering of the pixels starts in the upper left corner of the image. The table below shows the location of pixels in an image of size four pixels by four pixels. (The top line in bold shows the values of the X and Y coordinates.)
| X,Y |
X,Y |
X,Y |
X,Y |
| 0,0 |
1,0 |
2,0 |
3,0 |
| 0,1 |
1,1 |
2,1 |
3,1 |
| 0,2 |
1,2 |
2,2 |
3,3 |
| 0,3 |
1,3 |
2,3 |
3,3 |
Pixel color is designated by only three colors: red, green, blue. You may have heard or read about "RGB values". Each color (red, green, blue) is represented by an integer between 0 and 255. This integer indicates the intensity of the color where smaller values indicate deeper color.
The application consists of the classes listed below. You can download the files below into a directory and compile and execute the code using DrJava. Note that I have added comments to the file (prefaced by "HE:") to explain various features of the class. The only class that you need to add code to is the ImageBase class. You should not modify the other classes in any manner.
- Picture.java : The Picture class represents an image in JPEG format that can be displayed. Pictures are represented as a 2 X 2 array of pixels. Numbering starts in the upper left corner with (0,0). Pictures are comprised of Pixel instances. The Picture class provides methods to set and retrieve pixels at a location designated by an X and Y coordinate.
- PictureFrame.java : The PictureFrame class inherits from a more general JFrame class provided in the Java library. The PictureFrame class is customized to provide a frame for images.
- Pixel.java : The Pixel class represents a pixel of an image that is to be displayed. Each Pixel instance represents either a single value (for grayscale images) or three values for the red, green, and blue color intensity of the pixel. The higher value the lighter the color. Methods are provided on the Pixel class to set and retrieve the red, green, and blue values.
- SimpleButton.java : The SimpleButton class is a simplified representation of a button that is inserted into the GUI. It inherits methods and data from its parent class the JButton. JButton is a Java library class and provides core functionaliy such as detecting when the button has been clicked.
- ImageBase.java : The ImageBase class provides the framework for displaying the image as well as the menu of buttons that are presented to the user. The ImageBase class is different from the other classes that we have looked at because it contains other classes. There is one nested class for each functionality provided on the menu of buttons. Each nested class is associated with a button in the graphical user interface (GUI). Each class contains an actionPerformed method that contains the code that is executed when the button is clicked. You will need to add buttons and nested classes to the ImageBase class and this is the only class that you need to modify.
For ease of testing, I have provided two files:
boat.jpg:
mountains.jpg:
Additional Functionality
For this project, you must implement the menu shown below including the nested classes within the ImageBase class:
You will need to provide menu buttons for the eight additional buttons that are not contained in the original menu. The functionality for each of these buttons is described below:
- Four Tile: Condense the image to 1/4 its original size and tile the image in the four quarters of the original image. The resulting image should look like:
- Zoom Upper Left: Magnifiy the upper left quarter of the image so that it takes up the entire picture space. The resulting image should look like:
- Zoom Upper Right: Magnifiy the upper Right quarter of the image so that it takes up the entire picture space. The resulting image should look like:
- Zoom Lower Left: Magnifiy the lower left quarter of the image so that it takes up the entire picture space. The resulting image should look like:
- Zoom Lower Right: Magnifiy the lower right quarter of the image so that it takes up the entire picture space. The resulting image should look like:
- Zoom Center: Take the portion that comprises 1/4 of the image from the middle of the image and make it take up the entire screen. The resulting image should look like:
- Rotate 90: Rotate the entire image by 90 degrees. The resulting image should look like:
- Blur: Blur the image. This is done by setting each pixel to have the red, green and blue values of the average of the pixel and all of its surrounding neighbors. The resulting image should look like:
You must abide by the following:
- Your application must perform according to the description above.
- You must use good programming style and follow Java convention as discussed in class.
Grading:
Project 5 will be graded on:
- Completeness of code.
- Correctness of code.
- Correct programming style and use of convention.
- Understandability and readability including comments and internal documentation.