Two-Dimensional Arrays and the Game of Life Grid

1. Two-Dimensional Arrays and the Game of Life Grid

Title

Think Java 2e · Chapter 15 · Arrays of Arrays

Sections 15.1-15.6 · pp. 249-257

2. What you will be able to do

Objectives

This lesson follows Think Java 2e, Chapter 15 (Arrays of Arrays), Sections 15.1-15.6, pp. 249-257. Everything on these slides can be checked against those pages.

1. State the three rules of the Game of Life and predict a few time steps by hand.

2. Declare and populate a two-dimensional array, and explain what array[r][c] actually does.

3. Explain row-major order and why numRows and numCols are written differently.

4. Traverse a 2D array with nested loops, both standard and enhanced.

5. Extend Canvas and provide draw and paint methods.

6. Choose accessor names that suit the problem rather than the field.

• 15.1 — Conway's Game of Life
• 15.2 — The Cell Class
• 15.3 — Two-Dimensional Arrays
• 15.4 — The GridCanvas Class
• 15.5 — Other Grid Methods
• 15.6 — Starting the Game

3. Retrieve before you read

Warm-up

Three things you already have.

4. A zero-player game

Concept

The Game of Life was developed by John Conway and popularized in 1970 in Martin Gardner's column in Scientific American. Conway calls it a zero-player game because no players are needed to choose strategies or make decisions. After you set up the initial conditions, you watch the game play itself.

• 15.1 — Conway's Game of Life and its three rules
• 15.2 — the Cell class
• 15.3 — two-dimensional arrays
• 15.4 — the GridCanvas class
• 15.5–15.6 — grid methods, and starting the game

Downey & Mayfield, Think Java, 2nd edition (Green Tea Press / O'Reilly, 2020) — Think Java 2e, Chapter 15 (Arrays of Arrays), Sections 15.1-15.6, pp. 249-257 — Chapter 15 opens on printed page 249.

5. The rules

Section

Section 15.1

6. Three rules, applied to every cell at once

Concept

The game proceeds in time steps, during which each cell interacts with its neighbors in the eight adjacent cells. At each time step, the following rules are applied.

// A live cell with FEWER THAN TWO live neighbors
//    dies, as if by underpopulation.
//
// A live cell with MORE THAN THREE live neighbors
//    dies, as if by overpopulation.
//
// A dead cell with EXACTLY THREE live neighbors
//    becomes a live cell, as if by reproduction.

Each cell is either alive or dead; the color of the cell indicates its state. Note that the rules never mention how a cell got to be alive — only its current state and its neighbour count matter, which is what makes the whole thing computable in one pass.

7. Consequences worth noticing

Notation

Notice some consequences of these rules. Each one is a prediction you can check by hand.

That turns out to be more interesting than it sounds. Three rules, no randomness, no input — and behaviour nobody can predict without running it.

8. The Blinker

Worked example

Another initial configuration is shown in Figure 15.2. Three cells in a row, and it never settles.

9. A live cell with two live neighbours

Prediction

Check every rule.

// dies if fewer than 2
// dies if more than 3
// a dead cell comes alive at exactly 3

10. What the program has to do

Concept

The rules dictate the structure of the code before a line is written.

In the following sections, we'll implement the Game of Life in Java. We'll first implement the cells, then the grid of cells, and finally the game itself. Bottom-up design, exactly as Lesson 14b named it — the rules already list the pieces.

11. Updating cells one at a time

Trap

for each cell {
    int n = countAlive(r, c);
    updateCell(cell, n);        // changes the grid immediately
}

int[][] counts = countNeighbors();   // pass 1: read only
updateGrid(counts);                  // pass 2: write only

12. Alive or dead next step?

Definition probe

Apply the rules to each case.

13. What happens to a single live cell?

Prediction

One cell, no neighbours.

// a live cell with fewer than two live neighbors dies

14. Why is a square stable?

Socratic

Four cells in a two-by-two block never change.

15. The Cell class

Section

Section 15.2

16. Three constants and one variable

Concept

When drawing a cell, we'll need to know its location on the screen and size in pixels. To represent the location we use the x and y coordinates of the upper-left corner, and for the size an integer.

public class Cell {
    private final int x;
    private final int y;
    private final int size;
    private int state;

    public Cell(int x, int y, int size) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.state = 0;
    }
}

