Coding Assignment #11 – CA

Concept:

In this week’s assignment, I tried to recreate water droplet ripples using Cellular Automata. To do that, I created a simple cellular automaton with rules that propagate a disturbance/wave across the grid. Ripples start at the corners then in random positions in the grid and propagate outward based on the defined rules. As for user interaction, I gave the user the ability to modify the cell size up/down using the arrow keys to seem as if they are zooming in/out. I chose to use a grayscale palette for an aesthetic and more abstract look.

View post on imgur.com

Sketch:

Code Walkthrough:

Code link:https://editor.p5js.org/bdr/sketches/XuyWHkF4S

Cell class:

Creates a cell within a cellular automaton grid. It has the following properties:

x: X-position of the cell.
y: Y-position of the cell.
prevState: Previous state of the cell.
newState: New state of the cell.
currState: Current state of the cell.
neighbors: Array containing neighboring cells.

The methods are:

Change(): Adds a new updated neighbor to the cell.
Display(): Displays the cell in the grid.
ChangeState(): Updates the state of the cell based on its neighbors.

changeState() {
        // Get the total
        let t = 0;
        for (let i = 0; i < this.neighbours.length; i++) {
            t += this.neighbours[i].currState;
        }
        // Get the average
        let avg = int(t / 8);
        if (avg === 255) {
            this.newState = 0;
        } 
        else if (avg === 0) {
            this.newState = 255;
        } 
        else {
            this.newState = this.currState + avg;
            if (this.prevState > 0) {
                this.newState -= this.prevState;
            }
            if (this.newState > 255) {
                this.newState = 255;
            } else if (this.newState < 0) {
                this.newState = 0;
            }
        }
        this.prevState = this.currState;
    }

Start() Function:

Initializes a grid of cells and sets up the neighbors for each cell within a cellular automaton simulation. In each iteration, it sets the neighbors positions depending on the pixels (up, down, left, right)

function start() {
    // Create a grid of cells
    for (let x = 0; x < 64; x++) {
        cells[x] = [];
        for (let y = 0; y < 64; y++) {
            let newCell = new Cell(x, y);
            cells[x].push(newCell);
        }
    }
    // Setup the neighbors
    for (let x = 0; x < 64; x++) {
        for (let y = 0; y < 64; y++) {
            // Cell above
            let up = y - 1;
            if (up < 0) {
                up = 64 - 1;
            }
            // Cell in left
            let left = x - 1;
            if (left < 0) {
                left = 64 - 1;
            }
            // Cell below
            let down = y + 1;
            if (down === 64) {
                down = 0;
            }
            // Cell in right
            let right = x + 1;
            if (right === 64) {
                right = 0;
            }
            // Update the cells
            cells[x][y].change(cells[left][up]);
            cells[x][y].change(cells[left][y]);
            cells[x][y].change(cells[left][down]);
            cells[x][y].change(cells[x][down]);
            cells[x][y].change(cells[right][down]);
            cells[x][y].change(cells[right][y]);
            cells[x][y].change(cells[right][up]);
            cells[x][y].change(cells[x][up]);
        }
    }
}

User Interaction:

Using the Up and Down keys, the user is able to change the cells size and give the impression that they are zooming in and zooming out. Further error control was set to avoid decreasing the cell to a size where it can fit the canvas.