Visualizing Conway's Game of Life in Java (maybe using a GUI)?

Question

I just finished the implementation of Conway's Game of Life. I am wondering what would be a good way to visualize the progress of the generations. So far, I have a simple print statement:

        System.out.println();
        for (int j= 0; j < n; j++){
            for (int k= 0; k < n; k++){
                System.out.print(board[j][k] + "\t");
            }
            System.out.print("\n");
        }

This is ok for testing, but I really want to see some complex structures. My question is: how should I move forward with the visualization? Maybe I could build some sort of GUI (although I have not done this).

Here is the general idea of how I build the algorithm:

    int i= 0;
    while (i < 3){
        int[][] temp= board;
        for (int j= 0; j < n; j++){
            for (int k= 0; k < n; k++){
                //Update temp array according to Conway's rules. 
            }
        }
        board= temp;
        i++;
        //Print statements
    }

So, my exact question is: how can I build a GUI out of this?

Answer 1

I haven't touched this since ages ago, here is my implementation in java, this was fun.

Essentially I just draw live cells as 4x4 red squares. The update method has some if tests that can be optimized but I think the performance gain would be negligible. In the code below a tile with value 1 is alive, 0 is dead.

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.beans.Transient;
import java.util.Random;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;


@SuppressWarnings("serial")
public class ConwaysGameOfLife extends JPanel {

    private int[][] grid;
    private static final Random rnd = new Random();
    private int generationCounter;

    public ConwaysGameOfLife(int width, int height) {
        this.grid = new int[width / 4][height / 4];
        setupGrid();
    }

    private void setupGrid() {
        for (int[] row : grid) {
            for (int j = 0; j < row.length; j++) {
                if (rnd.nextDouble() < 0.92)
                    continue;
                row[j] = rnd.nextInt(2);
            }
        }
    }

    public void updateGrid() {
        for (int i = 0; i < grid.length; i++) {
            for (int j = 0; j < grid[i].length; j++) {
                applyRule(i, j);
            }
        }
    }


    private void applyRule(int i, int j) {
        int left = 0, right = 0, up = 0, down = 0;
        int dUpperLeft = 0, dUpperRight = 0, dLowerLeft = 0, dLowerRight = 0;

        if (j < grid.length - 1) {
            right = grid[i][j + 1];
            if(i>0)
                dUpperRight = grid[i - 1][j + 1];
            if (i < grid.length - 1)
                dLowerRight = grid[i + 1][j + 1];
        }

        if (j > 0) {
            left = grid[i][j - 1];
            if (i > 0)
                dUpperLeft = grid[i - 1][j - 1];
            if (i< grid.length-1)
                dLowerLeft = grid[i + 1][j - 1];
        }

        if (i > 0)
            up = grid[i - 1][j];
        if (i < grid.length - 1)
            down = grid[i + 1][j];

        int sum = left + right + up + down + dUpperLeft + dUpperRight
                + dLowerLeft
                + dLowerRight;

        if (grid[i][j] == 1) {
            if (sum < 2)
                grid[i][j] = 0;
            if (sum > 3)
                grid[i][j] = 0;
        }

        else {
            if (sum == 3)
                grid[i][j] = 1;
        }

    }

    @Override
    @Transient
    public Dimension getPreferredSize() {
        return new Dimension(grid.length * 4, grid[0].length * 4);
    }

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Color gColor = g.getColor();

        g.drawString("Generation: " + generationCounter++, 0, 10);
        for (int i = 0; i < grid.length; i++) {
            for (int j = 0; j < grid[i].length; j++) {
                if (grid[i][j] == 1) {
                    g.setColor(Color.red);
                    g.fillRect(j * 4, i * 4, 4, 4);
                }
            }
        }

        g.setColor(gColor);
    }

    public static void main(String[] args) {
        final ConwaysGameOfLife c = new ConwaysGameOfLife(800, 800);
        JFrame frame = new JFrame();
        frame.getContentPane().add(c);
        frame.pack();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLocationByPlatform(true);
        frame.setVisible(true);
        new Timer(100, new ActionListener() {

            @Override
            public void actionPerformed(ActionEvent e) {
                c.updateGrid();
                c.repaint();
            }
        }).start();
    }
}

Managed to get a nice pattern like this one at one run

Answer 2

For the gui: When i was in school we also implemented the game of life and we made a simple gui, but it was funny and a good practice. We created some kind of "cardlayout", putting in the life objects with a simple, small image in different colors. (color = state of the object). That's an easy way to visualize it. Moreover you can clearly see how the objects change according to their neighbours.

just found a nice thread, where somebody also implemented a gui (with screenshot). It's not the complete code, but you might get a clue how to do it.