Computer Science 120
Introduction to Programming

Fall 2011, Siena College

2D Arrays - Project 5 Related

Overview

We will learn and practice some of the programming techniques that will help you complete Project 5.

The goal is to strengthen your understanding of these topics:

  1. Randomization
  2. 2-Dimensional Arrays

Part 1 - SwapArray

Click on two numbers below to swap the values. Repeatedly swap numbers to make the array order random:

We will now implement the SwapArray program. In order to swap values, we must keep track of the previous click. This is very similar to how the Game of Concentration must keep track of the previous selection.

Basic Setup

1. Create a new folder called lab10 on your z: drive.

2. Create a new BlueJ project called Concentration and save it in your lab10 folder.

3. Create a new class called SwapArray

Task 1: Creating the array

1. Add the following code to your SwapArray class

import objectdraw.*;

public class SwapArray extends WindowController {

   private Text[] mylist;
   private Text current;
   private Text previous;

   public void begin() {

      1. Assign mylist to a new Text array with a size of 10
   
      2. Loop 10 times, specifically for x = 0 to x < 10
   
      3. Assign mylist[x] to a new Text object that will store the value x
         Be sure to position each Text object appropriately
4. Set the font size of mylist[x] to 30 } }

2. Replace the 4 comments above with the appropriate line of code and test your code.

Key Concept: mylist[x] refers to one of ten different Text objects.

3. Add the following method to your class

public void onMousePress(Location p) {

   1. Loop for x = 0 to x < 10
   
      2. if mylist[x] contains p

         3. assign previous to current so we remember the previous click
   
         4. assign current to mylist[x] so we remember the current click

         5. if previous is not equal to null, i.e., we know we made a previous click
   
            6. Swap the values of previous and current
               First, we have to get current's text and store it in a new String call temp
            7. Second, we can set current's text to previous's text
            8. Third, we can set previous's text to temp
            9. Finally, we can set current to null to reset our selections
}

4. Replace the 9 comments above with the appropriate line of code and test your code.

5. Show your instructor your working program.

Part 2 - SwapMatrix

Click on two matrix positions below to swap the values. Repeatedly swap numbers to make the Matrix order random:

Task 2: Create the SwapMatrix program

1. Create a new class called SwapMatrix

2. Copy the code from SwapArray and paste it into your new SwapMatrix class

3. Be sure to change the class name from SwapArray to SwapMatrix.

4. Change mylist from an array of size 10 to a matrix of size 4 X 4.

5. Change your loops from single loops (0 to 9) to two nested loops (0 to 3).

6. Instead of using x and y as your loop counters use row and col, where row and col will range from 0 to 3

Concept - mylist[col][row]refers to the Text object at a certain column and row.

7. When creating each new Text object use the row counter to determine the Text objects vertical position and use the col counter to determine the horizontal position.

8. The text of value of the Text object should be the string (col, row) where row and col will range from 0 to 3 depending on the object's location.

Hint - Here is how to create each object value: String value = "(" + col + ", " + row + ")";

9. Show your instructor your working program.

Part 3 - RandomArray

Click "ADD TO MY LIST" to create a list of size 10. Then, click 'RANDOM REMOVE" all your items. Finally, click "SHOW RANDOM LIST" to see them in random order.

Task 3: Creating RandomArray

1. Create a new class called RandomArray

2. Add the following code to your RandomArray class

import objectdraw.*;
import java.util.*;
public class RandomArray extends WindowController {

   private ArrayList<Text> myList;
   private ArrayList<Text> randomList;
   private Text addButton;
   private Text removeButton;
   private Text randomButton;
   private int count;
   
   public void begin() {
     setSize(500, 400);
     myList = new ArrayList<Text>();
     randomList = new ArrayList<Text>();
     addButton = new Text("ADD TO MY LIST", 10, 10, canvas);
     removeButton = new Text("RANDOM REMOVE", 150, 10, canvas);
     randomButton = new Text("SHOW RANDOM LIST", 300, 10, canvas);
     count = 0;
   }
   
   public void onMousePress(Location p) {
     if (addButton.contains(p)) {
     
     }
     if (removeButton.contains(p)) {
     
     }
     if (randomButton.contains(p)) {
     
     }
   }
}

3. If the addButton is pressed do the following:

a. Create a new Text object and use the variable count as the text or value of the Text object. Also use count to determine the horizontal position. Make sure the Text object is positioned below the buttons.

b. Add this new Text object to myList.

c. Increment count by one.

4. If the removeButton is pressed do the following:

a. Create a new Random Integer Generator.

b. Use the Random Integer Generator to get a random integer n between zero and the size of myList

c. Use n to get a random Text object from myList and assign it to a Text object called random.

Text random = myList.get(n);

d. Hide this random Text object so you know its been selected

e. Add this random Text object to randomList

f. Remove the nth item from myList so it is not selected again.

5. If the randomButton is pressed do the following:

Display randomList right below myList

a. Loop from i = 0 to i < randomList.size()

b. Get the ith Text object and hide it (just in case it was already shown).

c. Use the value of i to move the Text object to the appropriate position

d. Show the Text object after it has been moved.

6. Show your instructor your working program.

Part 4 - RandomMatrix

Click "ADD TO MY LIST" to create a list of size 10. Then, click 'RANDOM REMOVE" to remove all your items. Finally, click "SHOW RANDOM MATRIX" to see them as a random matrix.

Task 4: Creating RandomMatrix

1. Create a new class called RandomMatrix

2. Copy all the code from RandomArray to RandomMatrix

3. When the addButton is pressed create two Text objects with the same value. Use count to determine the value. Position the second Text object slightly below the first Text object. Then, add the two Text objects to myList.

Note that myList will now have twice as many items, where each value will appear twice.

4. Change the randomButton code in the following way:

if (randomButton.contains(p)) {
   
 int size = randomList.size();
 
 double sqrt = Math.sqrt(size);
 
 int rows = (int) Math.floor(sqrt);
 
 int columns = (int) Math.floor(size/rows);

 while (rows*columns != size) {
    rows--;
    columns = (int) Math.floor(size/rows);
 }
 
 1. Set a counter i to zero.

 2. Set matrix equal to a new 2D array, use columns and rows to determine the size


 3. Write a nested for loop structure to iterate over each column and row,
    user c and r as  your loop counter variables
 
    a. Get the ith Text object from randomList and 
       assign it to a Text object called current
    
    b. Hide current (in case it was previously shown)
    
    d. Move current to an appropriate matrix location, 
       use the column and row number to properly move the Text object
       
    d. Show current
    
    e. Assign current to matrix[c][r] where c and r are your loop counters.
f. increment the counter i }

5. Add the 9 lines of codes described above (items 1-3 and items a-f).

Key Question:

What is the purpose of the while loop above? Specifically, how does the sqrt calculation and the while loop help us determine the number of rows and columns?

5. Finally, change your code so that instead of creating Text objects, you create VisibleImages.

a. Click "Save as" and save this file to your lab10 folder.

b. Unzip the file and move the images to your Concentration project folder.

There should be 12 images (p0.jpg, p1.jpg, p2.jpg, ..., p11.jpg).

c. You will have to change the data type of myList, randomList, and matrix to be arrays of VisibleImage instead of Text. Also, some other variables will have to be changed from VisibleImage to Text.

d. For the addButton, you will have to create new VisibleImages instead of Text objects.

Here is how to create a new VisibileImage based on the count:

new VisibleImage( getImage("p" + count + ".jpg"), count*100, 40, canvas);

Warning: There are only 12 images, so you can only click the "ADD" button 12 times.

e. You will have to increase the spacing to move the VisibleImages into a 2D matrix configuration. The images are 100 pixels wide and 150 pixels high.

6. Show your instructor your working program and be prepared to answer the Key Question above.