Assignment

Make a subdirectory whose name is the first 4 letters of your last name. Where I have kele, you should have the first 4 letters of your last name. Start by copying my starting point code into your subdirectory:

	% mkdir kele
	% cd kele/
	% cp /home/cfk/pub/cs35/week12/image/* .
	% cp -r /home/cfk/pub/cs35/week12/cfkclassphotos/ .
	% ls

For this assignment, you will implement a program that manipulates jpeg and/or gif images. An 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. For each feature you need to (1) add additional buttons (following the examples given) in the createButtons method, and (2) implement ActionListener classes associated with each button. Objects of classes that implement ActionListener are associated with Buttons. When a button is "pushed", the object's actionPerformed method invoked. You will implement each image manipulation feature as the actionPerformed method of a feature-specific ActionListener class.

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.

jpeg Image Files

	xv image.gif

Class Documentation

Required Features

You must implement 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. Zoom UpperLeft
10. Zoom LowerLeft
11. Zoom UpperRight
12. Zoom LowerRight
13. Zoom Center
14. Blur the image
15. Extract Message
16. Rotate the image by 90 degrees
17. 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.

• Extract Message: Invite the user to give you an (x,y) pixel postion of the start of the message. Assume that there really is a message hidden in the picture starting at (x,y) and extract and print it. (I'll talk more about this on Monday.) The low-order bits of the 3 pixels starting at (x,y) contain a 9-bit integer specifying the length of the message. The low-order bits in the subsequent 3*length pixels hold the characters of the message. For example if the low-order bits of 3-pixels are red=0 green=0 blue=1 red=0 green=1 blue=1 red=0 green=0 blue=1, that give bit sequence 001011001 which is (ignore first bit) hex 59 which is the ASCII code for upper-case Y. The directory /home/cfk/pub/cs35/week13 contains a slightly updated Image.java program that can read ppm image files. The file cfkdaughtersmesg.ppm has 3 messages in it beginning at (0,10), (45,233), and (237,65). See if you can extract them.

• 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

Example Menu of Buttons:	Original Image:
Darken:	Lighten:
Negative:	Polarize:
Flip Vertically:	Scroll Horizontally:
Zoom (upper left):	Switch the top left and bottom right corners:
Greyscale:	Sort Each Row (I converted to greyscale before sorting):
Blur:	Tile (the 4 sub-image version):
Rotate 90 Degrees:	The 16 sub-image Tile Version (not required):
EXTRA CREDIT FEATURES:	EXTRA CREDIT FEATURES:
8 squares puzzle: (randomly reassigns 9 squares of image to 8 slots)	Infinite Split: (make the image square before splitting)
EdgeDetect:	Histogram of R, G, and B pixel values: