2b:null 2c:["$","title",null,{"children":"Recreational math: Elementary Cellular Automata | drio | Observable"}] 31:[] 2f:{"id":"9eef01a6e3b8cc44","slug":"elementary-cellular-automata","title":"Recreational math: Elementary Cellular Automata","thumbnail":"293cba11e57608f3cc1dd073fe778346d5668bc48ccf271429f62e54b234ff21","access_level":"public","create_time":"$D2024-01-23T16:46:58.181Z","update_time":"$D2024-01-26T19:37:15.515Z","view_time":null,"first_public_time":"$D2024-01-25T11:59:33.493Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3870ffad1196a4b8","login":"drio","name":"drio","avatar_url":"https://avatars-next.observableusercontent.com/a9488dda74759bbfa1c5a26f529c2b0dad0ac1562092e7ba3faa61f7786705c7","tier":"starter_2024"},"version":458,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"afbfd522a2020b91","login":"drio","name":"drio","avatar_url":"https://avatars-next.observableusercontent.com/a9488dda74759bbfa1c5a26f529c2b0dad0ac1562092e7ba3faa61f7786705c7","tier":null}],"members":[{"type":"individual","id":"afbfd522a2020b91","login":"drio","name":"drio","avatar_url":"https://avatars-next.observableusercontent.com/a9488dda74759bbfa1c5a26f529c2b0dad0ac1562092e7ba3faa61f7786705c7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Recreational math: Elementary Cellular Automata","cells":[{"id":0,"value":"# Recreational math: Elementary Cellular Automata","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":455,"value":"md`👉🏽 [Jump to rule generator](https://observablehq.com/@drio/elementary-cellular-automata#ruleDec)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"md` \n\n

\n\"Over and over again, we will see the same kind of thing: that even though the underlying rules for a system are simple, and even though the system is started from simple initial conditions, the behavior that the system shows can nevertheless be highly complex. And I will argue that it is this basic phenomenon that is ultimately responsible for most of the complexity that we see in nature.”\n
—Stephen Wolfram, A New Kind of Science
\n

\n\nReferences:\n\n1. [Wikipedia](https://en.wikipedia.org/wiki/Elementary_cellular_automaton).\n2. As always, resting in the shoulders of giants: [Coding train](https://www.youtube.com/watch?v=Ggxt06qSAe4).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"viewof ruleDec = Inputs.range([1, 255], { step: 1, value: 30, label: \"Rule\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"viewof height = Inputs.range([100, 3000], {\n step: 1,\n value: 600,\n label: \"height\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"viewof width = Inputs.range([100, 2000], {\n step: 1,\n value: 1024,\n label: \"width\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof cellWidth = Inputs.range([1, 50], {\n step: 1,\n value: 10,\n label: \"cell Width\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"viewof numGenerations = Inputs.range([1, 1000], {\n step: 1,\n value: 100,\n label: \"num Generations\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"viewof blackOrWhite = Inputs.radio([0, 1], {\n label: \"background (0:white 1:black)\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"{\n function cellsToSvg(c, rowNum) {\n let rects = \"\";\n let y = rowNum * cellWidth;\n for (let i = 0; i < c.length; i++) {\n let x = i * cellWidth;\n let f = c[i] === blackOrWhite ? \"white\" : \"black\";\n if (f === \"white\") continue;\n rects += ``;\n }\n return rects;\n }\n\n let currGen = genZero.map((e) => e);\n let svgChunk = cellsToSvg(currGen, 0);\n for (let ci = 1; ci <= numGenerations; ci++) {\n const nextGen = nextGeneration(currGen);\n svgChunk += cellsToSvg(nextGen, ci);\n currGen = nextGen;\n }\n // \n\n return svg`\n \n\n ${svgChunk}\n\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"function nextGeneration(cc = []) {\n let nextCells = d3.range(cc.length).map((_) => 0);\n let len = cc.length;\n for (let i = 0; i < cc.length; i++) {\n const left = cc[(i - 1 + len) % len];\n const center = cc[i];\n const right = cc[(i + 1 + len) % len];\n const newState = calculateState(left, center, right);\n nextCells[i] = newState;\n }\n return nextCells;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function calculateState(l, c, r) {\n const n = \"\" + l + c + r;\n const k = 7 - parseInt(n, 2);\n return ruleset[k];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function initCells() {\n const total = width / cellWidth;\n const cells = [];\n const r = d3.randomInt(0, 2);\n for (let i = 0; i < total; i++) {\n cells[i] = 0;\n }\n cells[parseInt(total / 2)] = 1;\n return cells;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"function dec2bin(dec) {\n const n = \"000000000\" + (dec >>> 0).toString(2);\n return n.substr(n.length - 8);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"genZero = initCells()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"ruleset = dec2bin(ruleDec)\n .split(\"\")\n .map((e) => +e)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"