Building the Game of Life with Swift and SwiftUI

Biology and Technology are so much more similar than they are different — here’s a trek through cellular automata to showcase the wonderful world of Swift!

Understanding Conway’s Game of Life

Conway’s Game of Life is a classic example of a cellular automaton, a mathematical model for simulating complex systems. It was created by British mathematician John Conway in 1970 and has since become a fascinating subject of study and a popular programming exercise. The Game of Life is simple to understand yet capable of generating astonishingly complex and dynamic patterns.

Cellular Automata

Cellular automata (CA) are computational models composed of a grid of cells, each of which can be in one of several states. The grid is typically 2D, and the cells can transition between states according to a set of rules. These rules are applied simultaneously, meaning that the state of each cell in the next generation depends on the current state of that cell and its neighbors.

In the Game of Life, each cell is either alive (inhabited) or dead (empty), and the evolution of the system is determined by a few simple rules.

Rules of the Game of Life

The rules of Conway’s Game of Life are based on three fundamental conditions that dictate the life or death of a cell in the next generation:

1. Birth: If a dead cell has exactly three live neighbors, it becomes alive in the next generation. This simulates the idea that life can arise if the conditions are just right.
2. Survival: If a live cell has two or three live neighbors, it continues to live in the next generation. This represents the idea that life can persist with the right amount of company.
3. Death: In all other cases, a cell either dies due to underpopulation (fewer than two live neighbors) or overpopulation (more than three live neighbors).

Generations

The Game of Life progresses through discrete generations. Each generation represents a complete update of the entire grid, based on the application of the rules. The changes are calculated simultaneously, and the state of each cell in the new generation depends on the state of all the cells in the previous generation.

As the simulation advances, it’s fascinating to observe how simple rules can give rise to intricate and often unpredictable patterns. Some of these patterns are stable, some oscillate between different states, and others move across the grid, creating the illusion of life-like behavior.

Patterns and Phenomena

In the Game of Life, you’ll encounter various interesting patterns and phenomena, including:

• Still Lifes: These are patterns that remain unchanged from generation to generation. Examples include the block and the beehive.
• Oscillators: These patterns oscillate between two or more states. Common examples include the blinker and the toad.
• Spaceships: These are patterns that move across the grid, returning to their original position after a certain number of generations. The glider is a well-known example.

Conway’s Game of Life offers an excellent opportunity to explore the emergent behavior of systems governed by simple rules. In the following sections, we will delve into the code and mechanics of implementing this captivating simulation in Swift.

Breaking Down the Code

In this section, we’ll take a closer look at the Swift code you’ve provided for implementing Conway’s Game of Life. We’ll break down the code into its components and explain how each part contributes to the functioning of the simulation.

Data Structures: Cell, CellView, and GameView

Before we explore the mechanics of the game itself, let’s understand the data structures and UI components used in the code:

• Cell: The Cell structure represents an individual cell in the grid. Each cell can be either alive or dead.
• CellView: This SwiftUI view is responsible for rendering the visual representation of a cell. The color of the cell changes based on whether it is alive or dead. It also responds to tap gestures to toggle the cell’s state.
• GameView: This SwiftUI view sets up the grid of cells and manages the game loop. It uses a 2D array to maintain the state of all the cells in the grid. The @State property isPaused controls whether the simulation is running or paused.

The Game Loop

The heart of Conway’s Game of Life is the game loop. The gameLoop() function is responsible for advancing the simulation to the next generation. Here’s how it works:

• The loop schedules the function to run after a delay of 0.5 seconds using DispatchQueue.main.asyncAfter(). This creates a regular update interval for the simulation.
• It calculates the next generation of cells based on the current state. It does this by iterating through each cell, checking its neighbors, and applying the Game of Life rules.
• For each cell, it counts the number of alive neighbors and checks whether the cell should live, die, or remain in its current state according to the rules.
• After calculating the next generation, it updates the cells array with the new state.
• The game loop checks the isPaused flag. If the simulation is not paused, it schedules itself to run again after a delay, effectively creating an ongoing animation loop.

Finding Neighbors

To apply the Game of Life rules, you need to determine the neighbors of a cell. The neighbors(ofRow:andColumn:) function does just that. It finds the neighboring cells for a given cell’s position on the grid, taking care to exclude the cell itself from the list of neighbors.

4. User Controls — ControlsView The ControlsView allows users to interact with the simulation. It contains two buttons:

• The “Play” button toggles the isPaused flag, which controls whether the simulation is running.
• The “Reset” button resets the grid to its initial state.

5. The Main ContentView The ContentView serves as the main container for the simulation. It organizes the GameView and ControlsView components, enabling users to visualize and interact with the Game of Life.

With this breakdown of the code and its components, we’ve established a foundation for understanding how Conway’s Game of Life is implemented in Swift. In the next section, we’ll guide you through a step-by-step process of building the simulation, helping you understand the code and its functionalities at each stage.

Implementing the Game of Life Step by Step

In this section, we’ll walk you through the code provided, explaining each component and the logic behind it. By the end of this section, you’ll have a comprehensive understanding of how to build Conway’s Game of Life in Swift.

Step 1: Creating the Cell Structure

The Cell structure represents an individual cell in the grid. It has a single property, isAlive, which is a boolean flag indicating whether the cell is alive or dead.

struct Cell {
    var isAlive: Bool = false
}

Here, we define the basic building block of the grid. A cell can be in one of two states: alive or dead.

Step 2: CellView — Visual Representation of a Cell

The CellView is a SwiftUI view responsible for rendering the visual representation of a cell. It uses the isAlive property to determine the color of the cell: green for alive and black for dead.

struct CellView: View {
    @Binding var cell: Cell
    
    var color: Color {
        cell.isAlive ? Color.green : Color.black
    }
    
    var body: some View {
        Rectangle()
            .fill(color)
            .onTapGesture {
                cell.isAlive.toggle()
            }
    }
}

Here, we use SwiftUI to create a visual representation of a cell, with color changes based on the cell’s state. Additionally, tapping a cell toggles its isAlive property, allowing users to interact with the grid.

Step 3: GameView — Setting Up the Grid

The GameView SwiftUI view manages the grid of cells. It initializes a 2D array of Cell structures to represent the grid, with each cell initially set to the dead state.

struct GameView: View {
    @State var cells: [[Cell]] = Array(repeating: Array(repeating: Cell(), count: 10), count: 10)
    @Binding var isPaused: Bool

    // will implement this in step 4
}

Step 4: Rendering the Grid — ForEach and CellView

To render the grid, we use SwiftUI’s ForEach and HStack to create a 2D grid of CellView instances, one for each cell in the cells array.

var body: some View {
    ForEach(0..<cells.count, id: \.self) { row in
        HStack {
            ForEach(0..<self.cells[row].count, id: \.self) { column in
                CellView(cell: self.$cells[row][column])
            }
        }
    }
    .onAppear(perform: gameLoop)
    .onChange(of: isPaused) { newValue in
        if !newValue {
            gameLoop()
        }
    }
}

This code sets up a grid of cells by iterating through the rows and columns, creating a CellView for each cell in the grid. It also includes the onAppear and onChange modifiers to trigger the gameLoop() function when the view appears and when the isPaused state changes.

In the next steps, we’ll explore the core of the simulation, which is the gameLoop() function and the logic behind Conway's Game of Life rules.

Step 5: The Game Loop

The gameLoop() function is the heart of the simulation. It advances the grid of cells to the next generation based on the Game of Life rules.

func gameLoop() {
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
        var newCells = cells
        let numberOfRows = cells.count
        let numberOfColumns = cells[0].count

        for row in 0..<numberOfRows {
            for column in 0..<numberOfColumns {
                let cell = cells[row][column]
                let neighbors = self.neighbors(ofRow: row, andColumn: column)
                let aliveNeighbors = neighbors.filter { $0.isAlive }.count

                if cell.isAlive {
                    if aliveNeighbors < 2 || aliveNeighbors > 3 {
                        newCells[row][column].isAlive = false
                    }
                } else if aliveNeighbors == 3 {
                    newCells[row][column].isAlive = true
                }
            }
        }

        cells = newCells
        if !isPaused {
            self.gameLoop()
        }
    }
}

