While redesigning my portfolio site I thought it would be cool to integrate the classic programming simulation, Game of Life by John Conway. It turns out using canvas
with React is a bit of a challenge for beginners, and required putting together multiple online resources I found. Here's how to do it.
Conway's Game of Life
The first step is pretty straight forward in regards to programming a canvas to display the Game of Life. For this I followed Adrian Henry's tutorial. I won't rehash the walkthrough here, but I encourage you to watch him and clone the final code from here.
This is what we will convert into a header element.
Let's just drop it into the Component render method!
That isn't possible.
The VanillaJS code requires the canvas element to already be mounted on the DOM so it can be referenced in the first line of the code. Whenever we want something to occur after the element has been mounted, we have to use the useEffect
hook (when using functional components). So lets try placing the entire original script inside component's useEffect
hook...
Remove logic from the useEffect
This turned out to be very challenging, because we will have to refactor our functions to take dependent variables. Lets start with moving the buildGrid()
function out of the component completely, and add the COLS
and ROWS
as dependent parameters. Move the now buildGrid(COLS,ROWS)
function above the GameOfLife
component.
The same can be done with the nextGen(grid)
function, but because it references elements on the DOM, it must remain in the component, so we can move it out of the useEffect
hook, and add the requisite COLS
and ROWS
parameters like so: nextGen(grid, COLS, ROWS)
Noting has changed on the view yet but we have cleaned up out useEffect
hook to make room for the next step: making the canvas and pixel resolution responsive.
Make it fill the width of the screen, and make it responsive
For this section, my primary source was Pete Corey's tutorial.
First thing we need to introduce is the useRef
hook to allow us to interact with the canvas. And we will create the getPixelRatio
function above the component definition:
const getPixelRatio = context => {
var backingStore =
context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio ||
1;
return (window.devicePixelRatio || 1) / backingStore;
};
The getPixelRatio
function will return the aspect ratio of the viewport to avoid stretching the pixels and help us keep square colonies in our Game of Life simulation.
Now we can replace
canvas.width = 800;
canvas.height = 800;
with
let ratio = getPixelRatio(ctx);
let width = getComputedStyle(canvas)
.getPropertyValue('width')
.slice(0, -2);
let height = getComputedStyle(canvas)
.getPropertyValue('height')
.slice(0, -2);
canvas.width = width * ratio;
canvas.height = height * ratio;
canvas.style.width = `100%`;
canvas.style.height = `100%`;
Because of the restricted size of the embedded codepen, I changed the value of resolution to 1 to give a larger field of colonies.
Slow it down!
If you are familiar with Conway's Game of Life, you're aware that a stable state is reach fairly quickly, so lets slow down the rate at which the animation refreshes so it lasts longer. An additional benefit, is it slows down the rate in which images are flashing on the screen for accessibility purposes. To accomplish this, we will need to wrap the requestAnimationFrame(update)
call inside the update
function in a setTimeout
function and give it a 2 second refresh rate, like so: setTimeout(() => requestAnimationFram(update), 2000)
.
Give it a little style
Now lets add a little color. This must be done in the javascript where the canvas is being drawn. I will add variables to hold the hex values for the fieldColor
and colonyColor
and change the "black" and "white" options, which are contingent on the grid values, to reference these variables.
Now I want to add a slant to the bottom on the header. Typically, we would use CSS transform's skew function, but that would ruin the grid nature of the colonies. So I applied a simple clip-path to the CSS.
You can see the full application on my portfolio page or view the repo on github.
Top comments (0)