Conway’s Game of Life

Conway’s Game of Life is a simulation of cells interacting with other cells, or an example of cellular automata. White squares represent dead cells, and black squares represent live cells. There a few simple rules governing the universe:

• Any cell with less than 2 neighbors dies from loneliness
• Any cell with over 3 neighbors dies from overpopulation
• Any cell with 2 or 3 neighbors stays alive
• Any dead cell with exactly 3 neighbors can become alive (through reproduction)

The simulation is performed using these rules, which are repeated over and over on the entire grid. These simple rules can lead to extraordinarily complex systems. Most systems, however, (especially random ones) will eventually collapse into unmoving shapes or simple oscillators. I created a version of Life in JavaScript using the HTML5 canvas. A 2-dimensional array stores the grid of squares. You can run it here or see the code here. The simulation is completed in a “closed” universe, where I have border cells (not shown on the screen) on the edges to prevent calculation errors with cells missing neighbors. These cells are always white and have no calculations performed on them. The program I wrote is not interactive, as I just wanted to see if I could make a version of Life using JavaScript. I might make an interactive one in the future, but for now I would recommend this simulation that I have been using. My programs starts with half of the cells alive (randomly selected) and eventually stabilizes. If you refresh, the simulation will restart.

Bézier Curve Rainbow

I decided to learn more about Bézier curves, so I read this excellent Wikipedia article about them. The part that I used the most shows animated diagrams of Bézier curve formation. What I got out of it was this: if we have the x and y coordinates of points a, c, and b we can create a quadratic Bézier curve from them. As we … Read moreBézier Curve Rainbow

Rainbow Matrix

This is a JavaScript program I wrote, in the style of the movie “The Matrix.” Random characters are selected from a list and then drawn onto the HTML5 canvas. Arrays store the x and y locations and color of each column. You can also run the program or see the code.