30:T817,## Usage first you need to import it ```js import { automaton } from "@nxrix/cellular-automaton" ``` Then call the imported function in a new cell with parameters you like ```js automaton({ width: 64, height: 64, scale: 4, rule: "B3/S23", init: "111\n100\n010", paused: false }) ``` --- ### Parameters | Parameter | Type | Default | Description | | :-------- | :--- | :------ | :---------- | | `width` | `number` | 128 | Grid width | | `height` | `number` | 128 | Grid height | | `rule` | `string` or `number` | `6152` | Rule | | `scale` | `number` | `2` | Display scale | | `colored` | `boolean` | `false` | Color based on neighbors count | | `seed` | `number` | `null` | Random seed | | `init` | `number`, `string`, or `function` | `0.5` | Initial pattern | | `initialSteps` | `number` | 0 | Number of steps to run before first draw | | `speed` | `number` | 1 | Steps per frame (can be fractional) | | `showInfo` | `boolean` | `true` | Show generation and population counter | | `controls` | `boolean` | `true` | Show Reset/Play/Step buttons | | `paused` | `boolean` | `true` | Start paused or running | --- ### Rule formats * Number - an 18‑bit integer. * String - the classic notation: "B3/S23" (born with 3, survives with 2 or 3). --- ### Initialization (init) You can set the starting pattern in three ways: 1. Random density - a number between 0 and 1 2. Pattern string - a multi‑line grid of 0 and 1 - Automatically centered - Lines beginning with `#` are ignored ```js init: `111 100 010` ``` 3. Function - receives (x,y) and returns 1 (live) or 0 (dead) ```js init: (x, y) => (x === y) ? 1 : 0 ``` --- The returned object includes: `.pause()` / `.resume()` - pause and resume animation. `.step()` - advance one generation. `.stepn(n)` - advance n generations (with early exit on stability). `.reset(newInit?)` - reset with a new initial pattern. `.rule` - get or set the rule (as string or number). `.generation` - current step count. `.population` - current number of live cells. ---31:T1fb8,automaton = ({ width = 128, height = 128, rule = 6152, scale = 2, colored = false, seed = null, init = 0.5, initialSteps = 0, speed = 1, showInfo = true, controls = true, paused = true } = {}) => { const canvas = document.createElement("canvas"); canvas.style.imageRendering = "pixelated"; canvas.width = width; canvas.height = height; canvas.style.width = width * scale + "px"; canvas.style.maxWidth = "100%"; const ctx = canvas.getContext("2d"); const img = ctx.createImageData(width, height); const img_data = img.data; const size = width * height; for (let i = 3; i < size * 4; i += 4) img_data[i] = 255; let generation = 0; let population = 0; const info = showInfo ? html`

