Homework 8
Testing and Images

SI - Next session will give additional discussion of Homework 8.

Overview - The purpose of the homework is threefold:

1. implement automated testing,
2. practice with fixed sized arrays,
3. explore image manipulation.

Images provide visible feedback of success; the MyImage class represents images as a rectangle of colored pixels. The image of the famous person below is a rectangle where the upper-left corner is the (x,y) tuple value (0,0) and the lower-right corner is (160,128). There are 161*129 = 20769 pixels in the rectangle, each with a color resulting from a ratio of Red, Green and Blue (RGB) colors. The top image was shrunk to 1/3 the size of a larger image by copying every 3rd pixel.

(0,0)        (160,128)

The bottom image had the amount of blue for each pixel multiplied by a factor of 4. The amount of red, green or blue is measured by an int from 0-255 where 0 is none and 255 is the maximum. The color white has red, green and blue components of (255,255,255) respectively while black is (0,0,0).

Two partially completed classes will be expanded:

• MyImage - defines and manipulates images,
• Test - to automate testing of MyImage.

Other support classes are:

• ImageViewer
  • loads an image file to a MyImage
  • views a MyImage
  • saves a MyImage to a file. The extension (JPG, PNG, etc.) determines the image format.
• OFImage - defines image primitives,
• ImagePanel - what displays the image.

Getting started

Download and run the HW8.exe file to extract the initial project files.

1. Open the HW8 project. The class view should appear as at right.
2. Test by:
   • create an ImageViewer object,
   • load the file "Rocking.jpg", a MyImage is returned,
   • Get the returned MyImage by clicking Get button as at right:
   • use the ImageViewer method to view the MyImage.
3. Familiarize yourself with some of the MyImage methods:
   • use the flipVertical MyImage method,
   • use the ImageViewer method to view the MyImage.
   • try the same pattern to explore some of the other MyImage methods.
4. Familiarize yourself with Test methods.
   • Create a Test object,
   • use the flipVerticalTest method.

Test class

The Test class automates testing of MyImage methods. Basically, it captures the manual steps we follow when testing. For example, the 4 manual steps:

1. create an ImageViewer object,
2. load the file "Rocking.jpg", a MyImage is returned,
3. Get the returned MyImage by clicking Get button,
4. use the ImageViewer method to view the MyImage.

can be automated by a Test class method:

public void flipVerticalTest() {     ImageViewer iv = new ImageViewer();     MyImage image = iv.loadFile("Rocking.jpg");     image.flipVertical();     iv.view(image); }

In practice, the steps have been divided into the following Test constructor and method:

public Test() {     iv = new ImageViewer();     image = iv.loadFile("Rocking.jpg"); } public void flipVerticalTest() {     image.flipVertical();     iv.view(image); }

This allows the cumulative effects of flipping, darkening, etc. of a MyImage to be viewed rather than creating a new one for each test.

Assignment

1. Add the public void darkerTest() method.
   • Read the MyImage documentation on darker method.

   Test by:

   • Create a Test object,
   • Call darkerTest() several times,
   • Call flipVerticalTest() several times.
      
2. Read the MyImage documentation and add individual testing methods to Test class, named appropriately, to test each of the following MyImage methods:
   1. threshold
   2. removeRed
   3. addBlue
   4. snow
   5. blur
   6. shrink
   7. copyTo
   8. copyFrom

   Test by:

   • Create a Test object
   • Call each test method and view the results.
      
3. Add a Test method that calls all the other Test methods.
   • Call the Test method.
      
4. Modify the collageRowTest method to use the correct width and height for the collage.
   • Call the collageRowTest method; note that the collage is too small for the image panel.

     The method:

     • loads 4 files into the MyImage array myi ,
     • shrinks each MyImage of the array,
     • creates a new MyImage of width 1000 and height 500 to receive the collage,
     • calls collageRow to create the collage.
        
   • A guess was made as to the image width and height needed for the collage, width 1000 and height 500. We can do better.
      
   1. Calculate the total width necessary for the collage by summing the width of each variable of myi array. Allow for any number of MyImage variables, not just 4.

      The width of variable 2 is given by:

      myi[2].getWidth()

      Hints:

      • Use a for statement.
      • Print the width of each myi variable i by: System.out.println( "Width " + i + "=" + myi[ i ].getWidth() );
         
   2. Change the following:

           image = new MyImage(1000, 500);
      to:
          image = new MyImage(totalWidth, 500);

      where totalWidth correspond to your names.
       

   3. Test collageRowTest().
       
