Overview (by Richard Wicentowski and Tia Newhall, Swarthmore College)

For this project, you will implement a program that manipulates jpeg images. A jpeg image is encoded as a 2 dimensional grid of pixel values. Each pixel has a Red, Green, and Blue component, each of which can have a value ranging from 0 to 255. For example, the color white is represented by the value 255 for R, G, and B components of the pixel, and the color black by 0 for all three. All other permutations correspond to color and grey values (when a pixel has the same value for all of its R, B, and G components, it is a greyscale color).

You can think of the image as being stored as a 2-dimensional grid of Pixel objects. However, unlike 2-D array accesses using row and column indices, pixels are accessed using their (x,y) coordinate value in the grid, where (0,0) is the pixel in the upper left corner, and the x and y values are increasing to the right and down:

                     3     x-axis 
   (0,0)  *----------|------------------------>
          |           
          |
y-axis    |          _
        2 -  	    | | Pixel (3, 2)
          |          -
          |
          |
          |
          \/

For example, to set the pixel in the upper left corner to WHITE I'd do the following:

	Pixel pix = picture.getPixel(0,0);
	pix.setRed(255);
	pix.setBlue(255);
	pix.setGreen(255);
	pix.setPixel(0,0,pix);

Features should be cumulative, so that if the user first clicks on the rotate 90 degrees button twice, you first rotate it 90 degrees and then rotate the rotated image 90 more degrees (it is now upside down). The Revert button, which is already implemented for you, restores the image to its initial form. Some features can be done in place on the image, and others require that you make a temporary copy of the image from which you can get the "before the modification" pixel values.

You will add code only in the Image.java file, and you should use the examples to guide your adding new features. You will implement each image manipulation feature as the actionPerformed method of a feature-specific ActionListener class. For each image manipulation feature you need to add two things to the code:

1. Add a new SimpleButton object to the buttons array in the createButtons method. With this button you will associate a call-back object whose actionPerformed method will be invoked when the button is "pushed". Here is how I would add a button for the Vertical Scroll feature:

    buttons[counter++] = new SimpleButton("Vertical Scroll", new VScroll());
   

2. Add a new clss that implements ActionListener and has an actionPerformed method that contains your code to implement the image manipulation. For example, here is how the VScroll class and its actionPerformed method would be defined (minus the implementation of modifying the image):

   class VScroll implements ActionListener {
       public void actionPerformed (ActionEvent e) {
            // here is where you add code to implement
   	 // scrolling the image vertically
       } 
   }
   

I strongly suggest that you implement one feature, then compile and test it, then implement the next feature, compile and test it, and so on. Start with easier features like Negative, Lighten, and Darken before trying some of the more difficult features, like zoom, sort, tile and rotate 90 degrees. Also, for some features it may be easier to see if they are correctly implemented if you try them out on a greyscale image.

Required Features

You will be implementing some of the following features (see below for examples of most of these features):

1. Make Negative
2. Convert to Greyscale
3. Flip Horizontally
4. Flip Vertically
5. Flip Corners (swap upper left with lower right)
6. Lighten the image by some amount
7. Darken the image by some amount
8. Polarize
9. Scroll Vertically
10. Scroll Horizontally
11. Zoom UpperLeft
12. Zoom LowerLeft
13. Zoom UpperRight
14. Zoom LowerRight
15. Zoom Center
16. Blur the image
17. Sort Each Row by Pixel values (by the average of each Pixel's R,G, and B component)
18. Rotate the image by 90 degrees
19. A Tiling Effect

Discussion of some features

• Scrolling: Pick some number of pixels in the x or y direction to scroll by (something in the 30-80 range). When you scroll the image, pixels that scroll off one edge of the picture should wrap around to the other (see the scrolled image in the Examples section below).

• Convert to Greyscale: Greyscale Pixels have the same value for their R, B, and G components. Compute each Pixel's new greyscale value from the average of its current R, B, and G values.

• Polarize: this effects sets each pixel component value to either 255 or 0. You should polarize values based on the average pixel value; first find the three average pixel values in the image (one for R, one for B, and one for G components), then then set each Pixel's R, B, G value to either 0 or 255 based on it relation to the average values.

• Zooming: the modified (zoomed image) should be the same size as the original image; in a zoomed image the specified portion of the original image now fills the entire image window.

• Sort Rows by Pixel Value: You should sort each row of Pixels. The Pixels in each row should be sorted by the average of their R, B, and G values. To test your solution for correctness, first choose the greyscale feature, and then sort the resulting greyscale image; it will be easier to see that pixels are sorted correctly on the greyscale image since greyscale pixels have the same value for R,B,G components, and each row, if sorted correctly, will go from black to white values. Note: sorting can be slow, so you should only try it on smaller images.

• Blur: To blur an image, you assign each Pixel value the average of all its Pixel neighbors (i.e. its red component gets the average of all red components of Pixels around it, ...). To do this properly, you will need to make a copy of the image. Use the following algorithm for bluring each pixel:

   
  If the copy of your image had a section of Pixels whose Red components
  look like this:
   
   +-----------------+
   | 116 | 119 | 65  |
   +-----------------+
   | 85  | 14  | 31  |   
   +-----------------+
   | 177 |  5  | 55  |
   +-----------------+
   
  In your blurred image, the new value of the Red component for the
  center Pixel would be the average of all of the pixels in the 3x3 square:
   
   +-----------------+
   |     |     |     |
   +-----------------+
   |     | 74  |     | 
   +-----------------+
   |     |     |     |
   +-----------------+
  

  Be careful at the edges of the image: not all pixels have 8 neighboring pixels!

• Tile: The image should be broken up into a grid of 4 sub-images. Each of the 4 sub-images will be a scaled down version of the entire image that is either (1) image, (2) flipped horizontally, (3) flipped vertically or (4) flipped both. The resulting image should be tiled such that:

  	(1) (2)
  	(3) (4)
  

  If you get this, then try a tiled image which is a grid of 16 sub-images in this form (the 16 sub-image tiled effect is not a required part of the assignment):

  	(1) (2) (1) (2)
  	(3) (4) (3) (4)
  	(1) (2) (1) (2)
  	(3) (4) (3) (4)
  
  

  For this you should come up with a general pattern to determine which of (1) - (4) to draw based on the current block of the image you are drawing (don't hard-code in all 16 sub-images as separate sections of code).

Examples of most of the features

Original Image: (source: http://commons.wikimedia.org/wiki/File:Orange_tabby_cat_sitting_on_fallen_leaves-Hisashi-01A.jpg)
Darken:	Lighten:
Negative:	No red:
Flip Vertically:	Scroll Horizontally:
Greyscale:	Blur: