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

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

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)
picture.getPixel(x,y) returns the pixel at that location x y
Georgia Institute of Technology

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
Georgia Institute of Technology

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

36. 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
sourcePicture the source picture to copy from
startX the starting x value in the source picture
startY the starting y value in the source picture
endX the ending x value in the source picture
endY the ending y value in the source picture
targetStartX the starting x value in the current picture
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

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

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

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

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

41. 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() sourceX);
targetPixel.setColor(sourcePixel.getColor()); }
// show the source and target pictures
sourcePicture.show();
targetPicture.show();
return targetPicture;
Georgia Institute of Technology

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

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

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

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

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

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

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

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

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

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

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

53. 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 for some examples from Georgia Tech students.
Georgia Institute of Technology

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