5. Add a greatestHeight() method that calculates the greatest height of any variable in an array of MyImage. Allow for any number of MyImage variables, not just 4.
    
   • Hints:
     • Use a for statement.
     • Print the height of each myimages variable i by: System.out.println( "Height " + i + "=" + myimages[ i ].getHeight() );
     • The height of myimages array, variable 2 is given by:

                   myimages[2].getHeight()

   • Use the following method signature:

         public int greatestHeight( MyImage [] myimages )
      

   • Change the following in collageRowTest():

          image = new MyImage(totalWidth, 500);
     to:
         image = new MyImage(totalWidth, greatestHeight( myi ) );

     where totalWidth correspond to your names.
      

   • Test collageRowTest(). The collage should now fit, width and height, within the image panel.
      
6. Add methods to test the MyImage methods added below.

MyImage class

MyImage class represents images as a rectangle of colored pixels (see overview above). A pixel is an object of class Color.

Color

A pixel is colored as a ratio of Red, Green and Blue (RGB) colors. The amount of red, green or blue is measured by an int from 0-255 where 0 is none and 255 is the maximum. Some example colors as (R, G, B) are:

• white (255,255,255)
• black (0,0,0)
• middle gray (127, 127, 127)
• dark blue (0, 0, 255)
• dark red (255, 0, 0)

A constructor and three Color methods are provided to access or mutate individual pixels.

• Color (int red, int green, int blue) - constructor of specified amount of red, green or blue.
• int getRed() - accessor method that returns the amount of red.
• int getGreen() - accessor method that returns the amount of green.
• int getBlue() - accessor method that returns the amount of blue.

To define and construct a Color object named blueDot that is dark blue:

Color blueDot = new Color(0, 0, 255);

To define and construct a Color object named redBlueDot that combines blueDot with a pure middle red:   

Color redBlueDot = new Color( blueDot.getRed() + 127, blueDot.getGreen(), blueDot.getBlue() );

MyImage

A constructor and four MyImage methods are provided.

Constructor:

• MyImage (int width, int height) - constructor of MyImage of width and height.

A new MyImage object myi of width 100 and height 400 is constructed by:

MyImage myi = new MyImage(100, 400);

Dimension methods to access width and height values:

• int getWidth() - returns the MyImage width.
• int getHeight() - returns the MyImage height.

Pixel methods to access or mutate individual pixels of a MyImage:

• Color getPixel(int x, int y) - accessor method that returns the (x,y) pixel; (x,y) must be within the boundary of the rectangle.
• void setPixel(int x, int y, Color pixel) - mutator method to set the pixel value at (x,y);  (x,y) must be within the boundary of the MyImage rectangle.

The (40, 300) pixel of myi can be set to dark blue by:

myi.setPixel(40, 300, new Color(0, 0, 255) );

The (40, 300) pixel of myi can be set to double the amount of blue by:

Color pixel = myi.getPixel(40, 300); myi.setPixel(40, 300, new Color(pixel.getRed(), pixel.getGreen(), pixel.getBlue()*2) );

• Note that the red, green and blue must be 0-255 and 255 is the maximum amount.

Assignment

The existing MyImage methods tested above are intended to serve as examples for creating additional image manipulations.

1. Add a public void removeGreen() method that removes the green component from each pixel of an image.
   • Create an appropriate Test class method.
2. Add a public void flipHorizontal() method that flips the image horizontally.
   • Create an appropriate Test class method.
3. Extra credit. Add MyImage methods of your choice and appropriate Test class methods. Some suggestions are:
   • Convert a color image to grey scale as at right; add the red, green and blue component of the image pixels and divide by 3. Use addBlue() as a guide.
   • Combine two images; average the red, green and blue component of the pixels from each image; use the smallest width and height of the two images. At right combined "title.jpg" with "rocking.jpg".
   • Enlarge image by an integer factor; one approach is to duplicate the original pixel on the enlarged image whatever the number of the factor. For an enlargement factor of 2, the original pixel at (10,20) would be duplicated on the enlarged image at (20,40), (21,40), (21, 41) and (20,41).
   • Subtract one image from another by setting each pixel to the lower red, green, or blue value of the two.
   • Invert (create the negative) image by subtracting the red, green and blue component of the pixels from 255.
   • Colorize a grey scale image by creating grey to color mixture mapping. For example: grey scale color of (150, 150, 150) through (160,160,160) is colorized to (150, 0, 40). 
   • Draw a circle of given radius and center (x,y) position, square, etc. on an image.

Turn in

1. First Page - Contains your name, date and Homework 8. Staple all pages together.
2. Test and MyImage class source listing.
3. Screen shots of:
   • Test class parts c, d 3, e, f.
   • MyImage class parts a-c.