blue pelican computer science ap picture lab on projects | new projects and navigate to the folder...

Blue Pelican Computer Science

AP Picture Lab

Student Version 1.01

Copyright © 2014 by Charles E. Cook; Refugio, Tx

Edited by: Tanner Wright

(All rights reserved)

www.bluepelicanmath.com

http://www.bluepelicanmath.com/

pictureLab Intro-day1_student, page 1


Blue Pelican Picture Lab – Day-1

Download: Download the files for this Picture Lab at

www.bluepelicanjava.com/threeLabs/pixLab.zip.

Download and store in a convenient place on your computer.

The five discussions/activities provided in this Picture Lab series are each designed to exactly fit one class period:

The provided classes: Make a java project out of all of the classes that are within the classes folder that is within the pixLab folder. Here’s how to do it with the IDE, BlueJ.

Click on Projects | New Projects and navigate to the folder on your computer where you normally keep you java projects, for example, myJavaProjects and then give myPixLab as the folder name. Click Create. Next, click on Projects | Import… ,navigate to the pixLab/classes folder, and then click Import. This will display all of the classes. Compile them starting with DigitalPicture, SimplePicture, Picture and then the other classes. At this point the following classes should be available. Later, we will examine the relationship between these various classes.


http://www.bluepelicanjava.com/threeLabs/pixLab.zip



Make the images folder in the pixLab folder initially copied to your computer available to the classes just compiled by copying it to the myPixLab folder . For example, if you store your java project in a folder called myJavaProjects, then the folder structure should now appear as follows:

myJavaProjects myPixLab (this folder contains the classes) images

Two dimensional arrays: It is assumed here that the student has a working knowledge of two dimensional arrays. The traditional concept of 2D arrays with rows and columns is exactly how digital images are arranged. Every picture consists of rows of dots (pixels) stacked above and below other rows of pixels. When looking at many rows, one can think of columns of pixels. The numbering scheme for locating a particular pixel is exactly as it is for arrays.

The indices for rows start with 0 as the top row and with increasing indices proceeding downward. Indices for columns start with 0 at the far left and with increasing indices proceeding to the right. This scheme is illustrated in the table of pixels below.

0 1 2 3 4 5 6 7 0 X X X X X X X X 1 X X A X X X X X 2 X X X X X X B X 3 X X X X X X X X

The standard way of specifying a pixel position within this array is to give the row index first, followed by the column index). For example, the pixel in position (1,2) is A. The pixel at (2,6) is B.




PictureExplorer: Look at the code in PictureExplorer and make sure the main method is as follows:

public static void main( String args[]) { Picture pix = new Picture("beach.jpg"); pix.explore();

}

Execute the main method within the PictureExplorer and the following should display:

Click on various places on this image and notice the row and column position display at the top of the window. Point the mouse at the extreme top left corner and click. The coordinates should be (r, c) = (0, 0). Now point the mouse at the extreme lower right corner and click. The coordinates should be (r, c) = (479, 639).

This indicates that the size of the image is 480 rows X 640 columns giving a total of 480(640) = 307, 200 pixels.




You will also notice as points are clicked on in PictureExplorer, that just under the column display, RGB values are given. Each pixel has a red component (the R in RGB), a green component (the G in RGB), and a blue component (the B in RGB). Each of the R, G, and B has a value that range from 0 to 255. The maximum value that a byte (8 bits) can have is 255, so exactly one byte is assigned for each of the R, G, & B values.

For example, a pixel that is predominately blue with just a little red and no green might have RGB values of (82, 0, 204).

Click on an area of the picture that is predominately blue and note the RGB values. Then click on a green area.

ColorChooser: Dismiss the PictureExplorer window and then run the main method within the ColorChooser class. Choose the RGB tab and begin experimenting with picking colors. Choose pure red, pure green, and then pure blue, always taking note of the RGB values. Notice that the color code box gives the equivalent hex values. For example, for R = 255, G = 0, and B = 10, the hex value in the Color Code box would be FF000A.

It is especially interesting to see how the various shades of gray are created. A characteristic of any shade of gray is that each of the three RGB components are equal to each other. Of the 256 possible shades of gray, create each of the following using ColorChooser:




(0, 0, 0) black . . .

(32, 32, 32) very dark gray . . .

(120, 120, 120) dark gray . . .

(220, 220, 220) light gray . . .

(240, 240, 240) very light gray . . .

(255, 255, 255) white

Testing our first method: As will be examined in much greater detail, PictureTester will be where we create and test our own methods. Examine the code in PictureTester and you will see many methods meant for testing various modification of an image. Find the method testZeroBlue( ).

public static void testZeroBlue() { Picture beach = new Picture("beach.jpg"); beach.explore(); beach.zeroBlue(); beach.explore();

}

The beach.jpg picture in the images folder is used to create a Picture object call beach. The explore method will display this image. A call to the zeroBlue( ) method sets the blue component of the RGB trio of all pixels to zero leaving the other two intact. A second call to explore( ) displays the results. All this will result in two windows being displayed because of the two calls to explore( ).




In the main method in the PictureTester class, make sure that testZeroBlue() is unremmed and that all other code there remains remmed out. Run the main method of PictureTester. Because the method we are calling has two calls to explore(), we should now have two windows open displaying both the original and the modified image. (You might have to move the top window so you can see the original image under it.)

Create your own method: Create another method called testZeroRed() that is similar to the testZeroBlue() method. This new method should call zeroRed( ). Test this new method by commenting-out testZeroBlue(); from main and inserting a new line, testZeroRed();

Run main and verify that all red has been removed from the picture.

public static void testZeroRed() { Picture beach = new Picture("beach.jpg"); beach.explore(); beach.zeroRed(); beach.explore();

}




You should be aware that in the RGB color model, there is a fourth byte (again, values from 0 to 255) called the alpha value. This determines how opaque or transparent the pixel is. If it is somewhat transparent, then for layered windows the color of the pixel in the window just below the pixel in question will be involved in a mixture of its color and our pixel’s color.

We will not concern ourselves with alpha values for the remainder of this study.




Assignment:

1. What is the dominant color of a pixel whose RGB value are (45, 202, 97)?

2. For a picture whose dimensions are 200 X 620 (row x columns), what are the (r, c) coordinates of the pixel in the upper right corner?

3. How would a pixel have RGB values of (97, 97, 97) best be described?

4. How would a pixel have RGB values of (252, 252, 252) best be described?

5. If all bits in a byte are 1’s, what is its decimal value? Hex value?

6. What are the RGB values for a white pixel?

7. What are the RGB values for a black pixel?




8. How many bytes does it take in the RGB color model (including the alpha value) to represent a pixel? What java data type is best suited to store such a color.

9. How many rows does a 2 megapixel image have if it has 1000 pixels in each row? (A megapixel is a million pixels.)

10. What are the decimal RGB values for a pure red pixel?

11. What are the hex RGB values for a pure blue pixel?

12. Which of these two pixels having these RGB values is the brightest? (160, 221, 79) (40, 88, 22)

13. If the (r, c) coordinates of the pixel in the bottom right corner of a picture are (52, 76), what are the dimensions of the image?

14.For a 1.8 megapixel image with 1500 rows, what are the (r, c) coordinates of the pixel in the lower right corner?



pictureLab-day2_student, page 1


It is assumed here that the student has some knowledge of inheritance and interfaces (Blue Pelican Java chapters 35 and 37).

There are important relationships between three of the classes shown here. At the top of the “food- chain” here is the DigitalPicture interface. It is implemented (realized) by the SimplePicture class that is, in turn, inherited by the Picture class. This is depicted by the closed arrow heads shown here. Continuing the “food- chain” analogy, the Picture class is at the bottom of the chain.

The following facts concerning the creation of objects using these two classes and interface are presented in anticipation of certain questions that may be present on the AP test.

Consider the creation of an object:

(Class1 or Interface1) obj = new Class2();

The object obj is of type (Class1 or Interface1)

(Class1 or Interface1) must be of higher or of equal position to that of Class2 in the “food-chain.”

The object obj can only use methods listed in (Class1 or Interface1).

All code that obj uses is in Class1 or any class it inherits.




The call to the constructor in Class2 will automatically result to a call to the constructor in any class it inherits. Sometimes this necessitates the placement of super(param); as the first line of the constructor of Class2 to insure that the correct parameter is passed to the constructor of its superclass.

The Quick Reference: In this lesson we will write code that modifies a picture. To do this, we need to be aware of the methods available to us. The quick reference provided at the end of this Picture Lab document provides what we need, especially the Picture and Pixel classes.

The following fundamental code will be used in the code that we create for this and future lessons:

Creation of a picture object: Picture pic = new Picture(myPicture.jpg);

Creation of a 2D array of Pixel objects: Pixel [] [] pixels = pic.getPixels2D();

Nested loops for visiting each Pixel object in the 2D array: (Enhanced for loop – looks at all the rows and columns. Also called a for-each loop)

for(Pixel[] rowArray: pixels) {

for(Pixel pixObj: rowArray) {

//code for manipulating pixObj goes here }

}




Nested loops for visiting Pixel objects in the 2D array: (Traditional loops - Can be made to look at only part of the rows & columns although this example looks at all.)

for(int row = 0; row < pixels.length; row++) {

for(int col = 0; col < pixels[0].length; col++) {

} }

PictureTester:

//code for manipulating pixels [row] [col]

When testing code, we will use the class PictureTester. Typically, we will put our code in a method that we create and then call that method from within the main method. To prepare for testing there, make sure all lines of code in the main method are remmed out.

Converting a color picture to black and white: Within the PictureTester class, create the void method convertToBlackAndWhite. It receives no parameters.

• As the first line of code in this method, create a Picture object called pic from the femaleLionAndHall.jpg picture.

• Display the picture using the explore() method.

• Create a 2D Pixel array from this picture using getPixels2D( ).

• Set up two nested for-each loops.

• Using the Pixel method getAverage(), get the average of the RGB values.

• Store this average as each of the R, G, and B values of the current Pixel object in the nested loops. Notice that each pixel will now be some shade of gray since R = G = B.

• Call explore() to display the modified picture.

• Test this method by calling it from the main method.




Adjusting the brightness of a picture: Within the PictureTester class, create a void method called adjustBrightness. It should receive a double as a parameter.

For example, if the double sent to this method is 1.3, then that means to increase the brightness by 30%. If the parameter is .8, that would mean to reduce the brightness of each pixel to 80% of its former value.

Typically, the process is very simple. Each RGB value is simply multiplied by the parameter. A problem occurs when the product is greater than 255. If RGB values that go over 255 are simply set to 255, very likely, the color will be changed. If each RGB value is increased (or decreased) by the same percentage, the color will be the same, just brighter (or darker). Clearly, if just one RGB value is not changed by the same percent as the others (as is the case when its value is readjusted from some value in excess of 255), then there is a color shift and we are not just changing the brightness level, we are also changing the color. That’s not what we want: changing the color is unacceptable.

The solution to this dilemma is to adjust the color of each of the RGB values to the percentage that the brightest of these has to change without going over 255.

• As the first line of code in this method, create a Picture object called pic from the koala.jpg picture.






• Set up two nested for-each loops.

• Determine the brightest RGB value and if the resulting brightness using the passed double parameter exceeds 255, determine a new brightness percentage change.

• Apply this percentage to each of the RGB values.


• Test this method by calling it from the main method using 1.3 as an argument and again with .8.

Notice that in the right brightness adjusted picture that the face is brighter and the tree trunk in the upper right corner is lighter.




Assignment:

1. Even though creation of the obj with

DigitalPicture obj = new Picture(myPic.jpg);

is legal, why would it not be possible to accomplish much with obj?

2. Assuming that a no-argument constructor exists for Picture, would the following code compile?

DigitalPicture pic = new Picture( );

3. Assuming that a no-argument constructor exists for SimplePicture, would the following code compile?

Picture pic = new SimplePicture( );

4. The Picture class has no getPixels2D() method, yet it is legal for an object of

type Picture to use this method. Why?




5. For a pixel array having 36 rows and 22 columns, how many times will the code in the area designated code area #1 be executed?

for(Pixel[] rowArray ; pixels) {

for(Pixel pixObj: rowArray) {

//code area #1 }

}

6. For a pixel array having 36 rows and 22 columns, how many times will the code in the area designated code area #1 be executed?

for(int row = 34; row < pixels.length; row++) {

for(int col = 10; col < pixels[0].length; col++) {

// code area #1

} }

7. Suppose it is desired to modify only a samll portion of an image to B&W while leaving the rest of the image intact with its original color. Comment on why it would be inappropriate to use for-each (enhanced) loops.





Mirror image across a vertical line: Imagine a vertical line drawn on an image. Think of the line as a mirror and then mirror the pixels on the left side of the line across to the right side. For example, a pixel on the far left will be duplicated on the far right side of the same row.

Within the PictureTester class, create the void method verticalMirror. It receives no parameters.

• As the first line of code in this method, create a Picture object called pic from the redMotorcycle.jpg picture.



• Set up two nested traditional for-loops.

o Let the outer “row” loop go through all the rows. o Let the inner “col” loop only half way through the columns.

• Store each pixels[row][col] pixel in its appropriate “mirror image” position.


Test this method by calling it from the main method in PictureTester.




Mirror image across a horizontal line: Imagine a horizontal line drawn on an image. Think of the line as a mirror and then mirror the pixels above the line across to the bottom side. For example, a pixel at the very top will be duplicated at the very bottom of the same column.

Within the PictureTester class, create the void method horizontalMirror by modifying the code in verticalMirror. It receives no parameters.





Flip an entire image horizontally: Think of holding a picture in your hand, flipping it left-to-right, and then being able to still see the image through the paper. This is a horizontal flip.

Within the PictureTester class, create the void method flipHorizontal. It receives no parameters.

• As the first line of code in this method, create a Picture object called pic1 from the butterfly1.jpg picture.

• Similarly, create pic2 from the butterfly1.jpg image.

• Display pic1 using the explore() method.

• Create a pixels1 array from pic1 using getPixels2D( ).

• Create a pixels2 array from pic2 using getPixels2D( ).

• Set up two nested traditional for-loops. o Let the outer row-loop go through all the rows of pic1. o Let the inner col-loop go through all the columns of pic1.

• Store each pixels1[row][col] pixel in its appropriate position in pixel2.

• Call explore() to display pic2.





Flip an entire image vertically: Think of holding a picture in your hand, flipping it top-to-bottom, and then being able to still see the image through the paper. This is a vertical flip.

Within the PictureTester class, create the void method flipVertical by modifying the code in flipHorizontal. It receives no parameters.





Repair a Greek Temple Use Picture Explorer to display temple.jpg. In this lesson we will take the intact portion of the roof on the left and mirror image it across the center of the building so as to make it appear that the building has been repaired. Only a portion of the original picture needs to be mirrored. This will be somewhat similar to a method we created in an earlier lesson, mirrorVertical; however, the left side of only the roof area will be mirrored and not the entire left side of the picture.

Clicking on the picture in PictureExplorer will reveal that the center of the temple is at column 275. The portion of the roof on the left side necessary for the repair involves rows 27 – 96 and columns 13 – 275.

Within the PictureTester class, create the void method repairTemple. It receives no parameters.

• Create a Picture object called pic from the temple.jpg picture.

• Display pic using the explore() method.

• Create a pixels array from pic using getPixels2D( ).

• Set up two nested traditional for-loops.

o Let the outer row-loop go through rows 27 – 96 inclusive. o Let the inner col-loop go through columns 13–275 inclusive.

• Set the Color of the pixel in its appropriate mirror image position.

• Call explore() to display pic.





At this point, the student is invited to explore the creation of collages and edge detection on his/her own.

Creating a collage (a composite picture consisting of several small pictures.

An important method of the Picture class that will be used to create a collage is:

public void copy(Picture fromPic, int startRow, int startCol)

Below is an example of a typical call to this method using the Picture object pic.

pic.copy(smallPic, 40, 20); Where smallPic is the small picture to be copied into the larger pic beginning at upper right coordinates row 40,column 20.

To see how this all works, study the following method in the Picture class:

public void createCollage() { Picture flower1 = new Picture("flower1.jpg"); Picture flower2 = new Picture("flower2.jpg"); this.copy(flower1,0,0); //this is the picture object used to call this

//method. this.copy(flower2,100,0); this.copy(flower1,200,0); Picture flowerNoBlue = new Picture(flower2); flowerNoBlue.zeroBlue(); this.copy(flowerNoBlue,300,0); this.copy(flower1,400,0); this.copy(flower2,500,0); this.mirrorVertical(); this.write("collage.jpg"); //Creates a new disk file.

}

Test with testCollage in PictureTester.




Edge Detection: Many software products (like PhotoshopTM) and devices including digital cameras and the camera function in smart phones use edge detection.

A common way to look for an edge in a picture is compare the “color difference” between the picture in question and adjacent pixels.

The color difference will be called color distance: Color distance is similar to the way distance between two 3D points is calculated in Algebra.

d = �(x2 − x1 )2 + (y2 − y1 )2 (z2 − z1 )2

Similarly, if r1 , g1 , and b1 stand for the respective color values of pixel1 and r2 , g2 , and b2 stand for the respective color values of pixel2, then the following gives the color distance between the two pixels:

d = �(r2 − r1 )2 + (g2 − g1)2 (b2 − b1)2

If d exceeds some predetermined value, then an edge has been detected.

Call the Picture method colorDistance to get the color distance between the current Pixel object used to call this method and a passed Pixel object.

Test this with the testEdgeDetection method in the PictureTester class.


Quick Reference

DigitalPicture

Pixel[][] getPixels2D() // SimplePicture

void explore() // SimplePicture

boolean write(String fileName) // SimplePicture

SimplePicture implements Digital Picture

public SimplePicture()

public SimplePicture(int width, int height)

public SimplePicture(SimplePicture copyPicture)

public SinplePicture(String fileName)

public Pixel[][] getPixels2D()

public void explore()

public boolean write(String fileName)

Picture extends SimplePicture

public Picture()

public Picture(int height, int width)

public Picture(Picture copyPicture)

public Picture(String fileName)

public Pixel[][] getPixels2D() // SimplePicture

public void explore() // SimplePicture

public boolean write(String fileName) // SimplePicture

Pixel

public double colorDistance(Color testColor)

public double getAverage()

public int getRed()

public int getGreen()

public int getBlue()

public Color getColor()

public int getRow()

public int getCol()

public void setRed(int value)

public void setGreen(int value)

public void setBlue(int value)

public void setColor(Color newColor)

java.awt.Color

public Color(int r, int g, int b)

public int getRed()

public int getGreen()

public int getBlue()

blue pelican computer science ap picture lab on projects | new projects and navigate to the folder...

Documents