2b:null 2c:["$","title",null,{"children":"Game of Life | Ben Tanen | Observable"}] 31:[] 2f:{"id":"c0297ee4f0de3cf2","slug":"game-of-life","title":"Game of Life","thumbnail":"b45d1f9c95e6ff1153a87184f87b36e83b51f16de4b107d1eed53afbe7596986","access_level":"public","create_time":"$D2021-02-18T22:07:19.061Z","update_time":"$D2021-02-18T23:20:52.718Z","view_time":null,"first_public_time":"$D2021-02-18T23:19:04.766Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ec7d5a5929e2447a","login":"ben-tanen","name":"Ben Tanen","avatar_url":"https://avatars-next.observableusercontent.com/6bb2019b3210fba9890f120c1c7199454cc8bdecab228b98e052cf18d1933958","tier":"starter_2024"},"version":198,"publish_version":198,"role":null,"authored":false,"authors":[{"type":"individual","id":"bdc4ef91b155df74","login":"ben-tanen","name":"Ben Tanen","avatar_url":"https://avatars-next.observableusercontent.com/6bb2019b3210fba9890f120c1c7199454cc8bdecab228b98e052cf18d1933958","tier":null}],"members":[{"type":"individual","id":"bdc4ef91b155df74","login":"ben-tanen","name":"Ben Tanen","avatar_url":"https://avatars-next.observableusercontent.com/6bb2019b3210fba9890f120c1c7199454cc8bdecab228b98e052cf18d1933958","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"7063108a77a44f7a","slug":"generative-art-animations","title":"Generative Art + Animations","owner":{"id":"ec7d5a5929e2447a","login":"ben-tanen","name":"Ben Tanen"}},"type":"notebook","body":{"title":"Game of Life","cells":[{"id":0,"value":"md`# Game of Life`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"viewof keyframe = Scrubber(Array.from({length: n_frames}, (_, i) => i), {\n format: i => \"frame of simulation: \" + (i + 1),\n delay: 500,\n autoplay: false,\n loop: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"viewof method = radio({options: [\"Self toggle\", \"Neighbor toggle\", \"Conway\"],\n value: \"Conway\",\n description: \"Choose your method for animation\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"chart = {\n /* render svg plot */\n const svg = d3.select(DOM.svg(chart_width, chart_height));\n \n // draw the boxes\n svg.selectAll(\".box\")\n .data(box_of_boxes[keyframe]).enter()\n .append(\"rect\")\n .classed(\"box\", true)\n .attr(\"x\", d => d.i * (chart_param.box_size + chart_param.box_padding))\n .attr(\"y\", d => d.j * (chart_param.box_size + chart_param.box_padding))\n .attr(\"width\", chart_param.box_size)\n .attr(\"height\", chart_param.box_size)\n .style(\"fill\", d => d.status ? \"#77bdee\" : \"#ddd\");\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`### Data + functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"dist = ([x1, y1], [x2, y2]) => Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"next_score = (boxes, i, j) => {\n const boxes_sub = boxes.filter(d => (i - 1 <= d.i & d.i <= i + 1) & \n (j - 1 <= d.j & d.j <= j + 1) & \n (i != d.i | j != d.j));\n return d3.sum(boxes_sub, d => d.status);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"next_boxes = (boxes) => {\n return boxes.map(d => {\n const score = next_score(boxes, d.i, d.j);\n let status;\n if (method == \"Conway\") status = d.status == 1 ? (2 <= score & score <= 3 ? 1 : 0) : (score == 3 ? 1 : 0);\n else if (method == \"Self toggle\") status = (d.status + 1) % 2;\n else if (method == \"Neighbor toggle\") status = score % 2;\n return {...d, status: status};\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"boxes_init = {\n const boxes = [ ];\n for (let i = 0; i < grid_size; i++) {\n for (let j = 0; j < grid_size; j++) {\n boxes.push({\"i\": i, \"j\": j, \n \"n\": i + grid_size * j,\n \"status\": Math.random() <= 0.5 ? 1 : 0});\n }\n }\n return boxes.filter(d => {\n const x = d.i * (chart_param.box_size + chart_param.box_padding),\n y = d.j * (chart_param.box_size + chart_param.box_padding),\n center = [chart_param.chart_size / 2, chart_param.chart_size / 2];\n return dist([x, y], center) < chart_param.circle_size &\n dist([x + chart_param.box_size, y], center) < chart_param.circle_size &\n dist([x, y + chart_param.box_size], center) < chart_param.circle_size &\n dist([x + chart_param.box_size, y + chart_param.box_size], center) < chart_param.circle_size\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"box_of_boxes = {\n const box_of_boxes = [boxes_init];\n for (let i = 1; i < n_frames; i++) {\n box_of_boxes.push(next_boxes(box_of_boxes[i - 1]));\n }\n return(box_of_boxes);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`### Chart parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"chart_param = {\n const box_padding = 2,\n chart_size = Math.min(chart_width, chart_height),\n box_size = (chart_size / grid_size) - box_padding,\n circle_size = chart_size * 0.43;\n \n return {chart_size, box_padding, box_size, circle_size};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"n_frames = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"grid_size = 25;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"chart_width = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"chart_height = width * 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"import {Scrubber} from '@mbostock/scrubber'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"import { slider, button, select, text, radio, checkbox, number } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"