45:["$","title",null,{"children":"Exploring cellular automata | Ramona | Observable"}] 4d:T638,{ canvas.width = zoom; canvas.height = canvas.width; const w = canvas.width, h = canvas.height; // const w = canvas.width; // const h = canvas.height; const bw = Math.floor(canvas.width / zoom); const bh = Math.floor(canvas.height / zoom); const ctx = canvas.getContext('2d'); // Place randomized first generation cells ctx.fillStyle = '#FFFFFF'; ctx.fillRect(0, 0, w, h); ctx.fillStyle = '#000000'; if (seed == "random") { // Random seed for (let i = 0; (i < w * 0.5) | 0; i++) { ctx.fillRect((Math.random() * w) | 0, 0, 1, 1); } } else if (seed == "single") { // Single dot seed ctx.fillRect(Math.floor(w / 2), 0, 1, 1); } else if (seed == "checkerboard") { for (let i = 0; i < w; i += 2) { ctx.fillRect(i, 0, 1, 1); } } const img = ctx.getImageData(0, 0, w, h); function renderLine(y) { const cur = (y + 0) * w * 4; const next = (y + 1) * w * 4; const prev = (y - 1) * w * 4; for (let x = 0; x < w * 4; x += 4) { let prevx = prev + x; let curx = cur + x; let pattern = (img.data[prevx - 4] === 0 ? 4 : 0) | (img.data[prevx + 0] === 0 ? 2 : 0) | (img.data[prevx + 4] === 0 ? 1 : 0); let color = rule & (1 << pattern) ? 0 : 255; img.data[curx + 0] = color; img.data[curx + 1] = color; img.data[curx + 2] = color; img.data[curx + 3] = 255; } } for (let y = 1; y < h; ++y) { renderLine(y); if (y % 10 === 0) { ctx.putImageData(img, 0, 0); yield; } } ctx.putImageData(img, 0, 0); }4e:T475,ruleDigitsToSVG = function(digits) { // digits should be an array of "1"s and "0"s let power = Math.log2(digits.length); let svg = ""; var inputDigits = []; for (var i = 0; i < digits.length; i++) { let boxes = []; inputDigits = (digits.length - i - 1).toString(2).padStart(power, "0"); for (var j = 0; j < power; j++) { boxes.push( `` ); } boxes.push( `` ); svg += `` + boxes.join("\n") + "\n" + "\n"; } return svg; }4f:[] 49:{"id":"063cb160d7cd4ff3","slug":"exploring-cellular-automata","title":"Exploring cellular automata","thumbnail":"0421e17efdb2037b074155d27696fc96aa8697bdc1bcca80a5c2969c189f52f6","access_level":"public","create_time":"$D2020-07-07T23:57:33.615Z","update_time":"$D2024-01-29T07:57:42.931Z","view_time":null,"first_public_time":"$D2020-07-08T19:32:03.029Z","has_unpublished_edits":null,"fork":{"id":"a9e66ae2e93d7a1a","slug":"wolframs-cellular-automata-rule-rule","title":"Wolfram's cellular automata","owner":{"id":"d3839238eae2fb1b","login":"akngs","name":"Alan Kang"}},"stars":13,"starred":false,"owner":{"type":"team","id":"38d9559790b07d9a","login":"ramonaisonline","name":"Ramona","avatar_url":"https://avatars-next.observableusercontent.com/89babbfc09890c9a7660aff126d7bc8f1f133a7603e50b7c33cfac152ca89772","tier":"starter_2024","bio":"Designer at Observable! ✨","followed_by_you":false,"follows_you":false},"version":543,"publish_version":543,"role":null,"authored":false,"authors":[{"type":"individual","id":"6ff2cc6f055e081d","login":"ramonaisonline","name":"Ramona","avatar_url":"https://avatars-next.observableusercontent.com/89babbfc09890c9a7660aff126d7bc8f1f133a7603e50b7c33cfac152ca89772","tier":null,"bio":"Designer at Observable ✨","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"6ff2cc6f055e081d","login":"ramonaisonline","name":"Ramona","avatar_url":"https://avatars-next.observableusercontent.com/89babbfc09890c9a7660aff126d7bc8f1f133a7603e50b7c33cfac152ca89772","tier":null,"role":"editor"}],"comments":[{"id":"0ccf756db961dac4","reply_to_id":null,"content":"You might like to know about String.prototype.padStart ;)\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart","create_time":"$D2020-09-04T12:30:04.279Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"cae924adff874d09","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":null}},{"id":"1c883a70901fe5d7","reply_to_id":"0ccf756db961dac4","content":"Amazing! Thanks for the link :) now I can take this cell out!","create_time":"$D2020-09-04T17:18:48.778Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"6ff2cc6f055e081d","login":"ramonaisonline","name":"Ramona","avatar_url":"https://avatars-next.observableusercontent.com/89babbfc09890c9a7660aff126d7bc8f1f133a7603e50b7c33cfac152ca89772","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"d719244ef10d4908","slug":"cellular-automata","title":"Cellular Automata","owner":{"id":"38d9559790b07d9a","login":"ramonaisonline","name":"Ramona"}},"type":"notebook","body":{"titling":"auto","title":"Exploring cellular automata","cells":[{"id":0,"value":"md`# Exploring cellular automata\nThis notebook gives you some tools to explore the wild world of Cellular Automata, as seen in Stephen Wolfram's book _A New Kind of Science_.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"introText = md`## Rule\nThe rules for a cellular automata can be described visually. Given an input window of 3 blocks, what color should the corresponding block be in the next row of the simulation for each possible input case?\n\nFor a window size of 3, there should be 2^3 = 8 input cases, and a binary output for each one. If we take each of the outputs to be ones or zeros, this means that we can conveniently represent our 8 rules as a single integer in the range 0 to 255! We can use that model to quickly explore the behavior of different rule sets by just scrubbing through numbers.\n\nFor some fun and surprising behavior, check out Rule 30, 57, 90, 100 and 150! What other cool patterns can you find?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":" ruleViz = svg`\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"ruleInput = viewof rule.bind(\n html``\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"ruleSlider = viewof rule.bind(\n html``\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"md`## Cellular Automata`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"viewof zoom = slider({\n min: 8,\n max: 512,\n step: 2,\n value: 512,\n title: \"Blocks in a row\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"viewof seed = radio({\n title: 'Initial seed',\n description:\n 'Choose what should be in the first row of the cellular automata',\n options: [\n { label: 'Random', value: 'random' },\n { label: 'Single Black Square', value: 'single' },\n { label: 'Checkerboard', value: 'checkerboard' }\n ],\n value: 'random'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"canvas = {\n const w = 512,\n h = w * 1;\n const ctx = DOM.context2d(w, h, 1);\n ctx.canvas.style.margin = \"0 -14px\";\n ctx.canvas.style.imageRendering = \"pixelated\";\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"md`## Helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"viewof rule = new View(30)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"ruleDigits = ruleString.split(\"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"ruleString = rule.toString(2).padStart(8, \"0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"digitToColor = function(d) {\n if (d == \"0\") {\n return \"#fff\";\n }\n if (d == \"1\") {\n return \"#000\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"dimensions = ({\n boxSize: 20,\n horizontalPadding: 0,\n verticalPadding: 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"import { View } from \"@mbostock/synchronized-views\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"import { button, number, slider, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 44:null