2c:null 2d:["$","title",null,{"children":"1D Cellular Automaton | Mike Bostock | Observable"}] 32:T430,viewof rule = { let value = 30; const form = html``; form.value = value; form.querySelectorAll("button").forEach((button, i) => { i = 7 - i; button.onclick = event => { let v = (value ^= (1 << i)) & (1 << i); button.querySelector("rect:last-child").setAttribute("fill", v ? "black" : "white"); event.preventDefault(); form.value = value; form.dispatchEvent(new CustomEvent("input")); }; }); return form; }33:T4e6,canvas = { const height = 600; const context = DOM.context2d(width, height, 1); context.canvas.style.imageRendering = "pixelated"; context.globalCompositeOperation = "copy"; // Initialize the first row. let row1 = context.getImageData(0, 0, width, 1); for (let i = 0; i < width; ++i) { const p = (i << 2) + 3; row1.data[p] = Math.random() < density ? 255 : 0; } context.putImageData(row1, 0, 0); let row2 = context.createImageData(width, 1); for (let j = 1; true; ++j) { // Read from the first row to write to the second. for (let i = 0; i < width; ++i) { const v0 = row1.data[((i > 0 ? i - 1 : width - 1) << 2) + 3] && 0b100; const v1 = row1.data[(i << 2) + 3] && 0b010; const v2 = row1.data[((i < width - 1 ? i + 1 : 0) << 2) + 3] && 0b001; row2.data[(i << 2) + 3] = rule & (1 << (v0 | v1 | v2)) ? 255 : 0; } // Swap the rows. [row1, row2] = [row2, row1]; // Append until the canvas is full. if (j < height) { context.putImageData(row2, 0, j); continue; } // Otherwise, shift the canvas up before appending the new row. context.drawImage(context.canvas, 0, -1); context.putImageData(row2, 0, height - 1); yield context.canvas; } }34:[] 30:{"id":"53f5657fd22b5ea8","slug":"1d-cellular-automaton","title":"1D Cellular Automaton","thumbnail":"816f7e8f4f5d59bb4974e3a6c37de98bbc01c5c359b9a9c66a99af346c116443","access_level":"public","create_time":"$D2017-12-02T22:43:41.206Z","update_time":"$D2018-10-05T22:19:03.347Z","view_time":null,"first_public_time":"$D2017-12-02T23:15:06.133Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026","bio":"Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."},"version":116,"publish_version":116,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"bio":"Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"titling":"auto","title":"1D Cellular Automaton","cells":[{"id":0,"value":"md`# 1D Cellular Automaton\n\nCurrently showing rule ${rule}; click the squares below to change it. [Rule 30](https://en.wikipedia.org/wiki/Rule_30)’s complex output resembles the pattern of the [textile cone](https://en.wikipedia.org/wiki/Conus_textile), a venomous sea snail.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"viewof density = {\n const form = html``;\n form.i.oninput = () => {\n form.o.value = `${form.i.valueAsNumber}% fill`;\n form.value = form.i.valueAsNumber / 100;\n };\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"