31:T561,wolframAutomata = { const ruleset = ruleNumberToRuleset(ruleNumber); const cells = [initialCells]; let nextGenerationCells = initialCells; for (let i = 1; i < numCells; i++) { const generation = i; nextGenerationCells = generate(generation, nextGenerationCells, ruleset); cells.push(nextGenerationCells); } const [onRects, offRects] = cells.reduce((genAcc, generation, genI) => { const [genOnCells, genOffCells] = generation.reduce((cellAcc, cell, i) => { const isFilled = cell === 1; const fill = isFilled ? '#000000' : '#ffffff'; const node = svg` `; if (isFilled) { cellAcc[0].push(node); } else { cellAcc[1].push(node); } return cellAcc; }, [[], []]); genAcc[0].push(genOnCells); genAcc[1].push(genOffCells); return genAcc; }, [[], []]); return svg` ` }32:[] 2f:{"title":"Wolfram's Elementary Cellular Automata","cells":[{"id":0,"value":"md`# Wolfram's Elementary Cellular Automata`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"md`Wolfram's elementary cellular automata produce some of my favorite graphics. These crossword looking visuals have their origins in applied research on topics ranging from [crystal growth to robot self-replication](https://natureofcode.com/book/chapter-7-cellular-automata/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"md`They also make for fun pieces to plot using a pen plotter like the [AxiDraw](https://shop.evilmadscientist.com/productsmenu/846). To support my own plotting pursuits, I built this cellular automata generator that allows you to quickly:\n\n1. Specify a [rule number](https://mathworld.wolfram.com/ElementaryCellularAutomaton.html) to apply.\n2. Specify the dimensions of the side of the grid.\n3. Specify the size of a single square of the grid in pixels.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`The output plot also groups filled and unfilled cells in separate SVG group (g) elements. This is useful to support easier selection in Inkscape to apply [Hatch Filling](https://wiki.evilmadscientist.com/Hatch_fill).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`## Cellular Automata Calculator`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"viewof ruleNumber = Range([0, 255], { value: 30, label: \"Rule Number\", step: 1 });","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"viewof numCells = Range([0, 1000], { value: 51, label: \"Number of Cells\", step: 1 });","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"viewof cellSize = Range([1, 50], { value: 10, label: \"Size of Cell\", step: 1 });","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"md`## Algorithm`","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"md`We start by defining a function, ruleNumberToRuleset, to derive the 8-bit ruleset for a number, n, between 0 and 255. To do this, we convert the number to its 8-bit representation and store the bits in an array.\n\nNotice that we also reverse the array. This is important to support our method for accessing the ruleset, defined in the rules function below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"ruleNumberToRuleset = (n) =>\n (\"00000000\" + n.toString(2)).slice(-8)\n .split(\"\")\n .map((n) => parseInt(n, 10))\n .reverse();","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"md`The rules function takes in a \"neighborhood\" of cells to consider when deciding whether the center cell in the next generation should be \"on\" (filled) or \"off\" (empty). This neighborhood is comprised of the cell in question, plus the cells to its left and right.\n\nUsing these values we obtain the 3-bit value of the cell's neighborhood and convert this 3-bit sequence into its decimal equivalent. This will be a number in the range [0,7]. We use this number as the index to access the ruleset; note that this technique only works when the bits of the ruleset have been reversed, hence the call to Array.prototype.reverse in the ruleNumberToRuleset function.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"rules = ({ left, center, right }, ruleset) => {\n const index = parseInt(`${left}${center}${right}`, 2);\n \n return ruleset[index];\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"md`Finally, the generate function takes in the current generation, iterates over each cell in the generation, derives the neighborhood for each cell, and then derives its state in the next generation by calling the rules function. In sum, this produces the array of cells representing the next generation of the automata.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"generate = (generation, cells, ruleset) => {\n const nextGeneration = new Array(cells.length)\n .fill()\n .map((_, i) => {\n const left = cells[i - 1] || 0;\n const center = cells[i];\n const right = cells[i + 1] || 0;\n \n return rules({ left, center, right }, ruleset);\n });\n \n return nextGeneration;\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"md`In standard cellular automata, we start from simple conditions with a single filled cell in the middle of the first generation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"initialCells = new Array(numCells).fill(0).map((bit, i) => {\n const isCenterCell = i === Math.floor(numCells / 2);\n \n if (isCenterCell) {\n return 1;\n }\n \n return bit;\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"import {Range} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"width = numCells * cellSize;","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"height = numCells * cellSize;","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}