3e:null 3f:["$","title",null,{"children":"1D Cellular Automaton with 5 input cells | Ruzgar Imski | Observable"}] 45: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; }46: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; } }47:[] 43:{"id":"4c60c45df3d4283d","slug":null,"title":"1D Cellular Automaton with 5 input cells","thumbnail":"87838cf433121c11c06dad233c2d500c3e27a109a45e72dc1e2533e1aa638662","access_level":"public","create_time":"$D2024-01-13T07:22:10.171Z","update_time":"$D2024-01-13T07:22:10.171Z","view_time":null,"first_public_time":"$D2024-01-13T07:22:10.171Z","has_unpublished_edits":null,"fork":{"id":"de0699854746f746","slug":"1d-cellular-automaton-with-5-input-cells","title":"1D Cellular Automaton with 5 input cells","owner":{"id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann"}},"stars":0,"starred":false,"owner":{"type":"team","id":"62eaf79b101c4021","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":"starter_2024","bio":"","following":false},"version":227,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"mutable rule_pre = 3929517194;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"