Notice that x, y, and size are constants. Once the cell is created, we don't want it to move or change size. But state can and should change, so it is not a constant. That is Lesson 12a's final used selectively — three fields protected, one deliberately left open.

17. Why state is an int, not a boolean

Notation

A cell is alive or dead. That is exactly two values, and the book still uses an integer.

It's good practice to design classes to be reusable — but notice this is a judgement, not a law. The extra generality is nearly free here, which is what makes it worth taking.

18. Drawing a cell

Worked example

The following method draws a cell. Like the paint method in Appendix C, it takes a graphics context as a parameter.

public static final Color[] COLORS = {Color.WHITE, Color.BLACK};

public void draw(Graphics g) {
    g.setColor(COLORS[state]);
    g.fillRect(x + 1, y + 1, size - 1, size - 1);
    g.setColor(Color.LIGHT_GRAY);
    g.drawRect(x, y, size, size);
}

19. Why is state not final?

Prediction

The other three fields are.

private final int x;
private final int y;
private final int size;
private int state;

20. Accessors named for the problem

Concept

We also need methods to get and set the cell's state. We could just provide getState and setState, but the code will be more readable if we provide methods customized for the Game of Life.

public boolean isOff() {
    return state == 0;
}

public boolean isOn() {
    return state == 1;
}

public void turnOff() {
    state = 0;
}

public void turnOn() {
    state = 1;
}

The encoding is now invisible to callers. Nothing outside Cell needs to know that alive is 1 — and if (cell.isOn()) reads better than if (cell.getState() == 1) at every one of the dozens of places it appears. That is Lesson 13b's wrapper argument, applied to accessors.

21. Exposing the raw state

Trap

if (cell.getState() == 1) { ... }
cell.setState(0);
cell.setState(2);              // a state that does not exist

public void turnOn()  { state = 1; }
public void turnOff() { state = 0; }
public boolean isOn() { return state == 1; }

22. final or not?

Definition probe

Ask whether the value ever changes after construction.

23. Customised accessors

Fill the middle

Hide the encoding behind names from the game.

24. Why COLORS rather than an if?

Explain it to yourself

if (state == 1) g.setColor(BLACK); else g.setColor(WHITE); would work.

25. Two-dimensional arrays

Section

Section 15.3

26. An array of arrays

Concept

To represent a grid of cells, we can use a multidimensional array. To create a 2D array, we specify the number of rows and columns.

int rows = 4;
int cols = 3;
Cell[][] array = new Cell[rows][cols];

multidimensional array — An array with more than one dimension; a 2D array is an array of arrays.

row-major order — Storing data in a 2D array, first by rows and then by columns.

In Java, a 2D array is really an array of arrays. You can think of it as an array of rows, where each row is an array. That one sentence explains the syntax, the two length expressions, and why rows come first.

27. Rows first, then columns

Picture it

When we write array[r][c], Java uses the first index to select a row and the second index to select an element from the row.

This way of representing 2D data is known as row-major order. It is a convention, not a law of arrays — but it is Java's, and getting the two indexes the wrong way round is the single most common 2D-array bug.

28. Filling the array with Cells

Worked example

The array starts full of nulls, exactly as in Lesson 12b — only now there are two dimensions of them.

for (int r = 0; r < rows; r++) {
    int y = r * size;
    for (int c = 0; c < cols; c++) {
        int x = c * size;
        array[r][c] = new Cell(x, y, size);
    }
}

29. What is array[0] for a 2D array?

Prediction

A 2D array is an array of arrays.

Cell[][] array = new Cell[4][3];
// what is array[0]?

30. The two lengths

Concept

Because a 2D array is an array of arrays, its two dimensions are reached differently — and the asymmetry is not arbitrary.

public int numRows() {
    return array.length;        // how many rows
}

public int numCols() {
    return array[0].length;     // how long the first row is
}

numRows simply returns the length of the rows array. numCols returns the length of the first row, which is the number of columns. Since the rows all have the same length, we have to check only one. That last clause is an assumption — Java permits ragged arrays where rows differ in length.

