Conway’s Game of Life with Redux + Canvas

Animation of Conway’s Game of Life

In the past few weeks I’ve been doing a fair bit of work with Redux, a library which helps manage data and state in JavaScript applications. There’s an emphasis on functional programming and immutable data, which takes a little getting used to, but it does feel like a suitable approach—particularly for implementing Conway’s Game of Life…

each generation is a pure function of the preceding one

Conway’s Game of Life on Wikipedia

This fits nicely with Redux’s concept of “reducers”, which take in the current state and an “action”, and return a new state.

The app state is just the grid: an array of arrays containing cell values (1s and 0s). There is just a single action, a 'TICK', and when a 'TICK' is dispatched, the grid reducer generates a new grid based on the current grid:

function grid (state, action) {
  if (typeof state === 'undefined') return randomGrid()

  switch (action.type) {
    case 'TICK':
      return nextGrid(state)
      return state

function nextGrid (grid) {
  return grid.reduce(function (nextGrid, currentRow, y) {
    var newRow = (value, x) {
      return nextValue(x, y, value, grid)


    return nextGrid
  }, [])

The grid values for the next tick are computed based on the neighbouring values (as per the rules):

function nextValue (x, y, value, grid) {
  var neighbours = neighboursOf(x, y, grid)

  var livingNeighbours = neighbours.filter(function (value) {
    return !!value

  return +willLive(value, livingNeighbours)

function willLive (value, livingNeighbours) {
  return value
    ? livingNeighbours === 2 || livingNeighbours === 3
    : livingNeighbours === 3

function neighboursOf (x, y, grid) {
  return [
    [-1, -1], [0, -1], [1, -1],
    [-1,  0], /*x,y*/  [1,  0],
    [-1,  1], [0,  1], [1,  1]
  ].map(function (coords) {
    return valueAt(x + coords[0], y + coords[1], grid)

function valueAt (x, y, grid) { return grid[y] && grid[y][x] }

The render function redraws the state on a <canvas> whenever it changes, and a 'TICK' is dispatched every 100ms to generate the next state:

var store = Redux.createStore(grid)


setInterval(function () {
  store.dispatch({ type: 'TICK' })
}, 100)

I’m sure this could be improved, but it feels like a pretty nice solution.

See it in action: Conway’s Game of Life with Redux and Canvas, and view the full source.

Hat tip to Alan R. Soares. I had a peak at his implementation with React and refined my willLive function a based on it.

February 2016 Playlist

Advice to Young Girls by Inga Copeland (w/Actress)

Discovered this via CTM’s Recommended Listening feature.

Perth by Beirut

I got a DAB radio for my birthday, so I’ve been listening to the radio a lot more. This catchy tune caught my ear. Their latest album is pretty good too.

Amerika by Liima

New from the Efterklang + Finnish percussionist Tatu Rönkkö.

Zap by Vinny Villbass

Heard this at the Ja Ja Ja London Club Night. The 90s house-y synth section in the middle is madness!

Because by Smerz

Smerz headlined at the Ja Ja Ja club night and were really great live. Can’t wait to hear more stuff from them.



East Finchley, London. January 2016.

Bløsh—Give It Away


I had an amazing time at Harrington & Squires, learning about the art of letterpress printing. Chrissie and Vicky were such great hosts, and if you get a chance, I’d highly recommend their workshops, or visiting their shop in Tufnell Park.

Above all else show the data

A finished print—Tufte’s “show the data” quotation.

Fluorescent Ink Roller

Unfortunately the photo doesn’t do justice to the fluorescence of that orange!

First Pass Chase in the press Second Pass Printing Presses

Adana 8 x 5 printing presses. Want.

"Furniture" and cases of type

“Furniture” and numerous cases of type.

Efterklang’s Mirador vs. ustwo’s Monument Valley

Some remarkable similarities between these two M.C. Escher-alikes.

Efterklang—Mirador (2008)

Monument Valley (2014)

Technology for Saving Time

My new thing is to listen to Danish radio in the morning in the hope that it will improve my Danish language listening skills. At the moment I can only pick up the odd word in each sentence, but there was an interview (in English) with Prem Rawat that caught my ear, which included this:

I think we are really out of touch with ourselves. We’re in touch with everything else: this account, and that account, and our phones. Things that were supposed to save us us time may or may not save time, but they definitely occupy that free time we were promised.

Prem Rawat DRP1’s Sproglaboratoriet

This reminded me of something Mark Steel said when he was on The Infinite Monkey Cage show. He reckoned that the problems lie with the “social mechanisms” that employ the science, rather than the science itself:

In the early 1970s, there were two things that we were promised … One was that space travel would go on and on, and by now we’d certainly be on Mars. But the other thing was that new technology would mean that we would have this crisis of having so much leisure, because everything would done by machinery … what on earth do we do with all the time? As we know, the average working week now in Britain is longer than it was back then.

Mark Steel BBC Radio 4’s The Infinite Monkey Cage Series 2 Ep. 4

The Essence of Programming

What I mean is that if you really want to understand something, the best way is to try and explain it to someone else. That forces you to sort it out in your own mind. And the more slow and dim-witted your pupil, the more you have to break things down into more and more simple ideas. And that’s really the essence of programming. By the time you’ve sorted out a complicated idea into little steps that even a stupid machine can deal with, you’ve certainly learned something about it yourself. The teacher usually learns more than the pupil. Isn’t that true?

Dirk Gently’s Holistic Detective Agency Douglas Adams

This and That, and That


The Danish language has collapsed into meaningless guttural sounds.

From a sketch on Norwegian TV show, Uti Vår Hage

I have been teaching myself the Danish language with the Duolingo app since January, and so far it has been pretty fun—albeit a little difficult at times. A couple of favourite words so far:

  • vandmand is the Danish word for jellyfish, which literally translates to water man
  • sædvanligvis means usually and is very satisfying to say/hear
  • medlemmerne, meaning the members—it’s a bit difficult to pronounce, but reminds me of Mahna Mahna.

I had a chance to practice some of Danish skills when I visited Copenhagen with Helen and family in April. We had a great time, ate some tasty food (apart from the burnt onion ash!), and I had a chance to catch up with my old friend Matt (aka Milhouse). 2014-11_4410_lomo-lca_kodak-portra-400_33.jpg

Had to be done. Nyhavn, Copenhagen. April 2015.


Whilst most the UK were struggling through the sweaty June/July heatwave, Helen and I were lazying by the beach in Sardinia. The location was spectacular, so here is a picture of a food van:


Blue van. Blue bins. Alghero, Sardinia. July 2015.


At the end of July, Helen and I visited France. Our first stop was Nogent-le-Rotrou, a seemingly sleepy town in the Perche region, where we attended the wedding of one of Helen’s old work friends. Once again, another stunning location, overlooking the endless French countryside, so here is a picture of a quiet junction:


An Espace indicates to go left. Nogent-le-Routrou, July 2015.

After that we spend a few nights in Paris. We were fortunate enough to catch the final stage of the Tour de France on the day we arrived, including a fleeting glimpse of Chris Froome.


Men complete a bike ride. (Froome in the Yellow.) Paris, July 2015.


Meeeeeetro traaaaain. Paris, July 2015.


Greenery, ornate balconies, and signage. Paris, July 2015.


More ornate balconies. Paris, July 2015.


I will miss this gentleman a lot.


Some of James’ excellent musical creations can be heard on his soundcloud page. Mark & Tyrone (about a haphazard Wagamana waiter) is a particular favourite of mine.

A campaign has been set up to complete James’ second album. To donate, visit the campaign page.


Cleaning up after activists occupy Tate Modern’s Turbine Hall. June 2015.

View more posts in the archive