Week 11 Assignment — Cellular Automata

Concept:

I first wanted to do some research about the varying art pieces that I could generate using the cellular automata concept, and amongst the ones that popped up in my browser, I really liked how the pyramid ones were encompassing both creativity and simplicity; from a glance they seem like they are all similar, but once you take a closer look you realize that they are more different than you think. The general ones looked like these, which is from this link:

However, to me, these “cells” reminded me of the pixelated screens of the earlier televisions from the 1900s, like the one shown in the image below from this link:

Therefore, I decided to combine them so that I have a moving, colored pyramid pattern. I also referred to this video from the Coding Train before jumping into the assignment.

Process/Highlight: 

To make it interactive, I thought that it’d be fun if the user can actually modify the code sketch themselves by either subtracting/adding the colored cells onto the canvas with a mouse click.

To implement this function, I used the below snippet of code, which I consider as the highlight of my code:

function mousePressed() {
  // Toggle the state of the clicked cell
  let clickedCellX = floor(mouseX / cellSize);
  let clickedCellY = floor(mouseY / cellSize);

  if (clickedCellX >= 0 && clickedCellX < cells.length && clickedCellY >= 0 && clickedCellY < generations) {
    cells[clickedCellX][clickedCellY] = 1 - cells[clickedCellX][clickedCellY];
  }
}

I also experimented with different sizes of the cell and the canvas size, as attached below:

this was when cellSize = 3  this was when cellSize = 10

Although my initial vision was closest to the visuals of when the cellSize was set to 3, I wanted the users to interact with the cells by clicking on them to make them disappear/appear, and because I thought that might be harder to do when the cells were too tiny, I changed them to size 7 so that it’s still small enough to give that television’s pixelated screen effect but also big enough to be clicked on easily.

Final Sketch:

(Click on the canvas once and then you should be able to add/remove the cells from the canvas!)

Reflection:

It was really fun to use my own project to generate different patterns within the pyramid to give variations, and I attached a heart sketch I’ve made by clicking continuously on the canvas below:

This was a really fun project, and I think I might want to explore with this a bit more, whether it be my final project or on my own!