A Pixel Editor Program in Java: Multimedia Programming with Java

12:41 AM iToonTV Animation 0

General

This lesson is the next in a series (see Resources) designed to teach you how to write Java programs to do things like:

  • Remove redeye from a photographic image.
  • Distort the human voice.
  • Display one image inside another image.
  • Do edge detection, blurring, and other filtering operations on images.
  • Insert animated cartoon characters into videos of live humans.

If you have ever wondered how to do these things, you've come to the right place.

What you have learned from earlier lessons

If you have studied the earlier lessons in this series, you have learned:

  • How to download, install, and test a Java multimedia library from Georgia Institute of Technology.
  • How to download, install, and test a lightweight Java IDE named DrJava, which has the ability to interactively evaluate Java code.
  • About the behavior of the Turtle class and its superclass named SimpleTurtle.
  • How the World class and the Turtle class implement a practical version of the Model-View-Control programming paradigm.
  • The differences between placing a turtle in a world and placing a turtle in a picture.
  • About the Pen and PathSegment classes which are critical to maintaining a complete history of the turtle's movements.

Viewing tip

I recommend that you open another copy of this document in a separate browser window and use the following links to easily find and view the figures and listings while you are reading about them.

Figures

  • Figure 1. Input and output from the program named PixelEditor01.
  • Figure 2. The program GUI at startup.
  • Figure 3. A PictureExplorer object and the Program GUI.
  • Figure 4. Zoomed view of sequins before modification.
  • Figure 5. Zoomed view of sequins after modification.
  • Figure 6. Skater's left ear without the diamond stud.
  • Figure 7. Skater's left ear after insertion of the diamond stud.
  • Figure 8. Illustration of the Get Color button behavior.
  • Figure 9. Result of entering values into the New Pixel Color fields.
  • Figure 10. Result of brightening eyeball highlights.
  • Figure 11. A standard Java color-chooser dialog.

Listings

  • Listing 1. Source code for the program named PixelEditor01.
  • Listing 2. Source code for the PictureExplorer class.

Supplementary material

I recommend that you also study the other lessons in my extensive collection of online programming tutorials. You will find a consolidated index at www.DickBaldwin.com.

General background information

A multimedia class library

In this series of lessons, I will present and explain many of the classes in a multimedia class library that was developed and released under a Creative Commons Attribution 3.0 United States License (see Resources) by Mark Guzdial and Barbara Ericson at Georgia Institute of Technology. In doing this, I will also present some interesting sample programs that use the library.

Software installation and testing

I explained how to download, install, and test the multimedia class library in an earlier lesson titled Multimedia Programming with Java, Getting Started (see Resources).

Preview

Normally, I provide and explain the code in relatively simple programs in order to teach you about specific programming concepts. However, I am going to depart from my normal approach in this lesson. In this lesson, I will present a relatively complex program designed to edit individual pixels in an image. I will explain how to use the program for that purpose, but I won't explain the code. You will have to wait for future lessons to learn about the programming concepts behind the program code.

A single-pixel editor program

Sometimes it is useful to be able to edit the colors in an image on a pixel-by-pixel basis. Figure 1 shows the result of such an editing process, but you may have to look closely to identify the pixels that were edited.

Figure 1. Input and output from the program named PixelEditor01.

A red sequin and a diamond ear stud

If you look closely at the top image in Figure 1, you will see that the upper portion of the skater's costume is adorned with sequins. Each sequin is represented by a very small number of very light colored pixels. In order to demonstrate what you can do with this program, I changed the color of one of the sequins to red. You should be able to spot the red sequin in the bottom image in Figure 1.

In addition, I placed a diamond stud in the skater's left earlobe that isn't there in the original image. You should be able to see it in the bottom image but not in the top image.

Program code

The source code for this program is provided in Listing 1 and Listing 2 near the end of the lesson.

Listing 1 provides the source code for my original program named PixelEditor01.

Listing 2 is my modified version of the class named PictureExplorer from Ericson's multimedia library. I added several public accessor methods to the class to make it possible for objects instantiated from other classes to access certain private instance variables from a PictureExplorer object.

Discussion

This program capitalizes on the availability of the PictureExplorer class, making it possible to edit the color of individual pixels in an image.

More specifically, Ericson's PictureExplorer class was modified to make certain instance variables of PictureExplorer objects accessible to objects instantiated from other classes.

Then a Java GUI was written that makes it possible to open an image file in a PictureExplorer object and edit the colors of the individual pixels in the image using the GUI.

Operational information

The program starts with a GUI in the upper-left corner of the screen as shown in Figure 2.

Figure 2. The program GUI at startup.

At that point, all of the user-input components are disabled except for the field at the bottom of the GUI where the user enters the name of the image file to be processed.

Enter the name of an image file

When the user identifies an image file in the text field labeled Enter file name here, the image is opened in a PictureExplorer object in the upper-left corner of the screen and the GUI is moved to a location immediately below the PictureExplorer object as shown in Figure 3.