31. Swapping the indexes

Trap

Cell[][] array = new Cell[5][10];   // 5 rows, 10 columns

array[7][2]      // ArrayIndexOutOfBoundsException - only 5 rows
array[2][7]      // fine
array[c][r]      // a bug that sometimes works

for (int r = 0; r < numRows(); r++) {
    for (int c = 0; c < numCols(); c++) {
        Cell cell = array[r][c];
    }
}

32. How many rows and columns?

Prediction

Row-major order.

Cell[][] array = new Cell[5][10];

33. Fill the grid

Fill the middle

Rows give y; columns give x.

34. Must every row be the same length?

Edge cases

numCols checks only array[0].

35. The GridCanvas class

Section

Sections 15.4-15.5

36. Is a Canvas, has a grid

Concept

Now that we have a Cell class and a way to represent a 2D array of cells, we can write a class to represent a grid of cells. Chapter 14's vocabulary describes it in one sentence.

public class GridCanvas extends Canvas {
    private Cell[][] array;

    public GridCanvas(int rows, int cols, int size) {
        array = new Cell[rows][cols];
        for (int r = 0; r < rows; r++) {
            int y = r * size;
            for (int c = 0; c < cols; c++) {
                int x = c * size;
                array[r][c] = new Cell(x, y, size);
            }
        }
        // set the canvas size
        setSize(cols * size, rows * size);
    }
}

Using vocabulary from the previous chapter, GridCanvas is a Canvas that has a 2D array of cells. By extending the Canvas class from java.awt, we inherit methods for drawing graphics on the screen. Both relationships from Lesson 14b, in one class declaration.

37. The three classes

Picture it

Conway has a GridCanvas, which is a Canvas and has Cells. Every arrow is one of the two relationships.

GridCanvas knows how to draw a grid; Conway knows the rules. That split is why the next lesson can add update to Conway without touching the drawing code at all.

38. Drawing the whole grid

Worked example

In fact, the code is surprisingly straightforward: to draw the grid, we simply draw each cell.

public void draw(Graphics g) {
    for (Cell[] row : array) {
        for (Cell cell : row) {
            cell.draw(g);
        }
    }
}

public void paint(Graphics g) {
    draw(g);
}

39. What type is row?

Prediction

The outer enhanced for loop over a 2D array.

for (Cell[] row : array) {
    for (Cell cell : row) {
        cell.draw(g);
    }
}

40. paint, repaint, and draw

Concept

Classes that extend Canvas are supposed to provide a method called paint that paints the contents of the Canvas.

It gets invoked when the Canvas is created and anytime it needs to be redrawn; for example, when its window is moved or resized. You never call paint yourself — the reason we use repaint is that it does not require a Graphics object as a parameter, and only the window system has one to give.

41. Calling paint yourself

Trap

private void mainloop() {
    while (true) {
        update();
        paint(???);          // where would the Graphics come from?
    }
}

private void mainloop() {
    while (true) {
        update();
        grid.repaint();      // asks the system to redraw
        ...
    }
}

42. Which loop for which method?

Definition probe

Enhanced when you do not need indexes; standard when you do.

43. Grid dimensions

Fill the middle

An array of rows.

44. Why does GridCanvas extend Canvas?

Explain it to yourself

It could have held a Canvas instead.

45. Starting the game

Section

Section 15.6

46. The Conway class

Concept

Now we're ready to implement the game. To encapsulate the rules of GoL, we define a class named Conway. The Conway class has a GridCanvas that represents the state of the game.

public class Conway {
    private GridCanvas grid;

    public Conway() {
        grid = new GridCanvas(5, 10, 20);
        grid.turnOn(2, 1);
        grid.turnOn(2, 2);
        grid.turnOn(2, 3);
        grid.turnOn(1, 7);
        grid.turnOn(2, 7);
        grid.turnOn(3, 7);
    }
}

This constructor makes a GridCanvas with 5 rows and 10 columns, with cells that are 20 pixels wide and high. It then sets up the initial conditions. Two blinkers, out of phase — so the display is never still.

47. The initial configuration

Picture it

Six calls to turnOn, and this is the grid they produce.