In this step, we examine the core of the simulation. The gameLoop() function is called at regular intervals, simulating the passage of time. It calculates the next generation of cells by applying the Game of Life rules.

The function does the following:

• It schedules itself to run after a delay of 0.5 seconds, creating an animation loop for the simulation.
• It calculates the new state of each cell based on its current state and the state of its neighbors. The rules for birth, survival, and death are applied.
• The newCells array stores the updated state for the entire grid. After processing all cells, the grid is updated.
• If the simulation is not paused, the gameLoop() function is called recursively, creating a continuous animation loop.

Step 6: Finding Neighbors

To apply the Game of Life rules, we need to find the neighbors of a cell. The neighbors(ofRow:andColumn:) function returns an array of neighboring cells for a given cell's position.

func neighbors(ofRow row: Int, andColumn column: Int) -> [Cell] {
    let numberOfRows = cells.count
    let numberOfColumns = cells[0].count
    var neighboringCells = [Cell]()

    for i in max(0, row - 1)...min(row + 1, numberOfRows - 1) {
        for j in max(0, column - 1)...min(column + 1, numberOfColumns - 1) {
            if !(i == row && j == column) {
                neighboringCells.append(cells[i][j])
            }
        }
    }
    return neighboringCells
}

This function finds and returns an array of neighboring cells for a given cell’s position. It ensures that the cell itself is not included in the list of neighbors.

In the final step of this section, we’ll wrap everything together by building the main ContentView that organizes the Game of Life simulation and user controls.

Step 7: The Main ContentView — Organizing the Simulation

The ContentView serves as the primary view for the Game of Life simulation. It organizes the GameView and ControlsView components, allowing users to visualize and interact with the simulation.

struct ContentView: View {
    @State var cells: [[Cell]] = Array(repeating: Array(repeating: Cell(), count: 10), count: 10)
    @State var isPaused: Bool = false

    var body: some View {
        VStack {
            GameView(cells: cells, isPaused: $isPaused)
            ControlsView(isPaused: $isPaused, onReset: reset)
        }
    }

    func reset() {
        cells = Array(repeating: Array(repeating: Cell(), count: 10), count: 10)
    }
}

In this step, we define the ContentView, which combines the GameView for visualizing the grid and the ControlsView for user interaction. The reset() function resets the grid to its initial state when the "Reset" button is pressed.

With these steps, we’ve built and explained the key components of the Conway’s Game of Life implementation in Swift. The grid, the game loop, and user controls work together to create a simple yet fascinating simulation of cellular automaton dynamics.

In the next section, we’ll provide further guidance on customizing and experimenting with the Game of Life and exploring its interesting patterns and behaviors.

A blank canvas

In this journey, through implementing Conway’s Game of Life in Swift we’ve explored the fundamental concepts of cellular automata, the rules of the Game of Life, and its captivating patterns and behaviors. We’ve broken down the code and walked through each part, enabling you to build your own simulation step by step — but don’t stop there!

Conway’s Game of Life is a compelling example of emergent behavior in complex systems. From simple rules, intricate patterns can emerge, demonstrating the power of computational models to mimic real-world phenomena. The ability to toggle the state of cells and observe how these changes propagate through generations makes the Game of Life an excellent tool for learning and experimentation.

As you build your own Game of Life simulation, you’re not limited to the 10x10 grid presented here. Feel free to customize the grid size, initial patterns, or even implement additional features. For example, you can create gliders or other interesting patterns by changing the initial configuration of cells.

Additionally, you can explore more advanced cellular automata and simulation techniques. There are many other cellular automata rulesets, such as “Highlife” and “Brian’s Brain,” each with its unique dynamics. This exploration can lead to a deeper understanding of complex systems, algorithmic thinking, and scientific modeling.

Remember that Conway’s Game of Life is not just about simulating life and death; it’s a canvas for creativity and experimentation. You can use it as a platform to explore concepts in data science, artificial intelligence, and even parallel computing.

Please share your creations with me on X (formerly known as Twitter) @oceanexplains