Figure 3. A PictureExplorer object and the Program GUI.

Specifying the image file name

You can specify an input image file using only the file name and extension if the file is in the current directory. If it is not in the current directory, you must enter the full path to the file.

JPEG, PNG, and BMP files

The program has been tested for use with jpg files, png files, and bmp files as input files. Because the JPEG compression scheme can do strange things with colors, the output file is a bmp file written into the same directory as the input file.

The output file name is the same as the input file name except that the letters BAK are inserted immediately ahead of the extension, and the extension is always bmp. The input file is not modified.

Editing pixels

Once you reach the point shown in Figure 3, you can begin editing pixels. You select a pixel by clicking on it in the explorer window, or by using the controls in the upper portion of the explorer window.

You can zoom in or out on the image in the explorer window to see the pixels in more or less detail. For example, Figure 4 shows the image from Figure 1 zoomed by 500% to show the sequin that was converted to red in more detail. (Note that the crosshair cursor appears at the upper-left corner of the selected pixel.)

Figure 4. Zoomed view of sequins before modification.

The sequin is approximately 3 pixels by 5 pixels in size

As you can see, that sequin is about three pixels wide and two pixels high.

Figure 5 shows the zoomed view after I changed the color of the sequin to red.

Figure 5. Zoomed view of sequins after modification.

Two different shades of red

I used two different shades of red to create the red sequin. The lower-right portion of the red sequin is darker than the upper-left portion. (In retrospect, it probably would have been better if I had also made the left and top edges of the sequin darker than the middle of the sequin.)

A zoomed earlobe

In a similar vein, Figure 6 shows the skater's left ear before I inserted the diamond stud in her left earlobe.

Figure 6. Skater's left ear without the diamond stud.

Figure 7 shows her left ear after I inserted the diamond stud.

Figure 7. Skater's left ear after insertion of the diamond stud.

Suitable for very intricate work

This program makes it possible to do very intricate work insofar as editing an image is concerned. For example, the program could easily be used to remove a mole, pimple, or similar blemish from a digital photograph of someone's face. You could do that by replacing the pixels that define the mole with pixels having the color of neighboring pixels from unblemished skin.

Edit pixels using buttons and text fields

Once the image is loaded into the PictureExplorer object, you can edit any of the pixels in the image using the buttons and text fields in the GUI along with the user controls in the explorer window.

I will start at the top of the GUI and work my way down, describing the purpose of the buttons and the text fields as I go.

The Old Pixel Color data and the Get Color button

The text fields in the red panel in Figure 3 are for display of numeric data only. (They are always disabled insofar as data entry is concerned.) If you place the cursor at a particular location in the explorer window and click the Get Color button in the GUI, the numeric values for the color under the explorer cursor will be displayed in these three text fields. Also, the small square immediately to the right of the text fields in the red panel will show the color under the explorer cursor.

The skater has brown hair

For example, Figure 8 shows the result of clicking the Get Color button in the GUI while the explorer cursor (crosshair) is in the skater's hair.

Figure 8. Illustration of the Get Color button behavior.

Information matches between the two displays

As you would expect, the color values shown in the text fields in the red panel in the GUI and the color of the square to their right match the information in the upper portion of the explorer window.

The New Pixel Color values

The color of a pixel in the image is changed (or at least re-written) by clicking the button labeled Update Color in the GUI.

The three text fields in the green panel in the GUI are used to store the red, green, and blue color values that will be deposited into the currently-selected pixel in the explorer window when the user clicks the Update Color button in the GUI.

Several ways to establish new color values

There are several ways that the values in these three text fields can be established. For example, the user can simply type numeric values into the text fields as shown in Figure 9.

Figure 9. Result of entering values into the New Pixel Color fields.

I manually entered the values 255, 51, and 204 into the three text fields in the green panel in Figure 9. This caused the square immediately to the right of the text fields to take on the color specified by the RGB values. If I were to click the Update Color button at this point, the pixel under the cursor in the explorer window would be changed to the color shown.

The Copy Color button

Another way to establish New Pixel Color values in the text fields in the green GUI panel is by clicking the Copy Color button.

I showed you earlier that clicking the Get Color button causes the color under the explorer cursor to be deposited into the text fields in the red panel in the GUI. Clicking the Copy Color button causes those values to be copied into the three text fields in the green panel.

Modify color but stay within the same family of colors

This capability is useful for modifying the color of a pixel in the explorer window while staying within the same family of colors.

For example, that there is a blue highlight in each eye in Figure 8. Suppose we wanted to make those highlights a brighter shade of blue. Four pixels make up the highlights, two in each eye. We could accomplish this by clicking the following sequence of buttons once for each of the four pixels:

  • Get Color
  • Copy Color
  • Brighter Color
  • Update Color

The results of doing this are shown in Figure 10.

Figure 10. Result of brightening eyeball highlights.

Compare Figure 10 with Figure 8

If you compare Figure 10 with Figure 8, you should see that the blue highlights in the skater's eyes in Figure 10 are a brighter shade of blue than in Figure 8.

