2c:null 2d:["$","title",null,{"children":"The Nature of Code - 7 - Cellular Automata | Adam Jurczyk | Observable"}] 32:T8c8,{ const height = expl_7_1.height; let ruleSet; const setRuleSet = (r) => { ruleSet = r .toString(2) .padStart(8, "0") .split("") .map((v) => parseInt(v)) .reverse(); }; setRuleSet(expl_7_1.rule === "custom" ? expl_7_1.customRule : expl_7_1.rule); const cellSize = expl_7_1.cellSize; const cells = Math.floor(width / cellSize); const rows = Math.floor(height / cellSize); const nextState = (c, st) => { const rs = [st.at(c - 1), st[c], st[(c + 1) % cells]].join(""); const rn = parseInt(rs, 2); return ruleSet[rn]; }; let hist = []; let prev; let state; const initState = () => { state = array(cells, (i) => expl_7_1.rnd ? Math.round(random()) : i === Math.floor(cells / 2) ? 1 : 0 ); }; initState(); const colorFunc = coloringFunctions[expl_7_1.colorFunc]; let row = 0; let x, y, c; const drawNext = (ctx) => { if (row === rows) return; prev = state.slice(); y = row * cellSize; for (c = 0; c < cells; ++c) { x = c * cellSize; ctx.fillStyle = colorFunc(c, state, prev); ctx.fillRect(x, y, cellSize, cellSize); } for (c = 0; c < cells; ++c) { state[c] = nextState(c, prev); } ++row; }; let lastFrame = 0; return justCanvas({ width, height, visibility, keepState: true }, (ctx) => { const diff = performance.now() - lastFrame; if (diff < expl_7_1.animDelay) return; lastFrame = performance.now(); if (expl_7_1.anim === "None") { while (row < rows) { drawNext(ctx); } } else { if (expl_7_1.anim === "Next" && row === rows) { setRuleSet(Math.floor(random(256))); initState(); row = 0; } if (expl_7_1.anim === "Infinite") { hist.push(prev); if (hist.length === rows) hist.shift(); if (row === rows) { for (let i = 0; i < hist.length; ++i) { y = i * cellSize; for (c = 0; c < cells; ++c) { x = c * cellSize; ctx.fillStyle = colorFunc(c, hist[i], hist[i - 1]); ctx.fillRect(x, y, cellSize, cellSize); } } --row; } } drawNext(ctx); } }); }33:T4ec,coloringFunctions = ({ blackAndWhite: (idx, state, prev) => { return state[idx] ? "#000" : "#fff"; }, grey8bit: (idx, state, prev) => { const s = []; for (let i = 0; i < 8; ++i) { s.push(state[modulo(idx + i, state.length)] ? 0 : 1); } const c = parseInt(s.join(""), 2).toString(16); return "#" + c + c + c; }, avarage: (idx, state, prev) => { let s = 0; for (let i = -1; i < 2; ++i) { s += state[modulo(idx + i, state.length)] ? 0 : 1; s += prev ? (prev[modulo(idx + i, state.length)] ? 0 : 1) : 1; } s /= 6; s = Math.floor(s * 0xff).toString(16); return "#" + s + s + s; }, rgb111Neg: (idx, state, prev) => { return ( "#" + [state.at(idx - 1), state[idx], state[(idx + 1) % state.length]] .map((c) => (c ? "f" : "0")) .join("") ); }, rgb333: (idx, state, prev) => { const s = []; for (let i = -4; i <= 4; ++i) { s.push(state[modulo(idx + i, state.length)] ? 0 : 1); } return ( "#" + [s.slice(0, 3), s.slice(3, 6), s.slice(6, 9)] .map((a) => Math.floor((parseInt(a.join(""), 2) / 7) * 255) .toString(16) .padStart(2, "0") ) .join("") ); } })34:Ta20,{ const height = 400; let ruleSet; const setRuleSet = (r) => { ruleSet = r .toString(2) .padStart(8, "0") .split("") .map((v) => parseInt(v)) .reverse(); }; setRuleSet(ex_7_3.rule === "custom" ? ex_7_3.customRule : ex_7_3.rule); const cellSize = 20; const cells = Math.floor(width / cellSize); const rows = Math.floor(height / cellSize); const nextState = (c, st) => { const rs = [st.at(c - 1), st[c], st[(c + 1) % cells]].join(""); const rn = parseInt(rs, 2); return ruleSet[rn]; }; let hist = []; let prev; let state; const initState = () => { state = Array.from({ length: cells }, (_, i) => i === Math.floor(cells / 2) ? 1 : 0 ); }; initState(); let row = 0, nextRowToKill = 0; let x, y, c; const nextRowEnts = () => { prev = state.slice(); const ents = []; for (c = 0; c < cells; ++c) { x = cellSize / 2 + c * cellSize; const ent = createMatterEntity({ pos: vec2(x, 0), r: cellSize / 2, // w: cellSize, // h: cellSize, restitution: 0.1, fill: state[c] ? "#000" : "#fff" }); ent.rowNum = row; ents.push(ent); state[c] = nextState(c, prev); } ++row; return ents; }; let diff = 0; let nextAfter = 100; let nextToDrop = []; const bodyRain = (env, ents) => { diff += env.clock.delta; if (diff < nextAfter && !env.mouse.down) return; diff = 0; if (nextToDrop.length === 0) { nextToDrop = nextRowEnts(); shuffleArray(nextToDrop); if (row > rows) { for (let i = 0; i < ents.length; ++i) { const ent = ents[i]; if (ent.rowNum === undefined) continue; if (ent.rowNum <= nextRowToKill) { env.killEntity(ent); } else { ++nextRowToKill; break; } } } } const ent = nextToDrop.pop(); env.addEntity(ent); Matter.Composite.add(env.engine.world, ent.body); }; return sim({ visibility, width, height: height, systems: [bodyRain, matterSys, renderer, showStats], entities: [ createMatterEntity({ pos: vec2(width / 2, height + 30), w: width, h: 60, isStatic: true }), createMatterEntity({ pos: vec2(-30, height / 2), w: 60, h: height, isStatic: true }), createMatterEntity({ pos: vec2(width + 30, height / 2), w: 60, h: height, isStatic: true }) ] }); }35:T5d9,### Example 7.2: Game of Life - **Exercise 7.5**: _Create a Game of Life simulation that allows you to manually configure the grid, either by hardcoding initial cell states or by drawing directly to the canvas. Use the simulation to explore some of the known Game of Life patterns._ - Use controls below simulation to change it. - Drag/click LMB to mark alive cells, or RMB to kill cells. - **Exercise 7.6**: _Implement a wraparound feature for the Game of Life so that cells on the edges have neighbors on the opposite side of the grid._ - check `Wrap` setting. - ~~**Exercise 7.7**: _Implement GoL with only two swapped arrays._~~ - replaced with OOP similar to **Example 7.3**. - **Exercise 7.9**: _Die from overpopulation with 80% chance, and from loneliness with 60% chance_ - pick `probabilistic` rule. - **Exercise 7.12**: _Visualize the Game of Life by coloring each cell according to the amount of time it has been alive or dead._ - check `Color history` setting. As usual, I might have gone a bit overboard at this.. its not like I want to reimplement whole [LifeViewer](https://conwaylife.com/wiki/LifeViewer)... but i might xD In general, I found _a lot_ of resources and information on [LifeWiki](https://conwaylife.com/wiki/Main_Page), like [rule strings](https://conwaylife.com/wiki/Rulestring), [patterns](https://conwaylife.com/wiki/Category:Patterns) and [RLE format](https://conwaylife.com/wiki/Run_Length_Encoded) - go check it out for some mind-blowing stuff!.36:T862,{ const height = e_7_2.height; const cellSize = e_7_2.cellSize; const cols = Math.floor(width / cellSize); const rows = Math.floor(height / cellSize); const pattern = e_7_2.pattern?.trim().length > 0 ? parseRLE(e_7_2.pattern) : null; const rule = new Rule(e_7_2.rule); const ca = new CA2D({ cols, rows, cellFactory: (ca, col, row) => new HistCell(ca, col, row, rule), wrap: true }); if (pattern) { ca.placeCells(pattern); } else { ca.forEach((cell) => cell.set(Math.round(random()))); } const valAt = (pos) => ca.cells[Math.floor(pos.y / cellSize)][Math.floor(pos.x / cellSize)].state; const setValAt = (pos, val) => ca.cells[Math.floor(pos.y / cellSize)][Math.floor(pos.x / cellSize)].set( val ); let runOnce = (ctx) => { ctx.canvas.style.border = ca.wrap ? "1px solid #fff0" : "1px solid #eaa"; }; let paused = false; let drawing = null; const handleMouse = (mouse) => { if (drawing) { if (mouse.down) { setValAt(mouse.pos, drawing.value); } else { drawing = null; } } else if (mouse.click) { if (mouse.main && mouse.shift) { paused = !paused; } else if (mouse.main) { drawing = { value: 1 }; } else { drawing = { value: 0 }; } } }; const genSpeeds = [1, 0.1, 0.06, 0.03, 0.01, 0]; let genDelay = genSpeeds[2]; let showHist = true; let drawGrid = true; e_7_2_fps_updater.onUpdate = (form) => { genDelay = genSpeeds[Math.min(4, Math.max(0, form.speed - 1))]; ca.wrap = form.opts.includes("Wrap"); paused = form.opts.includes("Paused"); drawGrid = form.opts.includes("Show grid"); showHist = form.opts.includes("Color history"); return true; }; let delayLeft = genDelay; return justCanvas( { width, height, visibility, keepState: true }, (ctx, { dt, mouse, step }) => { handleMouse(mouse); if (!paused && (delayLeft -= dt) <= 0) { delayLeft = genDelay; ca.next(); } ca.draw(ctx, cellSize, { grid: drawGrid, showHist }); if (runOnce) runOnce(ctx); } ); }37:Tf9a,pattern_files = [ `#N random `, `#N empty !`, `#N LifeViewer starting pattern x = 7, y = 3, rule = B3/S23 o3b3o$3o2bo$bo!`, `#N R-pentomino #C A methuselah with lifespan 1103. #C www.conwaylife.com/wiki/index.php?title=R-pentomino x = 3, y = 3, rule = B3/S23 b2o$2ob$bo!`, `#N Acorn #O Charles Corderman #C A methuselah with lifespan 5206. #C www.conwaylife.com/wiki/index.php?title=Acorn x = 7, y = 3, rule = B3/S23 bo5b$3bo3b$2o2b3o!`, `#N Gosper glider gun #O Bill Gosper #C A true period 30 glider gun. #C The first known gun and the first known finite pattern with unbounded growth. #C www.conwaylife.com/wiki/index.php?title=Gosper_glider_gun x = 36, y = 9, rule = B3/S23 24bo11b$22bobo11b$12b2o6b2o12b2o$11bo3bo4b2o12b2o$2o8bo5bo3b2o14b$2o8b o3bob2o4bobo11b$10bo5bo7bo11b$11bo3bo20b$12b2o!`, `#N Loafer (glider synth) #O Matthias Merzenich #C 8-glider synthesis of loafer found 18 February 2013, #C based on 18-glider synthesis found by Adam Goucher on 17 February. #C https://www.conwaylife.com/forums/viewtopic.php?f=2&t=1031#p7465 #C https://conwaylife.com/wiki/Loafer x = 34, y = 31, rule = B3/S23 33bo$31b2o$32b2o$9bo$bo8bo$2bo5b3o$3o3$5bo$6bo$4b3o$24bobo$25b2o$25bo 2$27bobo$27b2o$28bo$31b3o$31bo$32bo7$5b2o$6b2o$5bo!`, `#N Snail #O Tim Coe #C The first c/5 orthogonal spaceship to be discovered. Has period 5. Found in January 1996. #C www.conwaylife.com/wiki/index.php?title=Snail x = 38, y = 21, rule = B3/S23 bo36b$bo36b$o37b$b3o17b3o3b3o8b$b2obo9bo3bobo6b3o8b$2bo11b2obo7bo4b4o 4b$6bo6bo3bobo3b2obo5b2o4b$3bo2bob3o3b2o9bo8b2obo$3b2obo5bo5bo17bob$9b ob7o20b2$9bob7o20b$3b2obo5bo5bo17bob$3bo2bob3o3b2o9bo8b2obo$6bo6bo3bob o3b2obo5b2o4b$2bo11b2obo7bo4b4o4b$b2obo9bo3bobo6b3o8b$b3o17b3o3b3o8b$o 37b$bo36b$bo!`, `#N Garden of Eden 5x45 #O Steven Eker, 2016 #C https://conwaylife.com/wiki/Garden_of_Eden_5%C3%9745 #C https://www.conwaylife.com/patterns/gardenofeden5x45.rle x = 45, y = 5, rule = B3/S23 2obobo2bob3obo2b3ob7o2b6o2bobobobo$b2obob2obobobobobob3obobobobobobob 3obobobo$2b2ob2o2b4o2b6o2b6o2b5ob5obo$b2obob2obobobobobob3obobobobobob ob3obobobo$2obobo2bob3obo2b3ob7o2b6o2bobobobo!`, `#N HighLife Replicator #O #C http://conwaylife.com/wiki/HighLife x = 35, y = 19, rule = B36/S23 2o33b$2o10bo22b$11b2o22b$10bobo22b$9b3o23b$35b$15b3o17b$14bobo18b$14b2o19b$ 14bo20b$35b$35b$35b$35b$35b$35b$35b$33b2o$33b2o!`, `#N Day & Night rocket x = 8, y = 5, rule = B3678/S34678 b2o$ob2o$8o$ob2o$b2o! `, `#N Spaceship (requires lots of space) #C https://conwaylife.com/wiki/Growing/shrinking_spaceship #C https://www.conwaylife.com/patterns/growingshrinkingspaceship.rle x = 253, y = 123, rule = B3/S23 186b6o$186bo5bo$186bo$187bo4bo$189b2o$157b2o$156b2ob3o$157b5o$158b2ob 2o$162bo$160b2ob2o10b3o$161bob2o12bo8b2o$157b4o3bo11bo7bo4bo$156b4ob 3o19bo$155b2ob2o2b2o19bo5bo$156b2o4bo20b6o$162bo$149b4o$149bo3bo19b6o $149bo23bo5bo25bo$150bo2bo9b2o8bo30bo$162b2o10bo4bo24b3o$136b2o26bo 11b2o$135b4o$134b2ob2o11bo$135b2o5bo2bo3bob4o$141bo3bo4b2o3bo$140b2o 4bo4bo4bo$141bo3bo4b2o$135b2o5bo2bo3bob2obo$134b2ob2o11bo3bobo$135b4o 16b2o$136b2o$148b3o$147b5o$146b2ob3o$147b2o$223bo$155b4o63bo$155bo3bo 62b3o$155bo$156bo2bo11$249b3o$5o243b5o$o4bo241b2ob3o$o240bo6b2o$bo3bo 234bo$3bo236b3o$2b3o$b4o$2ob2o$b2o4b3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob 3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob 3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob3ob 3ob3ob3o4$240b3o$2b6o232bo$2bo5bo232bo6b2o$2bo244b2ob3o$3bo4bo239b5o$ 5b2o242b3o11$156bo2bo$155bo$155bo3bo62b3o$155b4o63bo$223bo$147b2o$ 146b2ob3o$147b5o$148b3o$136b2o$135b4o16b2o$134b2ob2o11bo3bobo$135b2o 5bo2bo3bob2obo$141bo3bo4b2o$140b2o4bo4bo4bo$141bo3bo4b2o3bo$135b2o5bo 2bo3bob4o$134b2ob2o11bo$135b4o$136b2o26bo11b2o$162b2o10bo4bo24b3o$ 150bo2bo9b2o8bo30bo$149bo23bo5bo25bo$149bo3bo19b6o$149b4o$162bo$156b 2o4bo20b6o$155b2ob2o2b2o19bo5bo$156b4ob3o19bo$157b4o3bo11bo7bo4bo$ 161bob2o12bo8b2o$160b2ob2o10b3o$162bo$158b2ob2o$157b5o$156b2ob3o$157b 2o$189b2o$187bo4bo$186bo$186bo5bo$186b6o!` ]38:T7c4,class CA2D { constructor({ cols, rows, cellFactory, wrap = false } = {}) { this.wrap = wrap; this.cols = cols; this.rows = rows; this.generation = 0; this.cells = array2d(cols, rows, (col, row) => cellFactory(this, col, row)); } next() { for (let row = 0; row < this.rows; ++row) { for (let col = 0; col < this.cols; ++col) { this.cells[row][col].prev = this.cells[row][col].state; } } ++this.generation; const nbsFn = this.wrap ? array2d.nbsw : array2d.nbs; for (let row = 0; row < this.rows; ++row) { for (let col = 0; col < this.cols; ++col) { this.cells[row][col].next(nbsFn(this.cells, col, row)); } } } placeCells(cells, row, col) { const r0 = row ?? Math.floor((this.rows - cells.h) / 2); const c0 = col ?? Math.floor((this.cols - cells.w) / 2); for (let r = 0; r < cells.lines.length; ++r) { for (let c = 0; c < cells.lines[r].length; ++c) { this.cells[r0 + r][c0 + c].set(cells.lines[r][c]); } } } forEach(fn) { for (let r = 0; r < this.rows; ++r) { for (let c = 0; c < this.cols; ++c) { fn(this.cells[r][c], c, r); } } } draw(ctx, cellSize, opts = {}) { ctx.save(); let x, y, r, c; for (r = 0; r < this.rows; ++r) { for (c = 0; c < this.cols; ++c) { x = c * cellSize; y = r * cellSize; this.cells[r][c].draw(ctx, x, y, cellSize, opts); } } if (opts.grid && cellSize > 4) { const w = this.cols * cellSize + 1; const h = this.rows * cellSize + 1; ctx.strokeStyle = "#eee"; for (r = 0; r <= this.rows; ++r) { y = r * cellSize; ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke(); } for (c = 0; c <= this.cols; ++c) { x = c * cellSize; ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke(); } } } }39:T475,class Rule { constructor(ruleString) { this.str = ruleString; this.map = {}; this.#parse(ruleString); } #parse(ruleString) { if (!ruleString.includes("B")) { throw new Error("rule string must have at least B rule defined"); } const rulesParts = ruleString.trim().toUpperCase().split("/"); for (const part of rulesParts) { if (part.match(/^([BSD])/)) { const ruleVals = (this.map[part[0]] = []); for (const match of part.matchAll(/(\d)(?:{(\d*\.\d+)})?/g)) { ruleVals[parseInt(match[1])] = match[2] ? Number(match[2]) : 1; } } else { console.warn("unknown rule part", part, ruleString); } } } next(nbsAliave, prev) { const b = this.map.B?.[nbsAliave] ?? 0; if (prev === 0 && b > 0) { return b === 1 || Math.random() < b ? 1 : 0; } const s = this.map.S?.[nbsAliave] ?? 0; if (prev === 1 && s > 0) { return s === 1 || Math.random() < s ? 1 : 0; } const d = this.map.D?.[nbsAliave] ?? 1; if (prev === 1 && d > 0) { return d === 1 || Math.random() < d ? 0 : 1; } return 0; } }3a:T566,class CA2D_twoArrays { constructor(cols, rows, { wrap = false, rule = "B3/S23" } = {}) { this.wrap = wrap; this.cols = cols; this.rows = rows; this.state = array2d(cols, rows, 0); this.prev = array2d(cols, rows, 0); this.rule = rule; this.ruleMap = this.parseRule(rule); } next() { [this.prev, this.state] = [this.state, this.prev]; for (let row = 0; row < this.rows; ++row) { for (let col = 0; col < this.cols; ++col) { this.state[row][col] = this.nextCell(col, row, this.prev); } } } setRule(ruleStr) { this.rule = ruleStr; this.ruleMap = this.parseRule(ruleStr); } nextCell(col, row, prev) { const nbsFn = this.wrap ? array2d.nbsw : array2d.nbs; const nbs = nbsFn(prev, col, row); let s = 0; for (let i = 0; i < nbs.length; ++i) { s += nbs[i]; } const cv = prev[row][col]; if (cv === 0 && this.ruleMap.B[s]) return 1; else if (cv === 1 && this.ruleMap.S[s]) return 1; else return 0; } parseRule(ruleString) { const out = { B: [], S: [] }; if (ruleString.includes("B")) { const rules = ruleString.toUpperCase().match(/(\w\d+)/g); for (const rule of rules) { out[rule[0]] = []; for (let i = 1; i < rule.length; ++i) { out[rule[0]][parseInt(rule[i])] = true; } } } return out; } }3b:T4bc,{ ex_7_8; const height = 300; const hg = new HexGrid(vec2(48, 24), vec2(width, height), { autoCut: true, initializer: () => ({ state: Math.round(random()), prev: 0, spr: AnimatedSprite.fromFrames(gopher_grass, 12) .withFPS(24) .withAnchor(vec2(0.5, 0.75)) }) }); const nextCell_high = { highHexLife: (cell, q, r) => { // rule B25/S34H const s = hg.nbs(q, r).reduce((s, c) => s + c.prev, 0); if (cell.prev === 0 && (s === 2 || s === 5)) { cell.state = 1; cell.spr.play(); } else if (cell.prev === 1 && s !== 3 && s !== 4) { cell.state = 0; cell.spr.play(true); } } }; const genDelay = 0.7; let delayLeft = genDelay; return justCanvas( { width, height, visibility, bgColor: "#4b692f" }, (ctx, { dt }) => { delayLeft -= dt; if (delayLeft < 0) { delayLeft = genDelay; hg.forEach((c) => (c.prev = c.state)); hg.forEach(nextCell_high.highHexLife); } hg.draw(ctx, { draw: (ctx, { state, spr }, pos) => { spr.draw(ctx, pos); }, gridColor: false, cellColor: false }); } ); }3c:Tace,class HexGrid { #verts; constructor(size, mapSize, { autoCut = false, initializer = 0 } = {}) { if (typeof size === "number") { this.cellDim = vec2(size * 2, Math.sqrt(3) * size); } else if (size?.x > 0) { this.cellDim = vec2(size); } if (!autoCut) { this.size = vec2(mapSize); } else { this.size = vec2( Math.floor((mapSize.x - this.cellDim.x / 4) / (this.cellDim.x * 0.75)), Math.floor((mapSize.y - this.cellDim.y / 2) / this.cellDim.y) ); } this.grid = array2d(this.size.y, this.size.x, initializer); this.#verts = [ vec2(-this.cellDim.x / 2, 0), vec2(-this.cellDim.x / 4, -this.cellDim.y / 2), vec2(this.cellDim.x / 4, -this.cellDim.y / 2), vec2(this.cellDim.x / 2, 0), vec2(this.cellDim.x / 4, this.cellDim.y / 2), vec2(-this.cellDim.x / 4, this.cellDim.y / 2) ]; } #dirs = [ { q: -1, r: 0 }, { q: 0, r: -1 }, { q: 1, r: -1 }, { q: 1, r: 0 }, { q: 0, r: 1 }, { q: -1, r: 1 } ]; qr2idx(q, r) { return [q, r + Math.floor(q / 2)]; } idx2qr(x, y) { return [x, y - Math.floor(x / 2)]; } set(q, r, val) { const [xi, xy] = this.qr2idx(q, r); this.grid[xi][xy] = val; } get(q, r, wrap = false) { let [xi, yi] = this.qr2idx(q, r); xi = modulo(xi, this.grid.length); yi = modulo(yi, this.grid[xi].length); return this.grid[xi][yi]; } nbs(cq, cr, wrap = false) { return this.#dirs.map(({ q, r }) => this.get(cq + q, cr + r)); } forEach(fn) { for (let qi = 0; qi < this.grid.length; ++qi) { for (let ri = 0; ri < this.grid[qi].length; ++ri) { fn(this.grid[qi][ri], ...this.idx2qr(qi, ri)); } } } draw(ctx, { gridColor = "#aaa", cellColor = "#fff", draw } = {}) { const w_2 = this.cellDim.x / 2; const w_34 = this.cellDim.x * 0.75; const h = this.cellDim.y; const h_2 = h / 2; for (let qi = 0; qi < this.grid.length; ++qi) { for (let ri = 0; ri < this.grid[qi].length; ++ri) { const cx = w_2 + qi * w_34; const cy = h_2 + ri * h + h_2 * (qi & 1); if (gridColor || cellColor) { if (gridColor) ctx.strokeStyle = gridColor; if (typeof cellColor === "function") ctx.fillStyle = this.colorizer?.(this.grid[qi][ri]) ?? "#fff"; else if (cellColor) ctx.fillStyle = cellColor; ctx.beginPath(); ctx.moveTo(this.#verts.at(-1).x + cx, this.#verts.at(-1).y + cy); for (const v of this.#verts) { ctx.lineTo(v.x + cx, v.y + cy); } if (cellColor) ctx.fill(); if (gridColor) ctx.stroke(); } draw?.(ctx, this.grid[qi][ri], vec2(cx, cy)); } } } }3d:T789,{ const height = expl_7_10.height; const cellSize = expl_7_10.cellSize; const cells = Math.floor(width / cellSize); const rows = Math.floor(height / cellSize); const nextState = (c, st) => { return e7_10_rules[expl_7_10.rule]( st.at(c - 1), st[c], st[(c + 1) % cells] ); }; let hist = []; let prev; let state; const initState = () => { state = array(cells, (i) => expl_7_10.rnd ? random() : i === Math.floor(cells / 2) ? 1 : 0 ); }; initState(); const colorFunc = (idx, state, prev) => { const s = Math.round(state[idx] * 255) .toString(16) .padStart(2, "0"); return "#" + s + s + s; }; let row = 0; let x, y, c; const drawNext = (ctx) => { if (row === rows) return; prev = state.slice(); y = row * cellSize; for (c = 0; c < cells; ++c) { x = c * cellSize; ctx.fillStyle = colorFunc(c, state, prev); ctx.fillRect(x, y, cellSize, cellSize); } for (c = 0; c < cells; ++c) { state[c] = nextState(c, prev); } ++row; }; let lastFrame = 0; return justCanvas({ width, height, visibility, keepState: true }, (ctx) => { const diff = performance.now() - lastFrame; if (diff < expl_7_10.animDelay) return; lastFrame = performance.now(); if (expl_7_10.anim === "None") { while (row < rows) { drawNext(ctx); } } else { if (expl_7_10.anim === "Infinite") { hist.push(prev); if (hist.length === rows) hist.shift(); if (row === rows) { for (let i = 0; i < hist.length; ++i) { y = i * cellSize; for (c = 0; c < cells; ++c) { x = c * cellSize; ctx.fillStyle = colorFunc(c, hist[i], hist[i - 1]); ctx.fillRect(x, y, cellSize, cellSize); } } --row; } } drawNext(ctx); } }); }3e:T529,{ const height = e_7_11.height; const cellSize = e_7_11.cellSize; const cols = Math.floor(width / cellSize); const rows = Math.floor(height / cellSize); const imgPixels = getImgPixelColorsNormed(colorBalls, cols, rows, cellSize); const ca = new CA2D({ cols, rows, cellFactory: (ca, col, row) => new ColorCell(ca, col, row, imgPixels[row][col]), wrap: true }); const valAt = (pos) => ca.cells[Math.floor(pos.y / cellSize)][Math.floor(pos.x / cellSize)].state; const setValAt = (pos, val) => ca.cells[Math.floor(pos.y / cellSize)][Math.floor(pos.x / cellSize)].set( val ); let animate = e_7_11.fps > 0; let paused = false; let nextFrameIn = e_7_11.fps > 0 ? 1 / e_7_11.fps : 1; let redraw = true; return justCanvas( { width, height, visibility, keepState: true }, (ctx, { mouse, dt }) => { if (mouse.click) { if (animate) { paused = !paused; } else { ca.next(); redraw = true; } } if (animate && !paused && nextFrameIn < 0) { ca.next(); redraw = true; nextFrameIn = 1 / e_7_11.fps; } nextFrameIn -= dt; if (redraw) { ca.draw(ctx, cellSize, { grid: false }); redraw = false; } return ctx; } ); }3f:[{"id":"b3ae9108ad0927543ab086a08df2a1fe67a03bdc10df46e5e7acf8789fab7f3b728967ca26b2df8585ceabf4c36821643321c2eefe9fa47d99b0a35a9a50e439","href":"https://static.observableusercontent.com/files/b3ae9108ad0927543ab086a08df2a1fe67a03bdc10df46e5e7acf8789fab7f3b728967ca26b2df8585ceabf4c36821643321c2eefe9fa47d99b0a35a9a50e439","name":"color-balls.avif","type":"video/mp4","lastModified":1769161781797.835,"size":52377},{"id":"21e34de54435990f4ed1c1a072e8823a3cff7ce83308f08f9626db02ba896b18b3f92c2b8bf79efb921d4104011e685c8fa818599d14033a50729a4242d56fbe","href":"https://static.observableusercontent.com/files/21e34de54435990f4ed1c1a072e8823a3cff7ce83308f08f9626db02ba896b18b3f92c2b8bf79efb921d4104011e685c8fa818599d14033a50729a4242d56fbe","name":"gopher_grass@1.png","type":"image/png","lastModified":1742483851334.529,"size":2618}] 30:{"id":"93f886cc0ff092ac","slug":"the-nature-of-code-7-cellular-automata","title":"The Nature of Code - 7 - Cellular Automata","thumbnail":"e538bc785012fcc183f46bff2c24b5356b4253590861a8a276b7310b5c314e5d","access_level":"public","create_time":"$D2025-03-13T22:25:40.945Z","update_time":"$D2026-01-23T15:13:58.372Z","view_time":null,"first_public_time":"$D2026-01-23T14:48:14.085Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e59cfabcc8cf2053","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":"starter_2024"},"version":1812,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"316e3341b439aa13","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":null}],"members":[{"type":"individual","id":"316e3341b439aa13","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":null,"role":"editor"},{"type":"team","id":"e59cfabcc8cf2053","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"fe7a597113ba6d01","slug":"the-nature-of-code","title":"The Nature of Code","owner":{"id":"e59cfabcc8cf2053","login":"ajur","name":"Adam Jurczyk"}},"type":"notebook","body":{"titling":"auto","title":"The Nature of Code - 7 - Cellular Automata","cells":[{"id":0,"value":"# The Nature of Code - 7 - Cellular Automata\n\n_Deeper into dynamic code, with https://natureofcode.com/ _\n\nThis notebook follows fourth chapter https://natureofcode.com/cellular-automata/\n\nA **cellular automaton** (**cellular automata** plural, or **CA** for short) is a model of a system of cell objects with the following characteristics:\n\n- The _cells_ live on a _grid_ (in any finite number of dimensions).\n- Each cell has a state, though a cell’s state can vary over time. The number of possible states is typically finite. The simplest example has the two possibilities of 1 and 0 (otherwise referred to as on and off, or alive and dead).\n- Each cell has a neighborhood. This can be defined in any number of ways, but it’s typically all the cells adjacent to that cell.\n\nPerhaps the most significant (and lengthy) scientific work studying CA arrived in 2002: Stephen Wolfram’s 1,280-page [A New Kind of Science](https://www.wolframscience.com/nks).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":320,"value":"## Elementary Cellular Automata\nWhat’s the simplest CA you can imagine? For Wolfram, an elementary CA has three key elements:\n\n- Grid\n- States\n- Neighborhood\n\nThe simplest grid would be 1D: a line of cells.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"### Example 7.1: Wolfram Elementary Cellular Automata\n\nTogether with:\n- **Exercise 7.1**: _Expand Example 7.1 to have the following feature: when the CA reaches the bottom of the canvas, the CA starts over with a new, random ruleset._\n- **Exercise 7.2**: _Examine the patterns that occur if you initialize the cells in generation 0 with random states._\n- **Exercise 7.4**: _Create a visualization of the CA that scrolls upward as the generations increase so that you can view the generations to “infinity.”_\n\nForm below has some predefined rules, but there is also option to pick any of the 255 rules. You can see what they are on [Wolfram MathWorld](https://mathworld.wolfram.com/ElementaryCellularAutomaton.html).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"viewof expl_7_1 = Inputs.form({\n rule: Inputs.radio([\"custom\", 30, 50, 60, 77, 86, 90, 99, 110, 129, 169], {\n label: \"Rule\",\n value: 90\n }),\n customRule: Inputs.range([0, 255], {\n label: \"Custom rule\",\n step: 1,\n value: 1\n }),\n cellSize: Inputs.range([1, 20], { label: \"Cell size\", step: 1, value: 5 }),\n height: Inputs.range([200, 1000], {\n label: \"Canvas height\",\n step: 100,\n value: 500\n }),\n rnd: Inputs.toggle({ label: \"Random start\", value: false }),\n anim: Inputs.radio([\"None\", \"Once\", \"Next\", \"Infinite\"], {\n label: \"Animate\",\n value: \"None\"\n }),\n animDelay: Inputs.range([0, 2000], {\n label: \"Animation delay\",\n step: 1,\n value: 32\n }),\n colorFunc: Inputs.radio(Object.keys(coloringFunctions), {\n label: \"Coloring method\",\n value: \"blackAndWhite\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"### Exercise 7.3\n_Visualize the CA in a nontraditional way. Break all the rules you can; don’t feel tied to using squares on a perfect grid with black and white._\n\nFalling circles are always cool. Hold LMB to increase number of balls falling at once.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"viewof ex_7_3 = Inputs.form({\n rule: Inputs.radio(\n [\"custom\", 30, 50, 60, 77, 86, 90, 99, 110, 129, 169, 183],\n {\n label: \"Rule\",\n value: 77\n }\n ),\n customRule: Inputs.range([0, 255], {\n label: \"Custom rule\",\n step: 1,\n value: 1\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"## The Game of Life\n\nJohn Conway’s Game of Life rule:\n\n- Death: If a cell is alive (state = 1), it will die (state becomes 0) under the following circumstances:\n - Overpopulation: If the cell has four or more living neighbors, it dies.\n - Loneliness: If the cell has one or fewer living neighbors, it dies.\n- Birth: If a cell is dead (state = 0), it will come to life (state becomes 1) when it has exactly three living neighbors (no more, no less).\n- Stasis: In all other cases, the cell’s state doesn’t change. Two scenarios are possible:\n - Staying alive: If a cell is alive and has exactly two or three live neighbors, it stays alive.\n - Staying dead: If a cell is dead and has anything other than three live neighbors, it stays dead.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":467,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":357,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"viewof e_7_2_dynamic_form = Inputs.form({\n speed: Inputs.range([1, 6], { label: \"Speed\", step: 1, value: 4 }),\n opts: Inputs.checkbox([\"Paused\", \"Wrap\", \"Show grid\", \"Color history\"], {\n label: \"Options\",\n value: [\"Wrap\", \"Show grid\", \"Color history\"]\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"_Changing options blow, will restart automata._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":470,"value":"viewof e_7_2 = Inputs.form({\n cellSize: Inputs.range([1, 20], { label: \"Cell size\", step: 1, value: 10 }),\n height: Inputs.range([100, 2000], { label: \"Height\", value: 500, step: 100 }),\n rule: Inputs.text({ label: \"Rule string\", value: \"B3/S23\", width: \"100%\" }),\n pattern: Inputs.textarea({\n label: \"RLE pattern\\n(random if empty)\",\n value: \"o3b3o$3o2bo$bo!\",\n width: \"100%\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"viewof e_7_2_patterns2 = Inputs.button(\n pattern_files.map((file, idx) => {\n let name = \"Pattern \" + idx;\n const lines = file.split(\"\\n\").map((l) => l.trim());\n\n const newVal = {\n pattern: lines\n .filter((l) => !l.startsWith(\"#\") && l.indexOf(\"=\") < 0)\n .join(\"\\n\")\n };\n\n const nameLine = lines.find((l) => l.startsWith(\"#N\"));\n if (nameLine) name = nameLine.substring(3);\n const ruleLine = lines.find((l) => l.indexOf(\"rule\") >= 0);\n if (ruleLine) newVal.rule = ruleLine.match(/rule\\s*=\\s*(\\S+)/)?.[1];\n\n return [name, () => setInput(viewof e_7_2, newVal)];\n }),\n {\n label: \"Interensting patterns\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"viewof e_7_2_rules = Inputs.button(\n [\n [\"Life\", \"B3/S23\"],\n [\"HighLife\", \"B36/S23\"],\n [\"Day & Night\", \"B3678/S34678\"],\n [\"Anneal\", \"B4678/S35678\"],\n [\n \"Probabilistic\",\n \"B3/S23/D0{0.6}1{0.6}4{0.8}5{0.8}6{0.8}7{0.8}8{0.8}9{0.8}\"\n ]\n ].map(([name, rule]) => [name, () => setInput(viewof e_7_2, { rule })]),\n {\n label: \"Named rules\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"parseRLE = (str, states = [\"b\", \"o\"]) => {\n const cleanPattern = str\n .split(\"\\n\")\n .map((l) => l.trim())\n .filter((l) => !l.startsWith(\"#\") && l.indexOf(\"=\") < 0)\n .join(\"\")\n .toLowerCase();\n\n const lines = [];\n let curr = [];\n let w = 0;\n let n = 0;\n let i;\n\n for (const c of cleanPattern) {\n i = parseInt(c);\n if (!isNaN(i)) {\n n = n === 0 ? i : n * 10 + i;\n } else {\n if (c === \"$\" || c === \"!\") {\n n = n || 1;\n while (n) {\n lines.push(curr);\n w = Math.max(w, curr.length);\n curr = [];\n --n;\n }\n if (c === \"!\") break;\n } else {\n i = states.indexOf(c);\n if (i < 0) i = 1;\n n = n || 1;\n for (let j = 0; j < n; ++j) curr.push(i);\n n = 0;\n }\n }\n }\n\n return { w, h: lines.length, lines };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"e_7_2_fps_updater = ({\n onUpdate: null,\n update(val) {\n this.onUpdate?.(val);\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"{\n e_7_2;\n if (!e_7_2_fps_updater.onUpdate) {\n await Promises.delay(1);\n }\n return e_7_2_fps_updater.update(e_7_2_dynamic_form);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"class HistCell {\n constructor(ca, col, row, rule) {\n this.ca = ca;\n this.col = col;\n this.row = row;\n this.state = 0;\n this.prev = 0;\n this.lastAlive = -1;\n this.rule = rule;\n }\n\n set(val) {\n this.state = val;\n if (val > 0) {\n this.lastAlive = this.ca.generation;\n }\n }\n\n next(nbs) {\n let s = 0;\n for (let i = 0; i < nbs.length; ++i) {\n s += nbs[i].prev;\n }\n\n this.state = this.rule.next(s, this.prev);\n if (this.state === 1) {\n this.lastAlive = this.ca.generation;\n }\n }\n\n #clr(showHist) {\n if (this.state > 0) return \"#000\";\n if (!showHist || this.lastAlive < 0) return \"#fff\";\n const t = Math.min(this.ca.generation - this.lastAlive, 100) / 100;\n return `hsl(${200 + t * 150}, ${(1 - t) * 100}%, 9${t * 9}%)`;\n }\n\n draw(ctx, x, y, cellSize, { showHist = false } = {}) {\n ctx.fillStyle = this.#clr(showHist);\n ctx.fillRect(x, y, cellSize, cellSize);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"Below is first implementation with two arrays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"bwDraw = (ctx, ca, cellSize, { offset = vec2(), grid = false } = {}) => {\n ctx.save();\n ctx.translate(offset.x, offset.y);\n let x, y;\n for (let r = 0; r < ca.rows; ++r) {\n for (let c = 0; c < ca.cols; ++c) {\n x = c * cellSize;\n y = r * cellSize;\n ctx.fillStyle = ca.state[r][c] ? \"#000\" : \"#fff\";\n ctx.fillRect(x, y, cellSize, cellSize);\n }\n }\n if (grid && cellSize > 4) {\n const w = ca.cols * cellSize + 1;\n const h = ca.rows * cellSize + 1;\n ctx.strokeStyle = \"#eee\";\n for (let r = 0; r <= ca.rows; ++r) {\n y = r * cellSize;\n ctx.beginPath();\n ctx.moveTo(0, y);\n ctx.lineTo(w, y);\n ctx.stroke();\n }\n for (let c = 0; c <= ca.cols; ++c) {\n x = c * cellSize;\n ctx.beginPath();\n ctx.moveTo(x, 0);\n ctx.lineTo(x, h);\n ctx.stroke();\n }\n }\n ctx.restore();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1811,"value":"## Variations on Traditional CA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1006,"value":"### Exercise 7.8\n_Create a CA using a grid of hexagons, each with six neighbors._\n\nI've used invaluable information source about [hexagon grids on Red Blob Games](https://www.redblobgames.com/grids/hexagons/) website.\n\nFor CA I've used [HighHexLife](https://catagolue.hatsya.com/census/b25s34h) rule (B25/S34H).\n\n...And for some reason I decided to make it like a grass field full of gophers xD","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1011,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"viewof ex_7_8 = Inputs.button(\"Restart\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"### Exercise 7.10\n_Adapt the Wolfram elementary CA to have a float state. You could define rules such as “If the state is greater than 0.5” or “. . . less than 0.2.”_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1414,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":"viewof expl_7_10 = Inputs.form({\n cellSize: Inputs.range([1, 20], { label: \"Cell size\", step: 1, value: 10 }),\n height: Inputs.range([200, 1000], {\n label: \"Canvas height\",\n step: 100,\n value: 500\n }),\n rnd: Inputs.toggle({ label: \"Random start\", value: false }),\n anim: Inputs.radio([\"None\", \"Once\", \"Infinite\"], {\n label: \"Animate\",\n value: \"None\"\n }),\n rule: Inputs.radio(e7_10_rules_names, {\n label: \"Rule\",\n value: e7_10_rules_names.at(-1)\n }),\n animDelay: Inputs.range([0, 2000], {\n label: \"Animation delay\",\n step: 1,\n value: 32\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"e7_10_rules = ({\n avarage: (left, center, right) => clamp((left + center + right) / 3, 0, 1),\n modulo: (left, center, right) => modulo((left + center + right) / 2.31, 1),\n pyramid: (left, center, right) =>\n center < 0.1 ? (left > 0 ? left : right) : Math.max(center - 0.02, 0)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1539,"value":"mutable e7_10_rules_names = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"{\n const names = Array.from(Object.keys(e7_10_rules)).sort();\n if (e7_10_rules_names.length !== names.length) {\n mutable e7_10_rules_names = names;\n return;\n }\n for (let i = 0; i < names.length; ++i) {\n if (names[i] !== e7_10_rules_names[i]) {\n mutable e7_10_rules_names = names;\n return;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1404,"value":"### Exercise 7.11\n_Create a CA in which each pixel is a cell and the pixel’s color is its state._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1418,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1678,"value":"viewof e_7_11 = Inputs.form({\n cellSize: Inputs.range([1, 20], { label: \"Cell size\", step: 1, value: 10 }),\n height: Inputs.range([100, 2000], { label: \"Height\", value: 500, step: 100 }),\n fps: Inputs.range([0, 30], { label: \"FPS\", value: 2, step: 1 }),\n rule: Inputs.radio(e7_11_rules_names, {\n label: \"Algorithm\",\n value: \"color_life\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1780,"value":"e7_11_rules = ({\n dim: (prev, nbs) => prev.clone().multiplyScalar(0.9),\n strobo: (prev, nbs) => vec3(prev.z, prev.x, prev.y),\n color_life: (prev, nbs) =>\n vec3(\n lifeColorCellForColor(prev, nbs, \"x\"),\n lifeColorCellForColor(prev, nbs, \"y\"),\n lifeColorCellForColor(prev, nbs, \"z\")\n ),\n blur: (prev, nbs) => {\n const c = vec3();\n for (let i = 0; i < nbs.length; ++i) {\n c.add(nbs[i].prev);\n }\n return c.divideScalar(nbs.length);\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1788,"value":"mutable e7_11_rules_names = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1790,"value":"{\n const names = Array.from(Object.keys(e7_11_rules)).sort();\n if (e7_11_rules_names.length !== names.length) {\n mutable e7_11_rules_names = names;\n return;\n }\n for (let i = 0; i < names.length; ++i) {\n if (names[i] !== e7_11_rules_names[i]) {\n mutable e7_11_rules_names = names;\n return;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1700,"value":"class ColorCell {\n constructor(ca, col, row, color) {\n this.ca = ca;\n this.col = col;\n this.row = row;\n this.state = color;\n this.prev = color;\n this.rule = e7_11_rules[e_7_11.rule];\n }\n\n set(val) {\n this.state = val;\n }\n\n next(nbs) {\n this.state = this.rule(this.prev, nbs);\n }\n\n #clr(showHist) {\n const c = this.state.clone().multiplyScalar(255).round();\n return `rgb(${c.x} ${c.y} ${c.z})`;\n }\n\n draw(ctx, x, y, cellSize, { showHist = false } = {}) {\n ctx.fillStyle = this.#clr(showHist);\n ctx.fillRect(x, y, cellSize, cellSize);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1738,"value":"lifeColorCellForColor = (prev, nbs, clr) => {\n let highCells = 0,\n max = 0.7,\n min = 0.3;\n for (let i = 0; i < nbs.length; ++i) {\n const c = nbs[i].prev[clr];\n if (c < min) min = c;\n if (c > max) max = c;\n if (c >= 0.7) highCells += 1;\n }\n if (prev[clr] <= 0.3 && highCells === 2) {\n return max;\n }\n if (prev[clr] >= 0.7 && (highCells < 2 || highCells > 3)) {\n return min;\n }\n return prev[clr];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"### Exercise 7.13\n_Use CA rules in a flocking system. What if each boid has a state (that perhaps informs its steering behaviors), and its neighborhood changes from frame to frame as it moves closer to or farther from other boids?_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1421,"value":"// TBD","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1411,"value":"### Exercise 7.14\n_Design a CA in which each cell is a smaller CA._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1424,"value":"// TBD","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"import {\n justCanvas,\n random,\n vec2,\n vec3,\n box2,\n renderer,\n sim,\n showStats,\n shuffleArray,\n modulo,\n array,\n array2d,\n setInput,\n AnimatedSprite,\n clamp\n} from \"@ajur/the-nature-of-code-tools\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"import {\n createMatterEntity,\n matterSys,\n Matter\n} from \"@ajur/the-nature-of-code-6-physics-libraries\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1275,"value":"gopher_grass = FileAttachment(\"gopher_grass@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1667,"value":"// img from https://unsplash.com/photos/high-angle-photo-of-assorted-color-plastic-balls-9IBqihqhuHc\ncolorBalls = FileAttachment(\"color-balls.avif\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1694,"value":"getImgPixelColorsNormed(colorBalls, 3, 3, 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1692,"value":"getImgPixelColorsNormed = (img, w, h, scale) => {\n const offscreen = new OffscreenCanvas(w, h);\n const ctx = offscreen.getContext(\"2d\");\n ctx.drawImage(img, 0, 0, w * scale, h * scale, 0, 0, w, h);\n const data = ctx.getImageData(0, 0, w, h).data;\n const out = [];\n for (let y = 0; y < h; ++y) {\n out.push([]);\n for (let x = 0; x < w; ++x) {\n const ir = (y * w + x) * 4;\n out[y][x] = vec3(data[ir], data[ir + 1], data[ir + 2]).divideScalar(255);\n }\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 31:"$30:body"