Both are blinkers, so after one time step the left becomes vertical and the right becomes horizontal — and they swap back and forth forever. Being out of phase makes the animation obvious.

48. main, and the window

Worked example

Before we implement the rest of the game, we'll write a main method that creates a Conway object and displays it.

public static void main(String[] args) {
    String title = "Conway's Game of Life";
    Conway game = new Conway();
    JFrame frame = new JFrame(title);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setResizable(false);
    frame.add(game.grid);
    frame.pack();
    frame.setVisible(true);
    game.mainloop();
}

49. How big is the window?

Prediction

GridCanvas sets its own size.

grid = new GridCanvas(5, 10, 20);
// inside the constructor:
setSize(cols * size, rows * size);

50. Why JFrame rather than Frame

Concept

The book uses a Swing class inside an otherwise AWT program, and its own footnote says why.

We are using JFrame (in javax.swing) instead of Frame (in java.awt) for simplicity. Frame does not provide a default close operation; it requires you to implement a method to be called when the user closes the window. A small convenience, chosen so the chapter can stay on 2D arrays rather than on window events — which are Lesson 17c's subject.

51. Reaching into another object's field from main

Trap

frame.add(game.grid);       // grid is private!

// legal ONLY because main is a static method
// inside the Conway class itself

// inside Conway - fine as written
frame.add(game.grid);

// if main lived elsewhere:
public GridCanvas getGrid() {
    return grid;
}
frame.add(game.getGrid());

52. What does the initial grid show?

Prediction

Six turnOn calls.

grid.turnOn(2, 1);
grid.turnOn(2, 2);
grid.turnOn(2, 3);

53. Match the method to who calls it

Matching

Some methods you call; some call you.

54. Why put the pattern in the constructor?

Real world

The starting cells are hard-coded.

55. One-dimensional against two-dimensional

Comparison

Fill the blanks.

Every row follows from one fact: a 2D array is an array of arrays. Once that is fixed in your head, none of the syntax has to be memorised separately.

56. The pattern to carry away

Pattern

Traversing a 2D array, and choosing which kind of loop.

// when you need the indexes - standard loops
for (int r = 0; r < numRows(); r++) {
    for (int c = 0; c < numCols(); c++) {
        counts[r][c] = countAlive(r, c);
    }
}

// when you only need the elements - enhanced loops
for (Cell[] row : array) {
    for (Cell cell : row) {
        cell.draw(g);
    }
}

• A 2D array is an array of arrays — that one fact explains all the syntax.
• Elements start as null for object types, as always.
• GridCanvas IS-A Canvas and HAS-A Cell[][] — both Chapter 14 relationships in one class.
• You write paint; the window system calls it. You call repaint.
• Name accessors for the problem: isOn and turnOn, not getState.

57. Check: dimensions

Check

Work it out before you click.

Cell[][] array = new Cell[5][10];

58. Check: the enhanced loop

Check

Work it out before you click.

for (Cell[] row : array) {
    for (Cell cell : row) {
        cell.draw(g);
    }
}

59. Check: relationships

Check

Work it out before you click.

public class GridCanvas extends Canvas {
    private Cell[][] array;
}

60. Grids are everywhere

Real world

A 2D array of small objects, updated on a clock, is one of the most reused shapes in programming.

61. How sure are you?

Commit first

Commit to an answer and to your confidence.

62. Explain it to someone else

Explain it

Two minutes, out loud.

63. Exit ticket

Exit ticket

One question before you close the deck.

64. Draw the whole lesson

Connect it up

One page, from memory.

65. Recap

Recap

Six sections that build the board before the game.

• Three rules: die under two neighbours, die over three, come alive at exactly three.
• Cells update simultaneously, so counts must be taken before any change.
• Cell has three final fields and one that changes — x, y and size are constants; state is not.
• state is an int rather than a boolean, so the class stays reusable and can index COLORS.
• Accessors named for the problem: isOn, isOff, turnOn, turnOff.
• A 2D array is an array of arrays, stored in row-major order.
• array.length is rows; array[0].length is columns.
• GridCanvas IS-A Canvas and HAS-A grid — and it provides paint, which the window system calls.