2a:null 2b:["$","title",null,{"children":"Week 8: Cellular Automata and Conway's Game of Life | Zach Pino | Observable"}] 30:Tf96,homework = md` ### Homework due 10/28 ##### Logistics - Due to a small conflict, class will start a half-hour late next week, at 2:30pm on Zoom. ##### Technical Learning (~4 hours) - Play with the cellular automata below. Read through this page, check out the linked resources, and then make a copy of all of the code (to gain familiarity with this new structure) on your own new Observable page. Record any questions for discussion next week. Rather than a specific challenge like previous weeks, let's be a bit more experimental and spend some time with the code with a few following questions/prompts in mind. Choose the prompts that are interesting to you and experiment! - Think about how you could adjust the rules of the game to simulate specific phenomena. What would we change to model rabbit populations (very high generational reproduction but short lifespans), or panda populations (very low generational reproduction but long lifespans)? What about fires or disease spread? Urban spread? An oil spill in the ocean? Where in the code can we introduce and control these new behaviors? - How could [randomness or probabilities](https://softologyblog.wordpress.com/2018/05/12/stochastic-cellular-automata/) impact the rules of the simulation? Where could uncertainty be introduced, so that the simulation is no longer fully [*deterministic*](https://en.wikipedia.org/wiki/Deterministic_system). Could the rules change over time? - How could the initial population of the grid be [based on data](https://link.springer.com/chapter/10.1007/978-3-030-12381-9_7)? How could you bring in a dataset to seed the starting condition of the grid? - How could the dataset be upgraded so that each cell has a memory of its past living/dead states? Could we keep track of which cells are hotspots of life or tend towards staying dead over time? - How could you add the ability for your cellular automaton agents to have states more than just living or dead? For example, in epidemic simulations, we might need five states: immune, susceptible, infected, recovered, and dead. - This is all challenging. Everyone should be bringing in lots of questions next week for a robust discussion! ##### Exposure (~2 hours) - Listen to this DataStori.es podcast with our class fave Nicky Case to set-up our big project for the second half of the semester, [Explorable Explanations](https://datastori.es/103-explorable-explanations-with-nicky-case/). - Play with Nicky Case's sort-of cellular automata simulation - the [Emoji Simulator](https://ncase.me/sim/). Can you intuit what the various cellular automata rules might be? - Browse this short *Fast Company* article on the decline of data visualizations and rise of data simulations [*Move over, data visualization. The era of ‘data simulation’ is here*](https://www.fastcompany.com/90508780/move-over-data-visualization-the-era-of-data-simulation-is-here) - Take a look at this cool [Observable election thing](https://observablehq.com/@observablehq/electoral-college-decision-tree)! ##### Team Work (~1.5 hours) - Complete the in-class exercise from last week and prepare to present your research to the class. Please chat with your group about how you will present and explain your assigned simulation, structure your Miro board area for ease of sharing, build any light explanatory assets necessary, and include lots of links and pics! ##### Ongoing Work (~30 minutes) - Continue adding *open questions* as you research and practice this week. Please, everyone, make an effort to add some questions! - Keep track in a bookmark folder any interesting data visualizations or interactive data experiences that you encounter. When we have any free time, we can share cool examples with one another! - Join Zach on Friday afternoon (by appointment, send an email to reserve a time), Monday morning (open access), or reach out for another time if you have any questions or would like to chat about data, design, dinosaurs... `31:T188d,intro = md` ### Short Review on CA and GoL [Cellular Automata](https://en.wikipedia.org/wiki/Cellular_automaton) have since the 1940s been a thought exercise in computer science, and an early homework assignment in most programming education curricula. They were some of the first computer simulations built, and have been used to model just about any dynamic system you can imagine such as [epidemic spread](https://www.hindawi.com/journals/jces/2014/518053/), [traffic flows](https://en.wikipedia.org/wiki/Rule_184), [population and urban growth](https://discovery.ucl.ac.uk/id/eprint/7894/1/7894.pdf), [atmostphere and geologic change](https://academic.oup.com/gji/article/144/3/609/614264), [lifelike terrain and landscapes for games](https://demonstrations.wolfram.com/AlgorithmicTerrainWithCellularAutomata/), [musical composition](http://tones.wolfram.com/about/how-it-works), [wildfire spread](https://www.nat-hazards-earth-syst-sci.net/19/169/2019/), and most intriguingly [heritage](https://link.springer.com/article/10.1007/s00004-016-0292-x) and [contemporary architecture](https://mypages.iit.edu/~krawczyk/rjkga02.pdf). There are many examples beyond these — definitely search around and share anything cool! There are also tons of [great learning resources](https://natureofcode.com/book/chapter-7-cellular-automata/) and interactive simulation websites. To implement a cellular automata model, imagine a 2D matrix with rows and columns. Every cell is an agent — an *automaton* (plural *automata*) — in the matrix and can be either *dead* (0, often shown as white) or *alive* (1, often shown as black), though they begin as *dead*. A 4x4 matrix might be visualized with text, as follows: \`\`\` 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 \`\`\` When we start the simulation, we *populate* the simulation with a zero-eth *generation* of living cells. We might do this randomly, though the initial populations could certainly be based on real data as well. \`\`\` 0 1 0 0 0 0 0 0 0 1 0 1 1 1 1 0 \`\`\` A set of rules are then implemented, which define how an individual cell lives or dies based on the state of its 8 cardinal and diagonal neighbors (or other *neighborhood* definitions). For example, a common set of rules for Cellular Automata, called [*Conway's Game of Life*](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life), which the developer described as a "zero player game", sets up the following conditions: 1. If an automaton is alive, and it has fewer than two living neighbors, it dies from loneliness. (1->0) 2. If an automaton is alive, and it has two or three living neighbors, it stays alive. (1->1) 3. If an automaton has four or more living neighbors, it dies from overpopulation. (1->0) 4. If a dead automaton has exactly three living neighbors, it becomes alive through reproduction. (0->1) 5. If a dead automaton has fewer or more than three living neighbors, it stays dead. (0->0) Many other rule sets are possible, and different patterns and behaviors would emerge depending on how the rules affect the population over time. Let's apply these *Game of Life* rules to produce a new generation. First, we need to count how many of the 8 possible neighbors of each cell are living. The number of living neighbors of each cell is marked below in parentheses. Feel free to skip the textual description and instead watch this [excellent animated interview with the creator of the Game of Life, John Conway](https://www.youtube.com/watch?v=R9Plq-D1gEk). \`\`\` 0(1) 1(0) 0(1) 0(0) 0(1) 0(2) 0(3) 0(1) 0(3) 1(3) 0(4) 1(1) 1(2) 1(3) 1(3) 0(2) \`\`\` We now apply the rules enumerated above and transform all the cells together to define our *second* generation. Living cells with 2 or 3 living neighbors stay alive, dead cells with three living neighbors become alive... \`\`\` 0 0 0 0 0 0 1 0 1 1 0 0 1 1 1 0 \`\`\` And the rules can be applied again for a *third* generation. First, let's count the living neighbors. \`\`\` 0(0) 0(1) 0(1) 0(1) 0(2) 0(3) 1(1) 0(1) 1(3) 1(4) 0(3) 0(1) 1(3) 1(4) 1(2) 0(1) \`\`\` And transform based on the rules of the game... \`\`\` 0 0 0 0 0 1 0 0 1 0 1 0 1 0 1 0 \`\`\` We can see our population slowly going extinct and moving southwards as we move forward in time. Unfortunately, our initial seed population did not have a good distribution for future thriving. So sad. Also, our world was pretty small - cellular automata are much more interesting on bigger fields where individual cells can be seen as parts of organisms, rather than organisms themselves. Often in cellular automata simulation, animation is used to show the dynamism of the world - though sometimes historic states of the world are retained (these are called [*accretor* cellular automata](https://softologyblog.wordpress.com/2018/01/12/accretor-cellular-automata/)). There are many websites devoted to cellular automata, as well as the emergent behaviors and patterns that commonly occur. Whole communities have developed that explore how these models evolve and change depending on their rules and initial population patterns — and entire vocabularies have developed to describe their behaviors. Definitely check out [LifeWiki](https://www.conwaylife.com/wiki/Main_Page), where discoveries are still being made and logged in this fifty+ year old computer simulation logic. New ideas are currently being codified in [stochastic/random](https://en.wikipedia.org/wiki/Stochastic_cellular_automaton) as well as [asynchronous cellular automata](https://en.wikipedia.org/wiki/Asynchronous_cellular_automaton). Super cool experiments are happening as well in imagining cellular automata in higher dimensions as well! - [BitStorm Game of Life](https://bitstorm.org/gameoflife/) - [Teb's GoL Models](https://tebs-game-of-life.com) and [Medium Post](https://medium.com/tebs-lab/simple-rules-emergent-beauty-and-life-artificial-and-otherwise-208642d6d81c) - [Exploring Cellular Automata](https://observablehq.com/@ramonaisonline/exploring-cellular-automata) - [Conway's Game of Life](https://observablehq.com/@mbostock/conways-game-of-life) - [Cellular Automata on Hyperbolic Plane](https://dmishin.github.io/hyperbolic-ca-simulator/index.html) - [Terra.js](https://rileyjshaw.com/terra/) So now let's write our own simple version! `32:T1026,create_data = md` ----- ### Dataset Creation Let's build a quick dataset to represent our cellular automata *state*. It will hold a set of Javascript objects, one for each cell in the grid. There are a set of properties within each object... - The *row* of the cell - The *column* of the cell - If the cell is *alive* or dead, represented by a 1 or 0 - If the cell should *survive* to the next generation, represented by a 1 or 0 - The index in the array of *s* self (same as the index), and all 8 neighbors *l* left, *t* top, *b* bottom, *r* right, and the combination *tr* for top-right... \`\`\` TL | T | TR ------------- L | S | R ------------- BL | B | BR \`\`\` In a [*row-major*](https://en.wikipedia.org/wiki/Row-_and_column-major_order) 4x4 cellular automata like the one we're building, the indices look like this: \`\`\` 0 | 1 | 2 | 3 ------------------- 4 | 5 | 6 | 7 ------------------- 8 | 9 | 10 | 11 ------------------- 12 | 13 | 14 | 15 \`\`\` For most cells, if we know the row and column position, he can make small arithmetic changes to find the neighbors. The cell below marked *s*, for example, is row 2 and column 1 (as always, we start counting at 0). \`\`\` 0 | 0 | 0 | 0 ------------------- 0 | 0 | 0 | 0 ------------------- 0 | s | 0 | 0 ------------------- 0 | 0 | 0 | 0 \`\`\` - To find this cell's index based on its row and column, we can take its row (2) and multiply it by the number of cells in each row (4) and add its column (1). So, we can compute \`\`\` (2 * 4) + 1 \`\`\`, and yes its index is 9! - We can find this cell's *r* righthand neighbor similarly by computing cell row multipled by the number of cells per row + cell column + 1 or \`\`\` (2 * 4) + 1 + 1 \`\`\`, and so its righthand neighbor is 10! - Adding and subtracting one from the cell's column and row position in 8 combinations give us the indices of all 8 neighbors. In code, where \`\`\`i\`\`\` is the row, \`\`\`j\`\`\` is the column, and \`\`\columns\`\`\ is the number of columns in a row. \`\`\` s: i * columns + j, t: (i - 1) * columns + j, r: i * columns + (j + 1), l: i * columns + (j - 1), b: (i + 1) * columns + j, tl: (i - 1) * columns + (j - 1), tr: (i - 1) * columns + (j + 1), bl: (i + 1) * columns + (j - 1), br: (i + 1) * columns + (j + 1) \`\`\` Beware that we might end up with some unexpected indices when we encounter the edges of the cellular automata. Let's imagine we are creating the data for the cell marked by the *s* below... \`\`\` 0 | 0 | 0 | s ------------------- 0 | 0 | 0 | 0 ------------------- 0 | 0 | 0 | 0 ------------------- 0 | 0 | 0 | 0 \`\`\` Based on the rules above for finding the indices of the neighbors, the data object for this cell would look like... \`\`\` { row: 0 column: 3 alive: 0 survive: 0 s: 3 t: -1 r: 4 l: 2 b: 7 tl: -2 tr: 0 bl: 6 br: 8 } \`\`\` Those negatives indices are definitely a problem. But there is another issue - this cell should not have any top or right neighbors! But, due to how we're creating this dataset, we accidentally *wrap-around* our grid as though it is a [wrap-around, videogame projected spherical world](https://www.redblobgames.com/x/1938-square-tiling-of-sphere/) like a game of [Pac-Man](https://tvtropes.org/pmwiki/pmwiki.php/Main/WrapAround)! Negative indices in javascript just create errors, but some languages like Python use them to count backwards from the end of the array. If this was the behavior, the *neighborhood* of our cell would look like this. \`\`\` 0 | 0 | l | s ------------------- r | 0 | bl | b ------------------- 0 | 0 | 0 | 0 ------------------- tr | 0 | tl | t \`\`\` Yikes. The top-right cell is displaced a huge amount, and there are lots of other obvious issues! Because of this phenomenon, we will need to write rules to check if the cell we are evaluating lives on any of the **edges** of our grid, or is one of the four **corner** cells. This is what adds significant complexity to what would otherwise be a very short coding exercise. `33: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'; } }); }34:[] 2e:{"id":"fbdb62c861547ec0","slug":"cellular-automata","title":"Week 8: Cellular Automata and Conway's Game of Life","thumbnail":"21a794e29d3539ec424f0fdf50a8c717a0c7b8e4e613152faf64c6bf28c7d506","access_level":"public","create_time":"$D2020-10-21T17:31:16.850Z","update_time":"$D2023-12-12T21:15:44.248Z","view_time":null,"first_public_time":"$D2020-10-22T23:00:45.795Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":"starter_2024"},"version":736,"publish_version":736,"role":null,"authored":false,"authors":[{"type":"individual","id":"90c59c5f3ef39e0a","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":null}],"members":[{"type":"individual","id":"90c59c5f3ef39e0a","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"6b0c5df9e866fd6e","slug":"id-iit-fall-2020-data-visualization-workshop","title":"ID IIT Fall 2020 Data Visualization Workshop","owner":{"id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino"}},"type":"notebook","body":{"titling":"auto","title":"Week 8: Cellular Automata and Conway's Game of Life","cells":[{"id":0,"value":"md`# Week 8: Cellular Automata and Conway's *Game of Life*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"importD3 = md`\n### Import D3.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"interactive_elements = md`\n### Better Observable Interactions\nTons of Observable pages have modules that we can borrow for our interactive experiences. One of the best is [Jeremy Ashkenas' Inputs Bazaar](https://observablehq.com/@jashkenas/inputs). We'll borrow the sliders from that resource and use them to set up some nice interactions to configure our SVG and cellular automata. \n\nFirst, we need import the resource, and then we can easily configure and deploy them to set Observable global variables.\n\nThere are many other resources for interactive inputs, such as [Buttons](https://observablehq.com/@martien/buttons) and [Timers](https://observablehq.com/@oliviafvane/d3-timer-and-d3-interval-basic-demo), which are implemented further below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"svgArtboard = md`\n### Create SVG Artboard\nAnd, now we can draw the SVG artboard based on the sliders above. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"createSVG = {\n let backgroundColor = \"black\";\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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"play = md`\n### Play the Zero-Player Game!\nAnd now we can draw some buttons, which run functions defined below, to advance the cellular automata through generations. First press \"Generate New Random Grid\" and then, \"Step Forward One Generation\" or any of the other generational advancing buttons.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"md`\n⬇️ Press the \"Generate New Random Grid\" button first! ⬇️\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"md`\n⬇️ Then press any of these to see the simulation advance! ⬇️\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"md`\nTake a look at the button code above which *calls* functions defined later, and also makes use of [D3 timers](https://observablehq.com/@oliviafvane/d3-timer-and-d3-interval-basic-demo) for repeated actions with controllable delays. You might expect that we could use simple \\`\\`\\`for\\`\\`\\` loops for running code multiple times, but due to the **asynchronous** nature of JS, we need to use this alternate construction or else all the generational updates will happen simultaneously and we wouldn't see the all the intermediate generations visualized.\n\nCan you understand what's going on in these code block? There should be lots of familiar bits and pieces, though arranged in a new way. Read more about [intervals and timers in the D3 documentation](https://github.com/d3/d3-timer) to see the different features that they offer. We will talk more about these elements of advanced D3 use in future lessons.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"md`\n### Make Life! \nThe dataset is totally dead, let's make a simple \\`\\`\\`forEach()\\`\\`\\` iterator that works through the dataset and breathes life into cells probabilistically. We will create this as a *function* in Observable so that we can attach it to a button for easier reusability. Note that, if you run the code in the \\`\\`\\`randomizeCA()\\`\\`\\` cell below, the code will not actually run — the function is just defined so that it can be called under other circumstances (like on an interaction event like a button press). Note the stylized *f*() in the cell's output, indicating that this is a function declaration in Observable.\n\nThe button that calls this cell's function is one of the four up above, under the interactive cellular automata, labeled \"Generate New Random Grid.\"\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"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 'black';\n } else {\n return 'white';\n }\n })\n .attr('stroke', 'black')\n .attr('stroke-width', '1')\n .attr('class', 'automaton');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"advancing_rules = md`\n### Advancing the Simulation and Survival/Birth/Death Rules\nA final function manages [generational change](https://www.nytimes.com/2019/10/29/style/ok-boomer.html). It is simple addition and conditionals, but because of the edge and corner issue descibed above, there are many copy and pasted, nearly identical code blocks. It looks intimidating, but it's really not so bad! \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 2f:"$2e:body"