2c:null 2d:["$","title",null,{"children":"1D Cellular Automaton with 5 input cells | Peter Hofmann | Observable"}] 32:T4fa,viewof rule = { let value = rule_pre; const form = html``; form.value = value; form.querySelectorAll("button").forEach((button, i) => { i = 31 - 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:T595,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 - 2 : width - 2) << 2) + 3] && 0b10000; const v1 = row1.data[((i > 0 ? i - 1 : width - 1) << 2) + 3] && 0b01000; const v2 = row1.data[(i << 2) + 3] && 0b00100; const v3 = row1.data[((i < width - 1 ? i + 1 : 0) << 2) + 3] && 0b00010; const v4 = row1.data[((i < width - 1 ? i + 2 : 1) << 2) + 3] && 0b00001; row2.data[(i << 2) + 3] = rule & (1 << (v0 | v1 | v2 | v3 | v4)) ? 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":"de0699854746f746","slug":"1d-cellular-automaton-with-5-input-cells","title":"1D Cellular Automaton with 5 input cells","thumbnail":"9098ce4a48c0ac79fd51b90c1ffcbd248a02b254cb431b0279bb921de6a01ff3","access_level":"public","create_time":"$D2019-08-28T20:18:40.150Z","update_time":"$D2019-09-04T22:17:15.169Z","view_time":null,"first_public_time":"$D2019-09-04T20:42:44.900Z","fork":{"id":"53f5657fd22b5ea8","slug":"1d-cellular-automaton","title":"1D Cellular Automaton","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":4,"starred":false,"owner":{"type":"team","id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":"starter_2024"},"version":227,"publish_version":227,"role":null,"authored":false,"authors":[{"type":"individual","id":"b20948974f4dc365","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":null}],"members":[{"type":"individual","id":"b20948974f4dc365","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"41a7dc676993b9ac","slug":"experiments","title":"Experiments","owner":{"id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann"}},"type":"notebook","body":{"title":"1D Cellular Automaton with 5 input cells","cells":[{"id":0,"value":"md`# 1D Cellular Automaton with 5 input cells\n\nAdaptation of the [1D Cellular Automaton](https://observablehq.com/@mbostock/1d-cellular-automaton) implementation by [@mbostock](https://observablehq.com/@mbostock), but for 5 input cells instead of 3.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"md`Click the squares below to change it or just smash that “random” button. There are ${toSciNotation(2**2**5)} possible combinations, have fun.\n\nCurrently showing rule **${rule}**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"viewof btn_random = {\n const element = html``;\n element.onclick = () => {\n mutable rule_pre = Math.floor(Math.random()*(2**2**5));\n };\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":3,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"mutable rule_pre = 3929517194;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"toSciNotation = (num) => {\n /* Credits to Manolis Kalafatis (stackoverflow: https://stackoverflow.com/a/53169221) */\n const numInSciNot = {};\n [numInSciNot.coefficient, numInSciNot.exponent] =\n num.toExponential(2).split('e').map(item => Number(item));\n\n return tex`\\approx ${numInSciNot.coefficient} \\times 10^{${numInSciNot.exponent}}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"