2b:null 2c:["$","title",null,{"children":"4-valued 1D Cellular Automaton | Peter Hofmann | Observable"}] 31:T54c,viewof rules = { let value = rules_pre; const switchPanel = html``; switchPanel.value = value; switchPanel.querySelectorAll("button").forEach((button, i) => { button.onclick = event => { const rule = BigInt( matchRule(value, BigInt(i)) ); const bitmask = (rule%2n ? 0b11n : 0b01n) << BigInt(i)*2n; let v = (value ^= bitmask) & (0b11n << BigInt(i)*2n); button.querySelector("rect:last-child").setAttribute("fill", vColor( parseInt(v >> BigInt(i)*2n) )); event.preventDefault(); switchPanel.value = value; switchPanel.dispatchEvent(new CustomEvent("input")); }; }); return switchPanel; }32:Ta7b,canvas1 = { 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 rgba = [(i << 2) + 0, (i << 2) + 1, (i << 2) + 2, (i << 2) + 3]; const dice = Math.floor(Math.random()*3); row1.data[rgba[3]] = 255; row1.data[rgba[dice]] = (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 rgba = [(i << 2) + 0, // bitshifts indices to handle rgba image data (i << 2) + 1, (i << 2) + 2, (i << 2) + 3]; row2.data[rgba[0]] = row2.data[rgba[1]] = row2.data[rgba[2]] = 0; // resets all pixels to black row2.data[rgba[3]] = 255; // makes sure pixels are opaque // For each cell, check its r, g and b values and get the corresponding 6 bit integers. const L = BigInt(row1.data[((i > 0 ? i - 1 : width - 1) << 2) + 2]) ? 0b010000n // b (1 0 0) : BigInt(row1.data[((i > 0 ? i - 1 : width - 1) << 2) + 0]) ? 0b100000n // r (2 0 0) : BigInt(row1.data[((i > 0 ? i - 1 : width - 1) << 2) + 1]) ? 0b110000n : 0n; // g (3 0 0) const E = BigInt(row1.data[(i << 2) + 2]) ? 0b000100n // b (0 1 0) : BigInt(row1.data[(i << 2) + 0]) ? 0b001000n // r (0 2 0) : BigInt(row1.data[(i << 2) + 1]) ? 0b001100n : 0n; // g (0 3 0) const R = BigInt(row1.data[((i < width - 1 ? i + 1 : 0) << 2) + 2]) ? 0b000001n // b (0 0 1) : BigInt(row1.data[((i < width - 1 ? i + 1 : 0) << 2) + 0]) ? 0b000010n // r (0 0 2) : BigInt(row1.data[((i < width - 1 ? i + 1 : 0) << 2) + 1]) ? 0b000011n : 0n; // g (0 0 3) // Match the combined input values with the ruleset const v = matchRule(rules, (L | E | R)); // leave 0 as is and apply matched color value if (v >= 0) row2.data[rgba[valToRGBindex(v)]] = 255; } // 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; } }33:[] 2f:{"id":"e9fb025fc8c22944","slug":"4-valued-1d-cellular-automaton","title":"4-valued 1D Cellular Automaton","thumbnail":"5367cd67cf5fbbb00be539f9f80dc2e20ca32351f66f430b86ed3582874d016a","access_level":"public","create_time":"$D2019-08-26T18:52:12.344Z","update_time":"$D2019-09-13T10:30:41.621Z","view_time":null,"first_public_time":"$D2019-09-04T21:27:23.628Z","fork":{"id":"53f5657fd22b5ea8","slug":"1d-cellular-automaton","title":"1D Cellular Automaton","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":1,"starred":false,"owner":{"type":"team","id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":"starter_2024"},"version":456,"publish_version":456,"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":2,"collection":{"id":"41a7dc676993b9ac","slug":"experiments","title":"Experiments","owner":{"id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann"}},"type":"notebook","body":{"title":"4-valued 1D Cellular Automaton","cells":[{"id":0,"value":"md`# 4-valued 1D Cellular Automaton\n\nAdaptation of the [1D Cellular Automaton](https://observablehq.com/@mbostock/1d-cellular-automaton) implementation by [@mbostock](https://observablehq.com/@mbostock), but with four logical values (\\`\\`0,1,2,3\\`\\`) instead of two (\\`\\`0,1\\`\\`).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"md`Click the squares below to change it or just smash that “random” button. There are ${bigIntToSciNotation(4n**4n**3n,2)} possible rule combinations, have fun.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"{\n const t = 100;\n const res = 6;\n return md`To give an impression of the variety: There are ${bigIntToSciNotation(evoVariations(4,res,t),2)} possible variations of the evolution of a 4-valued CA just for a resolution of ${res} and only ${t} timesteps. With a 2-valued CA there would be just ${bigIntToSciNotation(evoVariations(2,res,t),2)} possible variations.`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"md`Currently showing rule **${rules}**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"md`Rule as quaternary number (to easily check values):
\\`\\`${pad((rules).toString(4),4**3)}\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"viewof btn_reset = {\n const element = html``;\n element.onclick = () => {\n mutable rules_pre = 0n;\n };\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"viewof btn_random = {\n const element = html``;\n element.onclick = () => {\n mutable rules_pre = getRandomBigInt(4n**4n**3n).value;\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":43,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"matchRule = function(ruleset, input) { // expects BigInt numbers to give exact results\n /* Matches a given ruleset in 64 quaternaries (128 bit) to a 3 quaternaries (6 bit) input from the CA.\n We can use the input to bitshift each of the logical results 1-3 to map to every possible rule combination.\n These numbers can then be used as a bitmask to extract the rule-result combination out of the ruleset.\n Note that:\n - The input value has to be doubled to deal with quaternary results (0=00, 1=01, 2=10, 3=11)\n - For results of 3=11 the bitmask will match also when only one of the 1s is found, \n which is why we have to specify that the number is also divisible by 3 \n (maybe there is a more elegant solution to this problem).\n */\n return (ruleset & (3n << input * 2n)) > 0n && (ruleset & (3n << input * 2n)) % 3n === 0n ? 3\n : (ruleset & (2n << input * 2n)) > 0n ? 2\n : (ruleset & (1n << input * 2n)) > 0n ? 1 : 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"mutable rules_pre = 69783526441283310724926519385286465857n \n/*\n Nice examples:\n 69783526441283310724926519385286465857n\n 139805693759885363348928255353784661112n\n \n Feel free to comment if you find something interesting, I'd love to take a look. (:\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"md`#### Value <> Color translation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"valToRGBindex = function(val) {\n /* Translates the 4 values to RGB color indices. The mapping is based on the book \"uFORM iFORM\" by Ralf Peyn. */\n return val === 3 ? 1 // 3 = green\n : val === 2 ? 0 // 2 = red\n : val === 1 ? 2 : -1; // 1 = blue\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"vColor = function(val) {\n /* Color mappings from logical value to html color string */\n return val === 0 ? '#000000'\n : val === 1 ? '#0000ff'\n : val === 2 ? '#ff0000'\n : val === 3 ? '#00ff00'\n : NaN;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":226,"value":"md`---\n#### Helper & Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":353,"value":"evoVariations = (stateSel, res, t) => {\n const statePerm = BigInt(stateSel)**BigInt(res);\n return factorial_bigInt(statePerm) / factorial_bigInt(statePerm - BigInt(t));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"factorial_bigInt = n => Array.from({length:parseInt(n)},(_,i) => BigInt(i+1)).reduce((acc,curr) => acc*curr,1n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"bigIntToSciNotation = (n,fractionDigits=2) => { \n /* Scientific notation for BigInt numbers (needs some optimization) */\n\tconst nStr = n.toString(10);\n\tconst nLen = nStr.length;\n\tconst fraction = nLen-1 < 16 ? nLen-1 : 16;\n\tconst [wholes, parts] = [nStr.substr(0,1), nLen > 1 ? nStr.substr(1,fraction) : 0];\n\tlet nFloat = parseFloat(wholes+'.'+parts);\n\tnFloat = nFloat.toPrecision( (fractionDigits+1 > parts.length ? 2 : fractionDigits+1) );\n\treturn tex`\\approx ${nFloat} \\times 10^{${nLen-1}}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"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"},{"id":241,"value":"function pad(num, size) {\n while (num.length < size) num = \"0\" + num;\n return num;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":187,"value":"function getRandomBigInt(max) {\n return bigInt.randBetween(0,max);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"bigInt = require('big-integer')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"