Eric Roberts Handout #46CS 106A February 17, 2010Image Manipulation SlidesMultidimensional Arraysand Image ManipulationEric RobertsCS 106AFebruary 17, 2010In Our Last Episode . . .• In last week’s section, you were asked to assume the existenceof a methoddouble[] readScoresArray(String filename)that reads score data from the specified file, one value perline, and returns an array of doubles containing those values.• Before we start on today’s topic, I want to finish this exerciseso that you have another code example for working with files.Multidimensional Arrays• Because the elements of an array can be of any Java type,those elements can themselves be arrays. Arrays of arrays arecalled multidimensional arrays.• In Java, you can create a multidimensional array by usingmultiple brackets in both the type and the initialization partsof the declaration. For example, you can create array spacefor a 3 x 3 tic-tac-toe board using the following declaration:char[][] board = new char[3][3];• This declaration creates a two-dimensional array of charactersthat is organized like this:board[0][0] board[0][1] board[0][2]board[1][0] board[1][1] board[1][2]board[2][0] board[2][1] board[2][2]Multidimensional Arrays and Images• One of the best examples ofmultidimensional arrays is a Javaimage, which is logically a two-dimensional array of pixels.• Consider, for example, the logofor the Java Task Force at the topright. That logo is actually anarray of pixels as shown in theexpanded diagram at the bottom.•The GImage class allows you toconvert the data for the imageinto a two-dimensional array ofpixel values. Once you have thisarray, you can work with the datato change the image.Pixel Arrays• If you have a GImage object, you can obtain the underlyingpixel array by calling the getPixelArray, which returns atwo-dimensional array of type int.• For example, if you wanted to get the pixels from the imagefile JTFLogo.gif, you could do so with the following code:GImage logo = new GImage("JTFLogo.gif");int[][] pixels = logo.getPixelArray();• The first subscript in a pixel array selects a row in the image,beginning at the top. The height of the image is thereforegiven by the expression pixels.length.• The second subscript in a pixel array selects an individualpixel within a row, beginning at the left. You can use theexpression pixels[0].length to determine the width of theimage.Pixel Values• Each individual element in a pixel array is an int in whichthe 32 bits are interpreted as follows:• The first byte of the pixel value specifies the transparency ofthe color, which is described in more detail on the next slide.1 1 1 1 1 1 1 1 1 0 0 1 1 0 0 1 0 1 1 0 0 1 1 0 0 0 1 1 0 0 1 1• The next three bytes indicate the amount of red, green, andblue in the pixel, in which each value varies from 0 to 255.Together, these three bytes form the RGB value of the color,which is typically expressed using six hexadecimal digits.The color in the example has the RGB value 0x996633,which is a light brown:transparency () red green blue– 2 –Transparency• The first byte of the pixel value specifies the transparency ofthe color, which indicates how much of the backgroundshows through. This value is often denoted using the Greekletter alpha ().• Transparency values vary from 0 to 255. The value 0 is usedto indicate a completely transparent color in which only thebackground appears. The value 255 indicates an opaque colorthat completely obscures the background. The standard colorconstants all have alpha values of 255.• Fully transparent colors are particularly useful inimages, because they make it possible to displayimages that do not have rectangular outlines. Forexample, if the gray pixels in the corners of theJTFLogo.gif image have an alpha value of 0, thebackground will show through those parts of the logo.Image Manipulation• You can use the facilities of the GImage class to manipulateimages by executing the following steps:• The program on the next slide shows how you can apply thistechnique to flip an image vertically. The general strategy forinverting the image is simply to reverse the elements of thepixel array, using the same technique as the reverseArraymethod on an earlier slide.Read an existing image from a file into a GImage object.1.Call getPixelArray to get the pixels.2.Write the code to manipulate the pixel values in the array.3.Call the GImage constructor to create a new image.4.The FlipVertical ProgramFlipVerticalpublic void run() { GImage original = new GImage("Candle.gif"); GImage flipped = flipVertical(original); double y = (getHeight() - original.getHeight()) / 2; double x1 = (getWidth() - IMAGE_SEP) / 2; double x0 = x1 - original.getWidth() - IMAGE_SEP; add(original, x0, y); add(flipped, x1, y);}private GImage flipVertical(GImage image) { int[][] array = image.getPixelArray(); int height = array.length; for (int p1 = 0; p1 < height / 2; p1++) { int p2 = height - p1 - 1; int[] temp = array[p1]; array[p1] = array[p2]; array[p2] = temp; } return new GImage(array);}imagearrayheight100Selecting Color Components• If you want to work with the colors of individual pixels insidea pixel array, you can adopt either of two strategies:– You can use the bitwise operators described in the text to selector change individual bits in the pixel value.– You can use the static methods provided by the GImage class forthat purpose.• Although it is useful to remember that all information isstored as bits, there doesn’t seem to be much point in goinginto all the details, at least in CS 106A. We will therefore usethe second strategy and employ the static methods getRed,getGreen, getBlue, getAlpha, and createRGBPixel.• The definitions of these methods (along with the underlyingimplementations, which you are free to ignore) are shown onthe next slide.Static Methods in GImage/** Returns the alpha component from an RGB value. */ public static int getAlpha(int pixel) { return (pixel >> 24) & 0xFF; }/** Returns the red component from an RGB value. */ public static int getRed(int pixel) { return (pixel >> 16) & 0xFF; }/** Returns the green component from an RGB value. */ public static int getGreen(int pixel) { return (pixel >> 8) & 0xFF; }/** Returns the blue component from an RGB value. */ public static int getBlue(int pixel) { return pixel & 0xFF; }/** Creates an opaque pixel value from the color