1f: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; }20: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; } }21:[] 1d:{"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"},{"id":43,"value":"$1f","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":3,"value":"$20","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W21","stdlib":"1"}