1 / 65

Two-Dimensional Arrays and Nested Loops

Two-Dimensional Arrays and Nested Loops. 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?. What is a two-dimensional array?.

dianne
Download Presentation

Two-Dimensional Arrays and Nested Loops

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Two-Dimensional Arrays and Nested Loops

  2. 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?

  3. 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) • pictureObj.getPixel(x,y) returns the pixel at that location x y

  4. 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

  5. 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

  6. 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

  7. 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

  8. Lighten the Color with a Nested Loop public void lighten() { Pixel pixelObj = null; Color colorObj = null; // loop through the columns (x direction) for (int x = 0; x < this.getWidth(); x++) { // loop through the rows (y direction) for (int y = 0; y < this.getHeight(); y++) { Georgia Institute of Technology

  9. Lighten - Continued // get pixel at the x and y location pixelObj = this.getPixel(x,y); // get the current color colorObj = pixelObj.getColor(); // get a lighter color colorObj = colorObj.brighter(); // set the pixel color to the lighter color pixelObj.setColor(colorObj); } } }

  10. Trying the Lighten Method • In the interactions pane: String file = “c:/intro-prog-java/mediasources/caterpillar.jpg”; Picture p1 = new Picture(file); p1.explore(); p1.lighten(); p1.explore();

  11. 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 pictureObj.explore()

  12. 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

  13. 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 0 and x less than the midpoint (mirror point) value • Get the left pixel at x and y • Get the right pixel at width – 1 - x • Set the color for the right pixel to be the color of the left pixel

  14. Mirror Vertical Algorithm to Code • We are going to need the midpoint int midpoint = this.getWidth() / 2; • Loop through the rows (y values) for (int y = 0; y < this.getHeight(); y++) { • Loop through x values (starting at 1) for (int x = 0; x < midpoint; x++) { • Set right pixel color to left pixel color Pixel leftPixel = this.getPixel(x, y); Pixel rightPixel = this.getPixel(this.getWidth() - 1 - x, y); rightPixel.setColor(leftPixel.getColor());

  15. Mirror Vertical Method public void mirrorVertical() { int mirrorPoint = this.getWidth() / 2; Pixel leftPixel = null; Pixel rightPixel = null; // loop through the rows for (int y = 0; y < this.getHeight(); y++) { // loop from 0 to just before the mirror point for (int x = 0; x < mirrorPoint; x++) {

  16. Mirror Vertical Method - Continued leftPixel = this.getPixel(x, y); rightPixel = this.getPixel(this.getWidth() – 1 – x, y); rightPixel.setColor(leftPixel.getColor()); } } }

  17. Using Picture.getMediaPath(fileName) • Gets the full path name for the file with the passed short name • redMotorcycle.jpg • Defaults to using the directory • c:\intro-prog-java\mediasources\ • Set it to a directory using • Picture.setMediaPath(“c:/book/media/"); • This will write out the directory name to a file and remember it till you change it

  18. Trying Mirror Vertical • Create the picture • Picture p1 = new Picture( FileChooser.getMediaPath(“caterpillar.jpg”); • Invoke the method on the picture • p1.mirrorVertical(); • Show the picture • p1.show();

  19. Mirror Horizontal • What about mirroring around a mirror held horizontally in the vertical center of the picture? • Like a reflection in a lake?

  20. Mirror Horizontal Algorithm • Get the vertical midpoint • Picture height / 2 • Loop through all the x values • Loop from y=0 to y < vertical midpoint • Get the top pixel • At x and y • Get the bottom pixel • Height - 1 - y • Set the bottom pixel’s color to the top pixel color

  21. Mirror Horizontal Exercise • Write the method to mirror the top half of the picture to the bottom half. • This is a motorcycle redMotorcycle.jpg • How about mirroring bottom to top?

  22. 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 a blank picture • As the target picture • Several blank pictures are available • 640x480.jpg • 7inX95in.jpg

  23. Copy Picture Algorithm • Copy a picture to the 7 by 9.5 inch blank picture • Create the target picture object • Invoke the method on the target picture • Create the source picture object • 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

  24. Copy Algorithm to Code • Loop through the source pixels // 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++) {

  25. Copy Algorithm to Code – Cont • Get the source and target pixels sourcePixel = sourcePicture.getPixel(sourceX,sourceY); targetPixel = this.getPixel(targetX,targetY); • Set the color of the target pixel to the color of the source pixel targetPixel.setColor(sourcePixel.getColor());

  26. Copy Method public void copyKatie() { String sourceFile = FileChooser.getMediaPath("KatieFancy.jpg"); Picture sourcePicture = new Picture(sourceFile); Pixel sourcePixel = null; Pixel targetPixel = null; // loop through the columns for (int sourceX = 0, targetX = 0; sourceX < sourcePicture.getWidth(); sourceX++, targetX++) {

  27. Copy Method - Continued // 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 = this.getPixel(targetX,targetY); targetPixel.setColor(sourcePixel.getColor()); } } }

  28. Trying the copyKatie Method • Create a picture object using the 7inX95in.jpg file in the mediasources directory • Picture p1 = new Picture(FileChooser.getMediaPath(“7inX95in.jpg”)); • Show the picture • p1.show(); • Invoke the method on this picture object • p1.copyKatie(); • Repaint the picture • p1.repaint();

  29. Result of copyKatie Method

  30. 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

  31. Copy to Position Exercise • Write a method copyRobot to copy • robot.jpg • To location • 100, 100 in 7inx95in.jpg • Test with String file = FileChooser.getMediaPath(“7inx95in.jpg”); Picture p = new Picture(file); p.copyRobot(); p.show();

  32. 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 pictureObj.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?

  33. Copy Face Method public void copyKatiesFace() { String sourceFile = FileChooser.getMediaPath("KatieFancy.jpg"); Picture sourcePicture = new Picture(sourceFile); Pixel sourcePixel = null; Pixel targetPixel = null; // loop through the columns for (int sourceX = 70, targetX = 100; sourceX < 135; sourceX++, targetX++) { // loop through the rows for (int sourceY = 3, targetY = 100; sourceY < 80; sourceY++, targetY++) {

  34. Copy Face Method - Continued // set the target pixel color to the source pixel color sourcePixel = sourcePicture.getPixel(sourceX,sourceY); targetPixel = this.getPixel(targetX,targetY); targetPixel.setColor(sourcePixel.getColor()); } } }

  35. Testing Copy Katie’s Face • Create a picture object • Picture p1 = new Picture(FileChooser.getMediaPath( “7inX95in.jpg”)); • Show the picture • p1.show(); • Invoke the method • p1.copyKatiesFace(); • Repaint the picture • p1.repaint();

  36. 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

  37. Where the last two methods general? • We specified the file to copy from in the method • Meaning we would need to change the method • or make another method • to copy a different picture

  38. General Copy Algorithm • Create a 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

  39. General Copy Algorithm • Loop through the x values between xStart and xEnd • Loop through the y values between yStart and yEnd • 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

  40. General Copy Method 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, tx = targetStartX; x < endX && x < sourcePicture.getWidth() && tx < this.getWidth(); x++, tx++) { // loop through the y values for (int y = startY, ty = targetStartY; y < endY && y < sourcePicture.getHeight() && ty < this.getHeight(); y++, ty++) { // copy the source color to the target color sourcePixel = sourcePicture.getPixel(x,y); targetPixel = this.getPixel(tx,ty); targetPixel.setColor(sourcePixel.getColor()); } } }

  41. 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

  42. Left Rotation 0 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 0 1 0 1 0 1 2

  43. Left Rotation Algorithm • Create the target picture object • Invoke the method on the target picture • Create the source picture object • Loop through the source x • Loop through the source y • 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

  44. Left Rotation Method public void copyKatieLeftRotation() { String sourceFile = FileChooser.getMediaPath("KatieFancy.jpg"); Picture sourcePicture = new Picture(sourceFile); Pixel sourcePixel = null; Pixel targetPixel = null; int targetX, targetY = 0; // loop through the columns for (int sourceX = 0; sourceX < sourcePicture.getWidth(); sourceX++) {

  45. Copy Katie Left Rotation // 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); targetX = sourceY; targetY = sourcePicture.getWidth() – 1 – sourceX; targetPixel = this.getPixel(targetX,targetY); targetPixel.setColor(sourcePixel.getColor()); } } }

  46. Testing Left Rotation • String file = FileChooser.getMediaPath( “7inX95in.jpg”); • Picture p = new Picture(file); • p.show(); • p.copyKatieLeftRotation(); • p.repaint();

  47. Right Rotation 0 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 0 1 0 1 0 1 2

  48. Right Rotation Exercise • Write the method to rotate the picture of Katie to the right instead of to the left • Try out the method String file = FileChooser.getMediaPath( “7inX95in.jpg”); Picture p = new Picture(file); p.show(); p.copyKatieRIghtRotation(); p.repaint(); • Can you make the method more general? • To work on any picture?

  49. 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

  50. Scaling Down the a Picture • passionFlower.jpg is 640pixels wide and 480 pixels high • If we copy every other pixel we will have a new picture with width (640 / 2 = 320) and height (480 / 2 = 240)

More Related