` : null; let lut; if (colored) { const ns = 18; lut = d3.range(ns).map((i) => { const c = d3.interpolateTurbo(i / (ns - 1)); return c .substr(4, c.length - 5) .split(",") .map(Number); }); } let c = new Uint8Array(size); let n = new Uint8Array(size); const nbs = new Array(size); for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const i = y * width + x; const nb = []; for (let dy = -1; dy <= 1; dy++) { for (let dx = -1; dx <= 1; dx++) { if (dx === 0 && dy === 0) continue; const nx = (x + dx + width) % width; const ny = (y + dy + height) % height; nb.push(ny * width + nx); } } nbs[i] = nb; } } const s2q = (s) => { const m = s.match(/^B\s*([0-8]*)\s*\/?\s*S\s*([0-8]*)$/i); if (!m) return null; let [_, br, sr] = m; let r = 0; for (let c of br) r |= 1 << c; for (let c of sr) r |= 1 << (+c + 9); return r; }; if (typeof rule === "string") rule = s2q(rule); const step = () => { let l = 0; for (let i = 0; i < size; i++) { const nb = nbs[i]; const t = c[nb[0]] + c[nb[1]] + c[nb[2]] + c[nb[3]] + c[nb[4]] + c[nb[5]] + c[nb[6]] + c[nb[7]]; const v = c[i]; const nv = (rule >> (v * 9 + t)) & 1; n[i] = nv; l += nv - v; } [c, n] = [n, c]; generation++; population += l; }; const stepn = (k) => { for (let j = 0; j < k; j++) { let ch = false; let l = 0; for (let i = 0; i < size; i++) { const nb = nbs[i]; const t = c[nb[0]] + c[nb[1]] + c[nb[2]] + c[nb[3]] + c[nb[4]] + c[nb[5]] + c[nb[6]] + c[nb[7]]; const v = c[i]; const nv = (rule >> (v * 9 + t)) & 1; n[i] = nv; l += nv - v; if (nv !== v) ch = true; } [c, n] = [n, c]; generation++; population += l; if (!ch) break; } }; const setImageDataBW = (d) => { for (let i = 0; i < size; i++) { const p = i * 4; const v = c[i] * 255; d[p] = v; d[p + 1] = v; d[p + 2] = v; } }; const setImageDataColored = (d) => { for (let i = 0; i < size; i++) { const nb = nbs[i]; const t = c[nb[0]] + c[nb[1]] + c[nb[2]] + c[nb[3]] + c[nb[4]] + c[nb[5]] + c[nb[6]] + c[nb[7]]; const p = i * 4; const v = c[i]; //const l = lut[t * 2 + v]; const l = lut[t + v * 9]; d[p] = l[0]; d[p + 1] = l[1]; d[p + 2] = l[2]; } }; let rnds = 0n; const rng = (s = 0n) => { s = s | 7012135492040785920n; return () => { s = (s * 6364136223846793005n + 1442695040888963407n) & 18446744073709551615n; const x = Number(((s >> 18n) ^ s) >> 27n) >>> 0; const r = Number(s >> 59n); return ((x >>> r) | (x << ((32 - r) & 31))) >>> 0; }; }; const srnd = (s) => { rnds = ((s != undefined && s != null ? BigInt(s) : BigInt(Date.now()) ^ BigInt(Math.floor(Math.random() * 0xffffffff))) & 0xffffffffn) | 7012135492040785920n; }; const rnd = (m) => { rnds = (rnds * 6364136223846793005n + 1442695040888963407n) & 18446744073709551615n; const x = Number(((rnds >> 18n) ^ rnds) >> 27n) >>> 0; const r = Number(rnds >> 59n); const o = (((x >>> r) | (x << ((32 - r) & 31))) >>> 0) / 0x100000000; if (Array.isArray(m)) { return m[(o * m.length) | 0]; } else { return o * (m || 1); } }; srnd(seed); let irnds = rnds; const reset = (inp = init) => { rnds = irnds; generation = 0; for (let i = 0; i < size; i++) c[i] = 0; if (typeof inp === "number") { for (let i = 0; i < size; i++) c[i] = rnd() > inp ? 1 : 0; } else if (typeof inp === "string") { inp = inp.trim().replaceAll(" ", ""); const lines = inp .split("\n") .map((l) => l.trim()) .filter((l) => l.length > 0 && !l.startsWith("#")); const w = Math.max(...lines.map((l) => l.length)); const h = lines.length; const ox = Math.floor((width - w) / 2); const oy = Math.floor((height - h) / 2); for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++) { const gx = ox + x; const gy = oy + y; if (gx >= 0 && gx < width && gy >= 0 && gy < height) { c[gy * width + gx] = (lines[y][x] || "0") === "1" ? 1 : 0; } } } } else if (typeof inp === "function") { for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { c[y * width + x] = inp(x, y) ? 1 : 0; } } } else { for (let i = 0; i < size; i++) c[i] = rnd() > 0.5 ? 1 : 0; } population = 0; for (let i = 0; i < size; i++) population += c[i]; }; const draw = () => { if (info) info.innerText = `Generation: ${generation}\nPopulation: ${population}`; if (colored) { setImageDataColored(img_data); } else { setImageDataBW(img_data); } ctx.putImageData(img, 0, 0); }; let id = null; let frac = 0; const u = (t) => { frac += speed; const whole = Math.floor(frac); frac -= whole; if (whole > 0) stepn(whole); draw(); if (!paused) id = requestAnimationFrame(u); }; Inputs.disposal(canvas).then(() => { cancelAnimationFrame(id); }); let rbtn; let pbtn; let sbtn; if (controls) { rbtn = html``; pbtn = html``; sbtn = html``; } const e = html`

${canvas} ${info || ""} ${ controls ? html`

${rbtn}${pbtn}${sbtn}

` : "" }

`; e.pause = () => { if (id) { cancelAnimationFrame(id); id = null; paused = true; if (controls) pbtn.innerText = paused ? "Play" : "Pause"; } }; e.resume = () => { if (!id && paused) { paused = false; if (controls) pbtn.innerText = paused ? "Play" : "Pause"; id = requestAnimationFrame(u); } }; if (controls) { rbtn.onclick = () => { reset(); draw(); }; pbtn.onclick = () => { if (paused) e.resume(); else e.pause(); }; sbtn.onclick = () => { step(); draw(); }; } e.step = step; e.stepn = stepn; e.draw = draw; e.reset = reset; Object.defineProperty(e, "rule", { get: () => rule, set: (r) => { if (typeof r === "string") r = s2q(r); if (r !== null) rule = r; } }); Object.defineProperty(e, "speed", { get: () => speed, set: (v) => { speed = v; frac = 0; } }); Object.defineProperty(e, "generation", { get: () => generation }); Object.defineProperty(e, "population", { get: () => population }); reset(); if (initialSteps > 0) stepn(initialSteps); if (paused) { draw(); } else u(); return e; }32:[] 2e:{"title":"Cellular Automaton","cells":[{"id":0,"value":"# Cellular Automaton\n\nA cellular automaton component for Observable.","pinned":false,"hidden":false,"mode":"md"},{"id":135,"value":"a= automaton({\n width: 128,\n height: 96,\n scale: 4,\n rule: \"B1357/S1357\",\n init: \"111\\n101\\n111\",\n initialSteps: 22,\n showInfo: false,\n controls: false,\n paused: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"a.rule","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":258,"value":"## Examples","pinned":false,"hidden":false,"mode":"md"},{"id":267,"value":"### Game Of Life\nB3/S23","pinned":false,"hidden":false,"mode":"md"},{"id":264,"value":"automaton()","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"### Persian Rugs\nB234/S","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"automaton({\n rule: \"B234/S\",\n init: \"11\\n11\",\n speed: 0.0625,\n initialSteps: 32\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"### Fredkin's Replicator\nB1357/S1357","pinned":false,"hidden":false,"mode":"md"},{"id":154,"value":"automaton({\n rule: \"B1357/S1357\",\n init: \"101\\n111\\n010\",\n speed: 0.0625,\n initialSteps: 12\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"---\n## Core","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}