Workshop for Programming And Systems Management Teachers Chapter 6 Two-dimensional arrays and nested loops Georgia Institute of Technology

Georgia Institute of Technology Learning Goals Understand at a conceptual and practical level What is a two-dimensional array? How do you create two-dimensional arrays? How do you access data in two-dimensional arrays? How do you use nested loops? Georgia Institute of Technology

What is a two-dimensional array? The pixels in a picture are really stored in a two-dimensional array Each pixel has a x value (horizontal location) Each pixel has a y value (vertical location) picture.getPixel(x,y) returns the pixel at that location x y Georgia Institute of Technology

Example Two-Dimensional Arrays Maps That street is in D-5 Battleship Try I-5 Hit or miss Chairs at a theater or game Row C seat 20 Georgia Institute of Technology

Two-Dimensional Arrays To create a 2-d array With an x and y dimension int[][] grid = new int[2][3]; // num rows, num cols int grid[][] = new int[2][3]; int[][] grid = {{2, 3 1}, {4, 5, 6}}; // two rows, three cols How to set values in a 2-d array grid[0][0] = 3; grid[1][2] = 5; How to get values from a 2-d array int value = grid[0][0]; // row = 0, col = 0 int value = grid[1][2]; // row = 1, col = 2 Georgia Institute of Technology

Georgia Institute of Technology 2-d Array Exercise Try the following in the interactions pane of DrJava Create a 2 row 3 column 2-d array Get the values in each data area Put values in each possible data area Try to access outside valid data areas 1 2 1 2 3 4 5 6 1 1 2 5 3 1 2 4 8 1 Georgia Institute of Technology

Georgia Institute of Technology An Array of Arrays Two-dimensional arrays are really an array with other arrays inside of it Table in a table You can get the length of the outside array number of rows array.length You can get the length of the inner array number of columns array[0].length Georgia Institute of Technology

Georgia Institute of Technology Nested Loop How would you get all the pixels in a picture using their x and y values From left to right and top to bottom? x=0 and y=0, x=1 and y=0, x=2 and y=0, … x=0 and y=1, x=1 and y=1, x=2 and y=1, … x=0 and y=2, x=1 and y=2, x=2 and y=2, … We need to have one loop inside another The outer loop counts y from 0 to height - 1 The inner loop counts x from 0 to width - 1 Georgia Institute of Technology

Alternative Nested Loop How would you get all the pixels in a picture using their x and y values From top to bottom and left to right? x=0 and y=0, x=0 and y=1, x=0 and y=2, … x=1 and y=0, x=1 and y=1, x=1 and y=2, … x=2 and y=0, x=2 and y=1, x=2 and y=2, … We need to have one loop inside another The outer loop counts x to width - 1 The inner loop counts y from 0 to height - 1 Georgia Institute of Technology

Lighten the Color Algorithm Start x at 0 and loop while x < the picture width (add 1 to x at the end of each loop) Start y at 0 and loop while y < the picture height (add 1 to y at the end of each loop) Get the pixel at this location Get the color at the pixel Lighten (brighten) the color Set the color for the pixel to the lighter color Georgia Institute of Technology

