Csci 210 Lab: Image Processing

Overview

Your program will consist of one class, the Picture class, and a couple of helper classes and tester programs. The Picture class is responsible creating, modifying and rendering pictures. We'll describe it below.

The BufferedImage class

Class BufferedImage is a Java class that can handle images in many of the standard formats and implements handy functions like loading an image from a file.

BufferedImage image; 
//assume file is the image file
try {
      image = ImageIO.read(file);
     } 
catch (IOException e) {
       System.out.println("Invalid image file: " + filename);
       System.exit(0);
}

• getHeight(): return the height in pixels of the image
• getWidth(): return the width in pixels of the image
• getRGB(i,j): get the Color of pixel (i,j)
• setRGB(i,j,color): set the color of pixel (i,j)

The Picture class

• the filename where it loads the image from
• the image
• a JFrame object where it will display the image

Implement the needed getters and setters on the Picture class: height(), width(), get(i,j), set(i,j,color), etc.

Showing an image

The first thing you'll do with the Picture is to write a show() method that displays the image on the screen. To display the image you first need to create the JFrame object that will hold the image, set its title and whatever other defaults you usually set for a frame, add a menubar and the image to it, and then call repaint() on the frame.

public void show() {

    frame = new JFrame(); 

   //set frame title, set it visible, etc


   //add a menubar on the frame with a single option: saving the image


   //add the image to the frame

   //paint the frame
   frame.repaint();
}

To render the image in the frame we'll do a trick: we'll create a JLabel from the image, and set the JLabel as the ContentPane of the frame. Something like this:

 ImageIcon icon = new ImageIcon(image);
 frame.setContentPane(new JLabel(icon));

Converting an image to grayscale

Picture grayscale()

Picture p1, p2;
p1= new Picture("mypic.jpg");
p1.show(); 
p2 = p1.grayscale();
p2.show();

 public Picture(int w, int h) {
      //filename=null; 
      image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
 }

// convert to grayscale
for (int i = 0; i < width; i++) {
     for (int j = 0; j < height; j++) {
          Color color = pic.get(i, j);
          Color gray = toGray(color);
          pic.set(i, j, gray);
      }
}

To transform an (r,g,b) value to a gray value you need to map the triplet to a value x between 0 and 255. Think of x as a function/combination of r, g and b. You can do your own research about this, but here is one way to do it:

 int r = color.getRed();
 int g = color.getGreen();
 int b = color.getBlue();
 //the monochrome luminance of this color 
 double l = .299*r + .587*g + .114*b;
 Color gray = new Color((int)l, (int)l, (int)l);
 

Scaling an image

Now you want to generalize this to scaling from w-by-h to x-by-y, and you can do both scaling up and down with the same code. Hint: think of the (i,j) pixel in the target image; what pixel does it correspond to in the source image?

Write a method that takes a targer height and width and returns a new Picture that is the scaled version of the original one.

Picture scale(int th, int tw)

Morphing/fading two images

//morph p1 and p2 
static void morph(Picture p1, Picture p2, int k)

//morph this with p
void morph(Picture p, int k)

The picture at the i-th step has each pixel (i,j) colored with a color c as a linear function of the color c1 of pixel (i,j) in p1, and c2, the color of pixel (i,j) in p2: c = f(c1, c2, i). For i=0, c is p1, and for i=k c is p2.

In order to avoid a large number of frames popping up on the screen, I suggest that you keep all intermediate pictures in the same variable, and you render it every time. In other words you do not create k picture objects, but you create only one and you modify it and show it k times.

Rotating an image

//angle a is in degrees
Picture rotate(int a) 

It can be shown using elementary geometry and trigonometry, that a rotation by a around the origin maps point (x,y) to point (x', y') as follows:

x' = x cos a - y sin a
y' = x sin a + y cos a

Again, note that rotate returns a Picture object. You can show it, and test whether your rotates works correctly (your image should look...rotated).

A swirl filter

a = normalized distance of (i,j) to center * 180  

By normalized distance here we mean that we want a number d in [0,1]. The center of the image should have d=0 and correspondingly a=0 ----in other words, the center does not rotate. The point of the image furthest away from the center should have d=1 and correspondingly a=180; in other words these points rotate 180 degrees. Points in between will rotate by an angle between 0 and 180. The effect will be of a "swirl".

Putting everything together: the Interface

• You write all the image functions as methods of class Picture. Have a main() method in Picture that implements a simple interpreter: that is, it runs a loop that asks the user to type commands and executes them until the user wants to quit. It should look something like this:

  enter your command:  show stars.jpg
  enter your command:  scale stars.jpg 100 200
  enter your command:  rotate stars.jpg 90
  enter your command:  morph 50 stars.jpg peguin.jpg
  enter your command:  swirl stars.jpg 45
  enter your command:  quit
  Good bye. 
  

  Each of these commands should show the transformed image in a separate frame.

• You implement each functionality in a separate class. For example, you can implement a separate class called Rotate.java, and let the user run it as:

  java Rotate [path-to-image] [angle] 
  

• You wrap all the image functions in a GUI. Have buttons (or maybe a menu) for "Load", "Rotate", "Scale", etc. When you press the button for Scale, for example, you need to ask the user for an image name, and two dimensions. And so on.

Comments, Suggestions

As usual, email me the folder (include the images that you use), and bring a hard copy to class.