Lab 8

Last modified: December 06 2010 11:16:07 AM

Working with Images

We are going to write code to create effects (a la Photoshop) on Greenfoot Images.

If you don't remember how to do any of the steps (like, copying, zipping, etc), please refer back to Lab 1.

First, you will need to copy over the scenario for this assignment. If you are working from home, you can download the scenario here. If you are in lab, the scenario is located in /eng/class/notes/cse113/Lab8.

Take note of the following classes in the scenario:

• PictureWorld - the world for this scenario
• *Button - a number of classes that represent buttons and capture the user's intentions while using the program

---

Required Lab Tasks

Fix Initial Compiler Errors

Note that the scenario does not compile. Work to fix the compiler errors that are present in the scenario. Basically, there are some methods missing from the PictureWorld that the buttons are trying to call. When you add the methods to PictureWorld, simply leave the method bodies empty as with many of the other method bodies in PictureWorld at this point.

Run the Scenario

Once you have fixed the compiler errors, run the scenario. The load picture button works and loads pictures from a list of random pictures. However, none of the other buttons do anything if clicked upon.

Explore how buttons work

Open the class RemoveRedButton in the editor. Notice how the button is created. It is drawn on the screen. Note that in act(), the button captures the mouse activity and IF there has been a mouse click on the button, the appropriate method from PictureWorld is called.

Buttons do something

Write code in each of the methods in PictureWorld that are the "actions" of the buttons. The code you will write is a "print" message. The code should look like this:

System.out.println("text here");

When this code is run, it writes (prints) out the String in the parameter list to the standard output. At first put this in the removeRedFromPicture method with a string that seems appropriate. Run the scenario and hit the Remove Red button and note that another window will open and display the text. If you hit the button more than once, the text will appear more than once.

Continue with the other methods in PictureWorld giving each a unique string so that you can ensure that the buttons are calling the correct methods. If they are not, you need to find the places in the code of the buttons that are not correct.

Modifying an Image

Once we know that the buttons are calling the correct methods, we need to fill in the methods of PictureWorld appropriately so that each does the prescribed action. Let's start with removeRedFromPicture. In order to remove the red from an image, we need to do the following things:

1. Get the background image and store it in a variable
2. Loop through every pixel in the image and retrieve the color information about every pixel. Create a new color for that pixel with 0 as its red component, leaving the green and blue component unchanged.

We know how to do (1) already - use the getBackground() method in the world. For step 2, we need to remember/realize a few things. We must realize that we need to look into the GreenfootImage class documentation and the java.awt.Color class documentation to learn what methods are available to us from both of those classes. We are looking for specifically methods that allow us to access and change the color value stored at a particular location in an image (from GreenfootImage) and methods on a color that allow us to get the information about the red, green, and blue components of that color. All of these methods are available.

Lastly, we need to figure out how to loop through every pixel in the image. We know how to write loops, but the loop to do this is a little different. It is actually a loop within a loop. We write a loop that loops through all of the y-coordinates of the picture (from 0 to the height of the image) and inside that loop's body, we write another loop that loops through all of the x-coordinates of the picture (from 0 to the width of the image). Inside the inner loop's body, we write what we want to do to each pixel.

Finish it up and try it out

Finish up the functionality of the RemoveRedButton and run the scenario and see what happens. The image on the screen will change colors once all of the red has been removed from the image. An easy way to tell if your code is working correctly for this button is to not load any image (leave the background all white). Clicking on the button will turn the image a shade of blue called cyan. Looks like this. Then you will know you are on the right track.

Hints for other buttons

Remove Green & Remove Blue

Very similar to Remove Red. Removing Green from the white image will turn it purple, and removing blue will turn it yellow.

Replace White

For this action, you simply find all of the white pixels in an image and replace them with a color. You can choose a color that all white pixels will become (like pink), or you can generate some sort of random color each time. The choice is up to you.

Create Negative

Creating the negative image is as simple as taking each of the color components (red, green, blue) and subtracting their current value from 255 and making that new value the new value of the color components. For example, if the original color had the values (100, 100, 100), then the negative color should have the values (155, 155, 155).

Grayscale

To convert a picture to grayscale, you need to add up the red, green, and blue components of the color and divide by 3. This number now becomes the value for the red, green, and blue of the new color for the pixel. For example, if the color was (30, 45, 50), then the new color should be (30+45+50)/3 = 41, so (41, 41, 41).

---

Submitting the Assignment

Once you have completed your work, you will submit the zipped up version of the Lab 8 scenario.

For directions on submitting, please see here.

Please recall that you must achieve a grade of at least 50% on each of the labs to be allowed to take the second practical exam. This means, that your labs are technically all due by the last day of class (December 10th). However, if you want to stay current with the course, I would recommend having this assignment completed within a week.

---

Grading Information

Please make sure to look at your grading information on Web-CAT. See the grading information page for more details about how to interpret Web-CAT grade reports.

1. Remove all red from a loaded picture(8.333 points)
2. Remove all green from a loaded picture (8.333 points)
3. Remove all blue from a loaded picture (8.333 points)
4. Replace the white in a loaded picture with another color. (25 points)
5. Convert image from full color to grayscale. (25 points)
6. Create the negative of an image. (25 points)

---

Lab authored by Adrienne Decker (with definite inspiration from the Media Computation curriculum developed by Mark Guzdial)