Removal of moles, pimples, and other blemishes

Another good use for the Copy Color button would be in the removal of moles, pimples, and other skin blemishes from photographs. In this case, you could position the explorer cursor on neighboring unblemished skin and click the following buttons in sequence:

  • Get Color
  • Copy Color

Then you could use the controls in the explorer window to position the cursor in the blemished portion of skin and click the Update Color button in the GUI. Using this approach, you could "paint over" a skin blemish, one pixel at a time, using the color of the nearest patch of unblemished skin.

The Write File button

You already know what the button labeled Update Color is used for, so I will move along to the button labeled Write File.

When the program first starts running, it copies the input image file into an output file of type bmp as described earlier. When you terminate the program, the final state of the image is written into that output file. At any point during the editing process, you can click the Write File button to cause the current state of the image to be written into the output file. For example, if you would like to save an intermediate version of the image, click the Write File button. Then use operating system features to make a copy of the file in its current state.

The Quit button

Clicking the large X in the upper-right corner of the explorer window has no effect because one of the modifications that I made to the PictureExplorer class was to disable that button.

However, clicking the large X in the upper-right corner of the GUI, or clicking the button labeled Quit, causes the current state of the image to be written into the output file described earlier and causes the program to terminate.

Buttons on the yellow panel

As I mentioned earlier, there are several different ways to cause color component values to be entered into the text fields on the green panel. If you click any of the five buttons labeled Red, Green, Blue,White, and Black on the yellow panel, the color values for the corresponding color will be written into the three text fields on the green panel. For example, if you want to change the color of a pixel underneath the cursor in the explorer window to blue, just click the following two buttons in sequence:

  • Blue
  • Update Color

The button labeled Choose a Color

Most of us don't have the color component values for very many different colors stored in our heads. Therefore, we need some help in choosing a color and getting the color component values for that color. That is the purpose of the button labeled Choose a Color.

When you click the button labeled Choose a Color, a standard Java color-chooser dialog opens as shown in Figure 11.

Figure 11. A standard Java color-chooser dialog.

A pre-selected color

When the color-chooser dialog opens, the color defined by the text fields in the red panel of the GUI has been selected. For example, the dialog shown in Figure 11 corresponds to the state of the image and the GUI in Figure 8. As a result, the dialog has opened with the color of the skater's hair already selected.

Different ways to select a color

The color-chooser dialog provides three tabs, each of which provides a different way to select a color. When the user clicks the OK button in the dialog, the color component values for the selected color are deposited into the text fields in the green panel of the GUI, ready to be deposited under the explorer cursor. This provides a different way to begin with the color of a pixel and use that color to select a new related color for the pixel.

The Darker Color and Brighter Color buttons

The Color class of the standard Java library provides two methods named darker and brighter that can be used to create darker and brighter versions of a specified color. Clicking the Darker Color button or the Brighter Color button causes the corresponding method of the Color class to be applied to the color component values in the text fields in the green panel. That is why I used the Brighter Color button earlier to replace the blue highlights in the skater's eyes with a brighter shade of blue.

Run the program

I encourage you to copy the code from Listing 1 and Listing 2, compile the code, and execute it. Make certain that the compiled version of the PictureExplorer class is either in the directory with your other class files, or at least is on the classpath ahead of the corresponding class file in Ericson's multimedia library.

Experiment with the code, making changes, and observing the results of your changes. Think of ways to improve the usefulness of the program. Make certain that you can explain why your changes behave as they do.

Summary

In this program, I introduced you to a new Java program that can be used to edit the pixels in an image on a pixel-by-pixel basis.

What's next?

In the next lesson, you will learn about color distance, projecting 3D coordinates onto a 2D display plane, and edge detection. Understanding these concepts will help you to better understand modern image processing.

Resources

Copyright

Copyright 2009, Richard G. Baldwin. Reproduction in whole or in part in any form or medium without express written permission from Richard Baldwin is prohibited.

About the author

Richard Baldwin is a college professor (at Austin Community College in Austin, TX) and private consultant whose primary focus is object-oriented programming using Java and other OOP languages.

Richard has participated in numerous consulting projects and he frequently provides onsite training at the high-tech companies located in and around Austin, Texas. He is the author of Baldwin's Programming Tutorials, which have gained a worldwide following among experienced and aspiring programmers. He has also published articles in JavaPro magazine.

In addition to his programming expertise, Richard has many years of practical experience in Digital Signal Processing (DSP). His first job after he earned his Bachelor's degree was doing DSP in the Seismic Research Department of Texas Instruments. (TI is still a world leader in DSP.) In the following years, he applied his programming and DSP expertise to other interesting areas including sonar and underwater acoustics.

Richard holds an MSEE degree from Southern Methodist University and has many years of experience in the application of computer technology to real-world problems.

Baldwin@DickBaldwin.com

0 comments:

Subscribe to: Post Comments (Atom)

Yang Sering Dibaca: