Manipulating Pictures, Arrays, and Loops part 1

Georgia Institute of Technology

Manipulating Pictures, Arrays, and Loopspart 1


Digital PicturesRepresented by pixels

With a red, green, and blue value stored for each pixel

Stored in .jpg (JPEG) filesInternational standardWith lossy compression

Lossy means not all data is stored But what is lost isn’t that important

Compression means made smallerOther formats for storing digital pictures

are GIFF and BMP

Manipulating a PictureTo manipulate a picture we need to

manipulate the pixels that make up the pictureChange the red, green, or blue values at the

pixelPixel is a class that was created at Georgia

TechEach pixel object has a red, green, and blue

value


What Data does a Picture Object Have?A picture object has an array of pixel

objectsThat it read from the JPEG file

It knows the picture widthpictureObj.getWidth()

It knows the picture heightpictureObj.getHeight()

It knows how to return an array of pixelsPixel[] pixelArray = pictureObj.getPixels()


Picture ExerciseCreate a picture in DrJava

get the pictures width, height, and number of pixelsString fileName = FileChooser.pickAFile();Picture pictureObj = new Picture(fileName);int width = pictureObj.getWidth();System.out.println(“The picture width is “ + width);int height = pictureObj.getHeight();System.out.println(“The picture height is “ + height);Pixel[] pixelArray = pictureObj.getPixels();System.out.println(pixelArray.length + “ pixels”);


Pixel ObjectsEach pixel has a red, green, and blue value

getRed(), getGreen(), getBlue()setRed(v), setGreen(v), setBlue(v)

Each pixel knows the location it was in the picture objectgetX(), get(Y)

You can also get and set the color at the pixelgetColor(), setColor(color)


Color ObjectsThere is a class defined in Java that

represents colorThe Color class in the package java.awtTo use the class you must either

import java.awt.Color;Use the full name java.awt.Color

You can create a color object by giving the red, green, and blue values for itColor colorObj = new Color(255,10,125);


Predefined ColorsThe Color class has

defined class constants for many colorsColor.red, Color.green,

Color.blue, Color.black, Color.white, Color.yellow, Color.gray, Color.orange, Color.pink, Color.cyan, Color.magenta

Or you can use all uppercase namesColor.RED, Color.BLUE,

Color.BLACK, …


Getting and Setting Pixel ColorsTo get a pixel’s color as a color object

Color color1 = pixelObj.getColor();int red = color1.getRed();int green = color1.getGreen();int blue = color1.getBlue();

To set a pixel’s color using a new color object

red = 20;green = 30;blue = 100;Color color2 = new Color(red,green,blue);pixelObj.setColor(color2);


Pixel ExerciseIn DrJava

Pick a file and create a picture objectGet the array of pixels from the picture objectGet the 1st pixel from the array of pixels

Pixel pixelObj = pixelArray[0]; // 0 is first oneGet the red, green, and blue value for this

pixelGet the x and y location of this pixelGet the color of this pixel

Get the red, green, and blue values of the color


Changing Pixel ColorsThere are two ways to change the color

of a pixel in a pictureSet the red, green, and blue values

individuallypixelObj.setRed(value), pixelObj.setGreen(value), pixelObj.setBlue(value),

Or set the colorpixelObj.setColor(colorObj)

But, you won’t see any change in the pictureUntil you ask it to repaint:

pictureObj.repaint();


Pictures are 2-D ArraysThey have columns

and rows (x and y)You can get a pixel

at a particular x and y locationPixel pixelObj =

picture.getPixel(x,y);The columns and

rows start with index 0 end with num -1

X

Y


Changing a Picture Exercise> import java.awt.Color;> String fileName =

"C:/intro-prog-java/mediasources/caterpillar.jpg";> Picture pictureObj = new Picture(fileName);> pictureObj.show();> pictureObj.getPixel(10,100).setColor(Color.black);> pictureObj.getPixel(11,100).setColor(Color.black);> pictureObj.getPixel(12,100).setColor(Color.black);> pictureObj.getPixel(13,100).setColor(Color.black);> pictureObj.getPixel(14,100).setColor(Color.black);> pictureObj.getPixel(15,100).setColor(Color.black);> pictureObj.getPixel(16,100).setColor(Color.black);> pictureObj.getPixel(17,100).setColor(Color.black);> pictureObj.getPixel(18,100).setColor(Color.black);> pictureObj.getPixel(19,100).setColor(Color.black);> pictureObj.repaint();


Method to Decrease Red Loop through all the pixels in an array of Pixel objects and change

the red in eachpublic void decreaseRed() { Pixel[] pixelArray = this.getPixels(); int value = 0;

// loop through all the pixels in the array for (Pixel pixelObj : pixelArray) {

// get the red value value = pixelObj.getRed();

// decrease the red value by 50% (1/2) value = value / 2;

// set the red value of the current pixel to the new value pixelObj.setRed(value); } }

The body of the loop is in {}


Decrease Red Method public void decreaseRed() { Pixel[] pixelArray =

this.getPixels(); int value = 0; Pixel pixelObj = null; int index = 0;

// loop through all the pixels while(index < pixelArray.length) { // get the current pixel pixelObj = pixelArray[index];

// get the red value value =

pixelObj.getRed();

// decrease the red value

value = value / 2;

// set the pixel red

pixelObj.setRed(value);

// increment the index index = index + 1; }


Decrease Red ExerciseIn DrJava

Add the method decreaseRed() to Picture.javaBefore the last } which ends the class definition

Compile the methodClick the Compile All button

Test it by doing the following in the interactions pane> String fileName =

"C:/intro-prog-java/mediasources/caterpillar.jpg";> Picture picture1 = new Picture(fileName);> picture1.explore();> picture1.decreaseRed();> picture1.explore();


Faking a SunsetIf you want to make an

outdoor scene look like it happened during sunsetYou might want to

increase the red But you can’t increase

past 255Another idea is to reduce

the blue and greenTo emphasize the redTry to reduce the blue and

green by 30%


Faking a Sunset AlgorithmReduce the blue and green by 30%

1.Get the array of pixels from the picture2.Set up an index to start at 03.Loop while the index is less than the length

of the array1.Get the pixel at the current index from the array of

pixels2.Set the blue value at the pixel to 0.7 times the

original value3.Set the green value at the pixel to 0.7 times the

original value4. Increment the index and go back to step 3


Faking a Sunset Method/** * Method to simulate a sunset

by * decreasing the green * and blue */public void makeSunset(){ Pixel[] pixelArray =

this.getPixels(); Pixel pixelObj = null; int value = 0; int i = 0;

// loop through all the pixels while (i < pixelArray.length)

{ // get the current pixel pixelObj = pixelArray[i];

// change the blue value value = pixelObj.getBlue(); pixelObj.setBlue((int) (value *

0.7));

// change the green value value = pixelObj.getGreen(); pixelObj.setGreen((int) (value *

0.7));

// increment the index i++; } }


Negating an ImageHow would you

turn a picture into a negative?White should

become black255,255,255 becomes

0,0,0Black should become

white0,0,0 becomes

255,255,255


Negate AlgorithmSubtract current value from 255 for red,

green, and blue1.Get the array of pixels from the picture2.Declare variables to hold the current pixel

and the red, green, and blue values3.Loop starting an index at 0 and incrementing

by 1 and loop while the index is less than the length of the array1.Get the pixel at the current index from the array of

pixels2.Set the red value to 255 – current red value3.Set the blue value to 255 – current blue value4.Set the green value to 255 – current green value5. Increment the index and go back to step 3


Negate Method/** * Method to negate the picture */public void negate(){ Pixel[] pixelArray =

this.getPixels(); Pixel pixelObj = null; int redValue, blueValue,

greenValue = 0;

// loop through all the pixels for (int i = 0; i <

pixelArray.length; i++)

{ // get the current pixel pixelObj = pixelArray[i];

// get the values redValue = pixelObj.getRed(); greenValue = pixelObj.getGreen(); blueValue = pixelObj.getBlue();

// set the pixel's color pixelObj.setColor(

new Color(255 - redValue, 255 -

greenValue, 255 -

blueValue)); } }


Changing to GrayscaleGrayscale ranges from black to white

The red, green, and blue values are the sameHow can we change any color to gray?

What number can we use for all three values?The intensity of the color

We can average the colors(red + green + blue) / 3

Example(15 + 25 + 230) / 3 = 90

Other ideas…Create a mirror imageCreate quadrantsCreate linesChange the size Reverse the image….

Manipulating Pictures, Arrays, and Loops part 1

Documents

Transcript of Manipulating Pictures, Arrays, and Loops part 1