2e:null 2f:["$","title",null,{"children":"Cellular Automata and Conway's Game of Life | Kie Ichikawa | Observable"}] 34:T1254,function step() { //iterate through the cells to determine if each should live or die for (let i = 0; i < data.length; i++) { //clarifying variable let currentCell = data[i]; //holder to collect all of our living neighbors let neighborSum = 0; //check if this cell is the top-left corner if (currentCell.row == 0 && currentCell.column == 0) { //corners have 3 neighbors neighborSum = data[currentCell.b].alive + data[currentCell.r].alive + data[currentCell.br].alive; } //check if this cell is the top-right corner else if (currentCell.row == 0 && currentCell.column == columns - 1) { neighborSum = data[currentCell.b].alive + data[currentCell.l].alive + data[currentCell.bl].alive; } //check if this cell is the bottom-left corner else if (currentCell.row == rows - 1 && currentCell.column == 0) { neighborSum = data[currentCell.t].alive + data[currentCell.r].alive + data[currentCell.tr].alive; } //check if this cell is the bottom-right corner else if (currentCell.row == rows - 1 && currentCell.column == columns - 1) { neighborSum = data[currentCell.t].alive + data[currentCell.l].alive + data[currentCell.tl].alive; } //check if this cell is on the top edge else if (currentCell.row == 0) { //edge cells have 5 neighbors neighborSum = data[currentCell.b].alive + data[currentCell.l].alive + data[currentCell.r].alive + data[currentCell.br].alive + data[currentCell.bl].alive; } //check if this cell is on the bottom edge else if (currentCell.row == rows - 1) { neighborSum = data[currentCell.t].alive + data[currentCell.l].alive + data[currentCell.r].alive + data[currentCell.tr].alive + data[currentCell.tl].alive; } //check if this cell is on the left-hand edge else if (currentCell.column == 0) { neighborSum = data[currentCell.t].alive + data[currentCell.b].alive + data[currentCell.r].alive + data[currentCell.tr].alive + data[currentCell.br].alive; } //check if this cell is on the right-hand edge else if (currentCell.column == columns - 1) { neighborSum = data[currentCell.t].alive + data[currentCell.b].alive + data[currentCell.l].alive + data[currentCell.tl].alive + data[currentCell.bl].alive; } //if all the checks above fail, this cell is an interior cell else { //interior cells have 8 neighbors neighborSum = data[currentCell.t].alive + data[currentCell.b].alive + data[currentCell.l].alive + data[currentCell.r].alive + data[currentCell.tr].alive + data[currentCell.tl].alive + data[currentCell.br].alive + data[currentCell.bl].alive; } //Rules of the Game //this sim uses the *survive* property to determine if the cell should live or die in the next generation // These rules are *Conway's Game of Life* // Any live cell with two or three live neighbors survives. // Any dead cell with three live neighbors becomes a live cell. // All other live cells die in the next generation. Similarly, all other dead cells stay dead. // is the cell dead? if (currentCell.alive == 0) { //the cell is dead if (neighborSum == 3) { //if the cell is dead with three live neighbors, becem alie currentCell.survive = 1; } else { //otherwise stay dead currentCell.survive = 0; } } else { //the cell is alive... if (neighborSum == 2 || neighborSum == 3) { //the living cell has 2 or 3 live neighbors, so it survives currentCell.survive = 1; } else { //the cell dies currentCell.survive = 0; } } } //replace the alive property with survive //this seems unnecessary, right? why not just update alive directly above? //if we do, things get really buggy, can you think of why? //zach didn't catch it, and pulled out lots of hair trying to solve it! for (let i = 0; i < data.length; i++) { let currentCell = data[i]; currentCell.alive = currentCell.survive; } //update the visualization with a data join d3.select('#mainSvg') .selectAll('.automaton') .data(data) .transition() .duration(generationalDelay) .delay((d, i) => i / 10) .attr('fill', function(d) { if (d.alive == 1) { return 'black'; } else { return 'white'; } }); }35:[] 32:{"id":"22ef8cb9e8a2be46","slug":"cellular-automata-and-conways-game-of-life","title":"Cellular Automata and Conway's Game of Life","thumbnail":"7c3ee30feaf2f5f7427f2d6d71cd32ea518e0b5ad0de01761feab8e721dd16da","access_level":"public","create_time":"$D2020-10-25T16:41:59.223Z","update_time":"$D2020-10-28T17:00:31.610Z","view_time":null,"first_public_time":"$D2020-10-25T18:15:11.745Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"b1b2f6ae7943b5ab","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":"starter_2024"},"version":77,"publish_version":77,"role":null,"authored":false,"authors":[{"type":"individual","id":"5d4542cfe1860f7f","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":null}],"members":[{"type":"individual","id":"5d4542cfe1860f7f","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Cellular Automata and Conway's Game of Life","cells":[{"id":0,"value":"md`# Cellular Automata and Conway's *Game of Life*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"interactive_elements = md`\n### Better Observable Interactions\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof width = slider({\n min: 0,\n max: 800,\n step: 10,\n value: 600,\n title: \"SVG Width\",\n description: \"How wide should the cellular automata grid be?\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof height = slider({\n min: 0,\n max: 800,\n step: 10,\n value: 600,\n title: \"SVG Height\",\n description: \"How tall should the cellular automata grid be?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof columns = slider({\n min: 0,\n max: 200,\n step: 1,\n value: 50,\n title: \"Cellular Automata Columns\",\n description: \"How many columns in the grid?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"viewof rows = slider({\n min: 0,\n max: 200,\n step: 1,\n value: 50,\n title: \"Cellular Automata Rows\",\n description: \"How many rows in the grid?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"viewof generationalDelay = slider({\n min: 0,\n max: 500,\n step: 1,\n value: 300,\n title: \"Generational Update Time\",\n description:\n \"How long should a single cellular automata generational change animation last?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"svgArtboard = md`\n### Create SVG Artboard\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"createSVG = {\n let backgroundColor = \"#002\";\n\n //create svg artboard and give it an ID\n let svg = d3\n .create('svg')\n .attr('width', width)\n .attr('height', height)\n .attr('id', 'mainSvg');\n\n //background color\n let background = svg\n .append('rect')\n .attr('width', width)\n .attr('height', height)\n .attr('x', 0)\n .attr('y', 0)\n .attr('fill', backgroundColor);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"play = md`\n### Play the Zero-Player Game!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"viewof lifeChance = slider({\n min: 0,\n max: 1,\n step: .01,\n value: .25,\n title: \"Living Ratio @ Start\",\n description: \"What proportion of cells should start the simulation living?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`\n⬇️ Press the \"Generate New Random Grid\" button first! ⬇️\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof genGrid = {\n //create the button\n let button = html``;\n //attach event listener with the regular javascript method, not d3's .on() for simplicity\n button.onclick = function() {\n //run functions\n randomizeCA();\n drawGrid();\n };\n //show button in Observable\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"viewof stepCA = {\n let button = html``;\n button.onclick = function() {\n step();\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"viewof skipCA = {\n let button = html``;\n button.onclick = function() {\n let counter = 0;\n let ticker = d3.interval(elapsed => {\n step();\n counter++;\n if (counter > 10) {\n ticker.stop();\n }\n }, generationalDelay);\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"viewof jumpCA = {\n //create button HTML entity\n let button = html``;\n //attach event listener without D3's .on(event, function(){})\n button.onclick = function() {\n //keep track of actions\n let counter = 0;\n //start D3 timer\n let ticker = d3.interval(elapsed => {\n //run functions at interval\n step();\n counter++;\n //if we have run 100 times...\n if (counter > 100) {\n //turn off the timer\n ticker.stop();\n }\n }, generationalDelay); //how long the timer should wait between executions\n };\n //show in observable\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"create_data = md`\n-----\n\n### Dataset Creation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"data = {\n //create container for data\n let caData = [];\n\n //loop through rows and columns in two for loops\n for (let i = 0; i < rows; i++) {\n //i is the row, its vertical position\n for (let j = 0; j < columns; j++) {\n //j is the column, its horizontal position\n\n //create data for the cell, recording its location and neighbors\n caData.push({\n row: i,\n column: j,\n alive: 0,\n survive: 0,\n s: i * columns + j,\n t: (i - 1) * columns + j,\n r: i * columns + (j + 1),\n l: i * columns + (j - 1),\n b: (i + 1) * columns + j,\n tl: (i - 1) * columns + (j - 1),\n tr: (i - 1) * columns + (j + 1),\n bl: (i + 1) * columns + (j - 1),\n br: (i + 1) * columns + (j + 1)\n });\n }\n }\n return caData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`\n### Make Life!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"function randomizeCA() {\n //iterate throuh CA dataset\n data.forEach(function(automaton) {\n //check if the cell should become alive\n if (Math.random() < lifeChance) {\n //cell is alive at start\n automaton.alive = 1;\n } else {\n //cell is dead at start\n automaton.alive = 0;\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"visualizeData = md`\n### Visualize the Dataset\nAnother function should look both simple and familiar, and uses a standard D3 **data join** to draw the synthetic dataset to a visualized grid.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"function drawGrid() {\n //determine width and height of each cell\n let cellHeight = height / rows;\n let cellWidth = width / columns;\n\n //destroy any existing grid cells\n d3.select('#mainSvg')\n .selectAll('.automaton')\n .remove();\n\n //create grid based on synthetic dataset\n d3.select('#mainSvg')\n .selectAll('.automaton') //look for something that doesn't exist\n .data(data) //compare it against data\n .enter()\n .append('rect')\n .attr('width', cellWidth)\n .attr('height', cellHeight)\n .attr('x', function(d) {\n return d.column * cellWidth;\n })\n .attr('y', function(d) {\n return d.row * cellHeight;\n })\n .attr('fill', function(d) {\n if (d.alive == 1) {\n return '#002';\n } else {\n return 'white';\n }\n })\n .attr('stroke', '#002')\n .attr('stroke-width', '1')\n .attr('class', 'automaton');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"advancing_rules = md`\n### Advancing the Simulation and Survival/Birth/Death Rules\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"