Lighten the Color with a Nested Loop /** * Method to lighten the colors using a nested for loop */ public void lighten() { Pixel pixel = null; Color color = null; // loop through the columns (x direction) for (int x = 0; x < getWidth(); x++) // loop through the rows (y direction) for (int y = 0; y < getHeight(); y++) // get the current pixel pixel = getPixel(x,y); // get the current color color = pixel.getColor(); // get a lighter color color = color.brighter(); // set the pixel color to the lighter color pixel.setColor(color); } Georgia Institute of Technology

Georgia Institute of Technology Nested While Loops public void lightenWhileNested() { Pixel pixel = null; Color color = null; // loop through the columns (x direction) int x = 0; while (x < getWidth()) // loop through the rows (y direction) int y = 0; while(y < getHeight()) // get the current pixel pixel = getPixel(x,y); // get the current color color = pixel.getColor(); // get a lighter color color = color.brighter(); // set the pixel color to the lighter color pixel.setColor(color); // increment y y++; } // increment x x++; public void lighten() { Pixel pixel = null; Color color = null; // loop through the columns (x direction) for (int x = 0; x < getWidth(); x++) // loop through the rows (y direction) for (int y = 0; y < getHeight(); y++) // get the current pixel pixel = getPixel(x,y); // get the current color color = pixel.getColor(); // get a lighter color color = color.brighter(); // set the pixel color to the lighter color pixel.setColor(color); } You can use nested while loops instead of nested for loops. The two are equivalent. Programmers prefer the for loop when doing loops a set number of times because they require less coding and are less error prone. Georgia Institute of Technology

Changing to Nested Loop Exercise Change the method clearBlue() to use a nested for loop to loop through all the pixels Run the method again to check that it still works Check that the blue values are all 0 using picture.explore() Georgia Institute of Technology

Georgia Institute of Technology Vertical Mirroring What if we want to pretend to place a mirror in the middle of the picture We would see the left side of the picture mirrored on the right side Georgia Institute of Technology

Mirror Vertical Algorithm Loop through all the rows (y starts at 0, increments by 1, and is less than the picture height) Loop with x starting at 1 and x less than the midpoint (mirror point) value Get the left pixel at midpoint – x Get the right pixel at midpoint + x Set the color for the right pixel to be the color of the left pixel 1 2 3 4 5 1 2 3 5 4 Georgia Institute of Technology

Mirror Vertical Algorithm to Code We are going to need the midpoint int midpoint = getWidth() / 2; Loop through the rows (y values) for (int y = 0; y < getHeight(); y++) { Loop through x values (starting at 1) for (int x = 1; x < midpoint; x++) { Set right pixel color to left pixel color Pixel leftPixel = getPixel(midpoint – x, y); Pixel rightPixel = getPixel(midpoint + x, y); rightPixel.setColor(leftPixel.getColor()); We don’t need to calculate the midpoint every time through the loop so calculate it once before the loop. Georgia Institute of Technology

Mirror Vertical Method /** * Method to mirror around a vertical line in the middle of the picture * based on the width */ public void mirrorVertical() { int mirrorPoint = getWidth() / 2; Pixel leftPixel = null; Pixel rightPixel = null; // loop through the rows for (int y = 0; y < getHeight(); y++) // loop from 1 to just before the mirror point for (int x = 1; x < mirrorPoint; x++) leftPixel = getPixel((mirrorPoint - x), y); rightPixel = getPixel((mirrorPoint + x), y); rightPixel.setColor(leftPixel.getColor()); } Georgia Institute of Technology

Georgia Institute of Technology Mirror Horizontal What about mirroring around a mirror held horizontally in the vertical center of the picture? Like the reflection in a lake? Georgia Institute of Technology

Mirror Horizontal Algorithm Get the vertical midpoint Picture height / 2 Loop through all the x values Loop from y=1 to y < vertical midpoint Get the top pixel Vertical midpoint - y Get the bottom pixel Vertical midpoint + y Set the bottom pixel’s color to the top pixel color 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 Georgia Institute of Technology

Mirror Horizontal Exercise Write the method to mirror the top half of the picture to the bottom half. Georgia Institute of Technology

Using Picture.getMediaPath(fileName) Gets the full path name for the file with the passed short name santa.jpg Defaults to using the directory c:\intro-prog-java\mediasources\ Set it to a directory using Picture.setMediaPath(“c:/intro-prog-java/mediasources/"); The method getMediaPath is a class method in the Picture class. Georgia Institute of Technology

Copying Pixels to a New Picture Need to track the source picture x and y And the target picture x and y We can use blank pictures As the target picture Several blank pictures are available 640x480.jpg 7inX95in.jpg 1 2 3 4 1 2 3 4 Georgia Institute of Technology

Georgia Institute of Technology What type of method? What type of method should this be? Object Take the source picture as input The target picture is the current object Copy the source pixels to the target picture Class Take the source file name and target file name as input Create the source picture Create the target picture Georgia Institute of Technology

Copy Picture Algorithm Copy a picture to the 7 by 9.5 inch blank picture Create the source and target picture objects Loop through the source picture pixels Get the source and target pixels Set the color of the target pixel to the color of the source pixel Show the source and target pictures Return the target picture Georgia Institute of Technology

Georgia Institute of Technology Copy Algorithm to Code Create the source and target picture objects String sourceFile = Picture.getMediaPath("KatieFancy.jpg"); Picture sourcePicture = new Picture(sourceFile); String targetFile = Picture.getMediaPath("7inx95in.jpg"); Picture targetPicture = new Picture(targetFile); Loop through the source pixels for (int sourceX = 0, targetX = 0; sourceX < sourcePicture.getWidth(); sourceX++, targetX++) { for (int sourceY = 0, targetY =0; sourceY < sourcePicture.getHeight(); sourceY++, targetY++) { Georgia Institute of Technology

Copy Algorithm to Code – Cont Get the source and target pixels Pixel sourcePixel = sourcePicture.getPixel(sourceX,sourceY); Pixel targetPixel = targetPicture.getPixel(targetX,targetY); Set the color of the target pixel to the color of the source pixel targetPixel.setColor(sourcePixel.getColor()); Show the source and target pictures sourcePicture.show(); targetPicture.show(); Georgia Institute of Technology

Georgia Institute of Technology Copy Method public static Picture copyKatie() { String sourceFile = Picture.getMediaPath("KatieFancy.jpg"); Picture sourcePicture = new Picture(sourceFile); String targetFile = Picture.getMediaPath("7inx95in.jpg"); Picture targetPicture = new Picture(targetFile); Pixel sourcePixel = null; Pixel targetPixel = null; // loop through the columns for (int sourceX = 0, targetX=0; sourceX < sourcePicture.getWidth(); sourceX++, targetX++) // loop through the rows for (int sourceY = 0, targetY =0; sourceY < sourcePicture.getHeight(); sourceY++, targetY++) // set the target pixel color to the source pixel color sourcePixel = sourcePicture.getPixel(sourceX,sourceY); targetPixel = targetPicture.getPixel(targetX,targetY); targetPixel.setColor(sourcePixel.getColor()); } // show the source and target pictures sourcePicture.show(); targetPicture.show(); return targetPicture; Georgia Institute of Technology

Copy to an Upper Left Location How would you copy a picture to a location in another picture (like 100, 100)? Specified as the upper left corner You still copy all the source pixels But the target x and y start at the specified location 100, 100 Georgia Institute of Technology

Copy to Position Exercise Copy the picture greenAlien.jpg To location 100, 100 in 7inx95in.jpg Return the target picture Georgia Institute of Technology

Georgia Institute of Technology Cropping We can copy just part of a picture to a new picture Just change the start and end source x and y values to the desired values Use picture.explore() to find the x and y values What are the x and y values to get the face of the girl in KatieFancy.jpg? Georgia Institute of Technology

Georgia Institute of Technology Copy Face Method public static Picture copyKatiesFace() { String sourceFile = Picture.getMediaPath("KatieFancy.jpg"); Picture sourcePicture = new Picture(sourceFile); String targetFile = Picture.getMediaPath("7inx95in.jpg"); Picture targetPicture = new Picture(targetFile); Pixel sourcePixel = null; Pixel targetPixel = null; // loop through the columns for (int sourceX = 70, targetX = 100; sourceX <= 136; sourceX++, targetX++) // loop through the rows for (int sourceY = 3, targetY = 100; sourceY <= 81; sourceY++, targetY++) // set the target pixel color to the source pixel color sourcePixel = sourcePicture.getPixel(sourceX,sourceY); targetPixel = targetPicture.getPixel(targetX,targetY); targetPixel.setColor(sourcePixel.getColor()); } // show the source and target pictures sourcePicture.show(); targetPicture.show(); return targetPicture; Georgia Institute of Technology

What makes a Good Method? A method should do one and only one thing Accomplish some task The name should tell you what it does A method can call other methods to do some of the work Procedural decomposition We shouldn’t copy code between methods We should make general methods that are reusable A method should be in the class that has the data the method is working on Georgia Institute of Technology

Where the last two methods general? We specified the file to copy from the and file to copy to in the method Meaning if would either need to change the method or make another method to copy a different picture Both methods were class methods Even though they do operate on picture objects How about a method that copies a picture object to the current picture object? Georgia Institute of Technology

General Copy Algorithm Create an object method that copies pixels from a passed source picture Giving a start x and y and end x and y for the source picture If the start x and y and end x and y cover the entire picture then the whole picture will be copied If the start x and y and end x and y are part of the picture then cropping will occur To the current picture object with a target start x and target start y If the start x and y are 0 then it copies to the upper left corner Georgia Institute of Technology

General Copy Algorithm Loop through the x values between xStart and xEnd (inclusive) Loop through the y values between yStart and yEnd (inclusive) Get the pixel from the source picture for the current x and y values Get the pixel from the target picture for the targetStartX + x and targetStartY + y values Set the color in the target pixel to the color in the source pixel Georgia Institute of Technology

Georgia Institute of Technology Copy Method /** * Method to copy from the passed source picture to current picture object * The copying will start at startX, startY, and end at endX and endY * The copy will be placed starting at targetStartX, targetStartY * @param sourcePicture the source picture to copy from * @param startX the starting x value in the source picture * @param startY the starting y value in the source picture * @param endX the ending x value in the source picture * @param endY the ending y value in the source picture * @param targetStartX the starting x value in the current picture * @param targetStartY the starting y value in the current picture */ public void copy(Picture sourcePicture, int startX, int startY, int endX, int endY, int targetStartX, int targetStartY) { Pixel sourcePixel = null; Pixel targetPixel = null; // loop through the x values for (int x = startX; x <= endX; x++) // loop through the y values for (int y = startY; y <= endY; y++) sourcePixel = sourcePicture.getPixel(x,y); targetPixel = this.getPixel(targetStartX + x, targetStartY + y); targetPixel.setColor(sourcePixel.getColor()); } Georgia Institute of Technology

Rewrite Methods Exercise Type the copy method in Picture.java Rewrite copyKatie() and copyKatiesFace() methods to use the new copy method Run the methods to make sure they still work Georgia Institute of Technology

Georgia Institute of Technology Right Rotation 1 2 To rotate an image right 90 degrees still copy all the pixels But they go to different locations in the target Column values become row values target y = source x target x = source height – 1 – source y 1 2 3 4 5 6 1 1 4 1 5 2 6 3 1 2 Georgia Institute of Technology

Georgia Institute of Technology Left Rotation 1 2 To rotate an image left 90 degrees still copy all the pixels But they go to different locations in the target Column values become row values target x = source y target y = source width -1 – source x 1 2 3 4 5 6 1 1 3 6 2 5 1 4 1 2 Georgia Institute of Technology

Left Rotation Algorithm Create the source and target picture objects Loop through the source x (0-width-1) Loop through the source y (0-height-1) Get the source pixel at the x and y values Get the target pixel with the x equal the source y value and the y equal the source picture width – 1 minus the source x Copy the color from the source pixel to the target pixel Georgia Institute of Technology

Georgia Institute of Technology Left Rotation Method public static Picture copyKatieLeftRotation() { String sourceFile = Picture.getMediaPath("KatieFancy.jpg"); Picture sourcePicture = new Picture(sourceFile); String targetFile = Picture.getMediaPath("7inx95in.jpg"); Picture targetPicture = new Picture(targetFile); Pixel sourcePixel = null; Pixel targetPixel = null; // loop through the columns for (int sourceX = 0; sourceX < sourcePicture.getWidth(); sourceX++) // loop through the rows for (int sourceY = 0; sourceY < sourcePicture.getHeight(); sourceY++) // set the target pixel color to the source pixel color sourcePixel = sourcePicture.getPixel(sourceX,sourceY); targetPixel = targetPicture.getPixel(sourceY, sourcePicture.getWidth() - 1 - sourceX); targetPixel.setColor(sourcePixel.getColor()); } // show the source and target pictures sourcePicture.show(); targetPicture.show(); return targetPicture; Georgia Institute of Technology

Right Rotation Exercise Write the method to rotate the picture of Katie to the right instead of to the left Try out the method Can you break the method into two methods? One class method One object method Georgia Institute of Technology

Georgia Institute of Technology Scaling You can make a picture smaller Faster to download on the web Increment the source x and y by a number larger than 1 Don’t use all the source pixels in target You can make a picture larger Show more detail Copy the same source x and y to more than one target x and y Use source pixels more than once in target Georgia Institute of Technology

Scaling Down the Daisy Picture The daisyMed.jpg is 302 pixels wide and 202 pixels high If we copy every other pixel we will have a new picture with width (302 / 2 = 151) and height (202 / 2 = 101) 1 2 3 4 5 6 7 8 1 3 5 7 Georgia Institute of Technology

Scaling Down Algorithm Get the source picture and target picture Loop with source x starting at 0 and target x starting at 0 as long as < source width Increment the source x by 2 each time through the loop, increment the target x by 1 Loop with source y starting at 0 and target y starting at 0 as long as < source height Increment the source y by 2 each time through the loop, increment the target y by 1 Copy the color from the source to target pixel Georgia Institute of Technology

Georgia Institute of Technology Scaling Down Method public static Picture copyFlowerSmaller() { Picture flowerPicture = new Picture(Picture.getMediaPath("daisyMed.jpg")); Picture canvasPicture = new Picture(Picture.getMediaPath("640x480.jpg")); Pixel sourcePixel = null; Pixel targetPixel = null; // loop through the columns for (int sourceX = 0, targetX=0; sourceX < flowerPicture.getWidth(); sourceX+=2, targetX++) // loop through the rows for (int sourceY=0, targetY=0; sourceY < flowerPicture.getHeight(); sourceY+=2, targetY++) sourcePixel = flowerPicture.getPixel(sourceX,sourceY); targetPixel = canvasPicture.getPixel(targetX,targetY); targetPixel.setColor(sourcePixel.getColor()); } // show the resulting picture canvasPicture.show(); return canvasPicture; Georgia Institute of Technology

Thinking Through Scaling Up Copy each pixel in the source multiple times to the target Source (0,0) Target (0,0) Source (0,0) Target(1,0) Source (1,0) Target(2,0) Source (1,0) Target(3,0) Source (2,0) Target(4,0) Source (2,0) Target(5,0) Source (0,0) Target(0,1) Source (0,0) Target(1,1) 1 2 1 2 3 4 5 6 1 1 2 3 4 5 1 2 3 4 5 6 1 What could we add to source x and source y so that it is 0 twice, then 1 twice, then 2 twice, etc. Remember that 0.5 is 0 when you cast to integer. 2 3 Georgia Institute of Technology

Georgia Institute of Technology Scaling Up Algorithm Get the source picture and target picture Loop with source x starting at 0 and target x starting at 0 as long as < source width Increment the source x by 0.5 each time through the loop, increment the target x by 1 Loop with source y starting at 0 and target y starting at 0 as long as < source height Increment the source y by 0.5 each time through the loop, increment the target y by 1 Copy the color from the source to target pixel The source x and y will need to be double variables. Cast them to int to lose the fractional part to get the pixel x and y. Georgia Institute of Technology

Georgia Institute of Technology Scaling Up Exercise Write a method to scale up the daisyMed.jpg picture when you copy it to 640x480.jpg Save the result to a file using picture.write(“file”); Scale up the saved picture Georgia Institute of Technology

Georgia Institute of Technology Create a Collage One of the things that you can do with pictures is create a collage There are two pictures of flowers flower1.jpg flower2.jpg Both pictures are 100 pixels wide The target picture is created from file 640x480.jpg The Picture’s bottom left is at x = 0 y = height - 5 Georgia Institute of Technology

Create Collage Algorithm Create the picture objects using flower1.jpg as source1Picture using flower2.jpg as source2Picture using 640x480.jpg as the targetPicture Set targetStartX to 0 Set targetBottomY to the targetPicture height – 5 5 pixels from bottom of picture Georgia Institute of Technology

Create Collage Algorithm - Cont Copy from source1Picture to the targetPicture starting at (0,0) ending at (width-1,height-1) to targetPicture (targetStartX,targetBottomY - height) Add the width of source1Picture to targetStartX Copy from source2Picture to the targetPicture starting at (0,0) ending at (width-1,height-1) to targetPicture(targetStartX,targetBottomY - height) Add the width of source2Picture to targetStartX Negate source1Picture Copy from source1Picture to the targetPicture starting at (0,0) ending at (width-1,height-1) to targetPicture(targetStartX,targetBottomY - height) Clear the blue from source2Picture Copy from source1Picture to the targetPicture starting at (0,0) ending at (width-1, height-1) to targetPicture(targetStartX,targetBottomY - height) Show the target picture Return the target picture Georgia Institute of Technology

Create Collage Exercise Try creating a collage At least 4 copies of an image in it The original image and 3 changes to the original image Scale, rotate, crop, change colors Then mirror the whole picture horizontally Save your collage using picture.write(fileName); See http://coweb.cc.gatech.edu/cs1315/916 for some examples from Georgia Tech students. Georgia Institute of Technology

Georgia Institute of Technology Summary A two-dimensional array has rows and columns Create a 2-d array by giving the number of rows and columns int[][] grid = new int[5][3] // 5 rows, 3 columns Access a 2-d array element int value = grid[0][0]; // first element Use nested loops to work with 2-d arrays One loop inside of another’s block Georgia Institute of Technology