2b:null 2c:["$","title",null,{"children":"Conway's Game of Life | Sander Evers | Observable"}] 31:[] 2f:{"id":"7fa432606a2ca0bf","slug":"conways-game-of-life","title":"Conway's Game of Life","thumbnail":"6544ee9f7ee8801f20788c333dd12572c098588a640b020e0c536d570dce516c","access_level":"public","create_time":"$D2019-05-04T10:34:40.231Z","update_time":"$D2019-11-19T10:46:08.126Z","view_time":null,"first_public_time":"$D2019-06-18T11:29:35.578Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":"starter_2024"},"version":298,"publish_version":298,"role":null,"authored":false,"authors":[{"type":"individual","id":"f9fc95e35699f5b9","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":null}],"members":[{"type":"individual","id":"f9fc95e35699f5b9","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Conway's Game of Life","cells":[{"id":189,"value":"md`# Conway's Game of Life`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"md`I wrote this notebook to demonstrate how easy it is to create and experiment with simple graphical programs in Observable. The following lines of JavaScript are an implementation of [Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life).\n\nIf this is the first Observable notebook you see, note that all the JavaScript cells consist of source code (below) and their evaluated output (above). In fact, this is also true for the text cell you are currently reading; you can open it by clicking in the left margin. I've kept the code cells pinned open though.\n\nEvery cell is live editable and reactive.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"md`## Define the world`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"md`Conway's world is a two-dimensional grid consisting of _cells_ that can be either alive or dead. We represent the current state of the world as the set of coordinates of the cells that are alive. Let's start with ${world0.size} living cells.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"world0 = new Set([[13,9],[14,9],[15,9],[14,10],[13,11],[15,11]].map(rep))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":232,"value":"md`Although I'd like to represent a cell as an array of two coordinates, this is not suitable as a member of a set, for reasons I will shortly explain. Therefore I first map them to strings using the function \\`rep\\`:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"rep = (xy) => xy.join(',')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":236,"value":"md`Later on, I'd also like to map them back:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"derep = str => str.split(',').map(Number)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":239,"value":"md`A cell is _alive_ in a certain state of the world when it's included in the set:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"alive = (cell,world) => world.has(rep(cell))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"md`This function would not work if the set would consist of arrays, because set membership is determined by equality, and two arrays can be different even if they include the same members in the same order:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"new Set([[1,2]]).has([1,2]) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":248,"value":"md`This is why I had to resort to the string representation. If only JavaScript's data structures were as thoughtfully designed as Python's...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"md`## Draw the world`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"md`To draw the state of the world, emit a large enough \\`To reset the world, click the play symbol in the top right corner of the world cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"draw(world)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"md`## Auxiliary`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"nx=30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"ny=20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"range = n => [...new Array(n).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"