2b:null 2c:["$","title",null,{"children":"E. coli Chemotaxis Simulator | Niko | Observable"}] 31:T4893,viewof chemotaxis = { // ──────────────────────────────────────────────────────────────────────────── // Chemotaxis Simulator (single Observable cell) // - Click inside the field to drop a chemoattractant source // - Bacteria perform run-and-tumble with temporal sensing (memory) // - Diffusing/decaying chemical field // - Sliders to control behavior; Play/Pause, Reset, Clear sources // ──────────────────────────────────────────────────────────────────────────── // ===== Fixed widget size (prevents layout growth) =========================== const VIEW_W = 1100, VIEW_H = 740; const PADDING = 12, GAP = 8, BORDER = 1; const wrap = html`

`; // ===== Controls ============================================================= const controls = html`

Agents 400 Speed (px/s) 80 Base tumble (1/s) 1.0 Bias strength β 0.80 Memory τ (s) 3.0 Diffusion D 1.00 Decay λ (1/s) 0.03 Source strength 15 Source size (px) 16 Continuous emit from sources Show field heatmap Show agent trails

`; const stats = html`

Live — Agents: 0 • Sources: 0 • Mean C: 0.00 • Up-gradient: 0% • Chemotaxis index: 0.00

`; // ===== Stage + canvases (field + agents) ==================================== const stage = html`

`; const W = 980, H = 540; // drawing area (fixed to avoid layout jitter) const fieldCanvas = DOM.canvas(W, H); const fieldCtx = fieldCanvas.getContext("2d", { willReadFrequently: false }); fieldCanvas.style.imageRendering = "pixelated"; fieldCanvas.style.display = "block"; const agentCanvas = DOM.canvas(W, H); const agentCtx = agentCanvas.getContext("2d"); agentCanvas.style.position = "absolute"; // stacked above field agentCanvas.style.left = "0px"; agentCanvas.style.top = "0px"; const trailCanvas = DOM.canvas(W, H); const trailCtx = trailCanvas.getContext("2d"); trailCanvas.style.position = "absolute"; trailCanvas.style.left = "0px"; trailCanvas.style.top = "0px"; trailCanvas.style.pointerEvents = "none"; trailCtx.globalAlpha = 0.12; // faint trails const overlay = html`

`; overlay.style.cursor = "crosshair"; // to add sources by clicking stage.append(fieldCanvas, trailCanvas, agentCanvas, overlay); wrap.append(controls, stats, stage); // ===== Wire label mirrors =================================================== const el = { agents: controls.querySelector("#agents"), agentsVal: controls.querySelector("#agentsVal"), speed: controls.querySelector("#speed"), speedVal: controls.querySelector("#speedVal"), tumble: controls.querySelector("#tumble"), tumbleVal: controls.querySelector("#tumbleVal"), bias: controls.querySelector("#bias"), biasVal: controls.querySelector("#biasVal"), tau: controls.querySelector("#tau"), tauVal: controls.querySelector("#tauVal"), diff: controls.querySelector("#diff"), diffVal: controls.querySelector("#diffVal"), decay: controls.querySelector("#decay"), decayVal: controls.querySelector("#decayVal"), srcAmp: controls.querySelector("#srcAmp"), srcAmpVal: controls.querySelector("#srcAmpVal"), srcSize: controls.querySelector("#srcSize"), srcSizeVal: controls.querySelector("#srcSizeVal"), emit: controls.querySelector("#emit"), showField: controls.querySelector("#showField"), showTrails: controls.querySelector("#showTrails"), play: controls.querySelector("#play"), reset: controls.querySelector("#reset"), clear: controls.querySelector("#clear"), s_agents: stats.querySelector("#s_agents"), s_sources: stats.querySelector("#s_sources"), s_meanC: stats.querySelector("#s_meanC"), s_up: stats.querySelector("#s_up"), s_ci: stats.querySelector("#s_ci") }; function syncLabels() { el.agentsVal.textContent = el.agents.value; el.speedVal.textContent = el.speed.value; el.tumbleVal.textContent = (+el.tumble.value).toFixed(2); el.biasVal.textContent = (+el.bias.value).toFixed(2); el.tauVal.textContent = (+el.tau.value).toFixed(1); el.diffVal.textContent = (+el.diff.value).toFixed(2); el.decayVal.textContent = (+el.decay.value).toFixed(2); el.srcAmpVal.textContent = el.srcAmp.value; el.srcSizeVal.textContent = el.srcSize.value; } controls .querySelectorAll("input[type=range]") .forEach((r) => r.addEventListener("input", syncLabels)); syncLabels(); // ===== Field grid (diffusion + decay) ======================================= // A coarse grid for fast diffusion, upscaled to canvas const NX = 180, NY = 100; const dx = W / NX, dy = H / NY; let C = new Float32Array(NX * NY); // concentration let Cnext = new Float32Array(NX * NY); // scratch const idx = (x, y) => y * NX + x; // Sources — click to add points; optionally continuously emit from them const sources = []; // {x, y, amp (per click), r (px)} overlay.addEventListener("pointerdown", (e) => { const rect = overlay.getBoundingClientRect(); const x = (e.clientX - rect.left) * (W / rect.width); const y = (e.clientY - rect.top) * (H / rect.height); sources.push({ x, y, amp: +el.srcAmp.value, r: +el.srcSize.value }); // also stamp immediately depositGaussian(x, y, +el.srcAmp.value, +el.srcSize.value); }); function depositGaussian(px, py, amp, rpx) { // stamp a Gaussian onto C (in grid coords) const sigma = Math.max(1, rpx) / Math.sqrt(8 * Math.log(2)); // FWHM ≈ rpx const sig2 = sigma * sigma; const gx = Math.floor(px / dx), gy = Math.floor(py / dy); const rad = Math.ceil((rpx / dx) * 2); // in grid cells for ( let yy = Math.max(0, gy - rad); yy <= Math.min(NY - 1, gy + rad); yy++ ) { for ( let xx = Math.max(0, gx - rad); xx <= Math.min(NX - 1, gx + rad); xx++ ) { const cx = (xx + 0.5) * dx, cy = (yy + 0.5) * dy; const d2 = (cx - px) * (cx - px) + (cy - py) * (cy - py); C[idx(xx, yy)] += amp * Math.exp(-d2 / (2 * sig2)); } } } function stepField(dt) { // Explicit 5-point stencil diffusion with Neumann (reflecting) boundaries. // Use substeps for stability if needed. const D = +el.diff.value; // "grid" diffusion units const lam = +el.decay.value; if (D === 0 && lam === 0 && !el.emit.checked) return; const maxDt = (0.25 * Math.min(dx * dx, dy * dy)) / Math.max(1e-6, D); // CFL-ish let t = dt; while (t > 0) { const h = Math.min(maxDt, t); // continuous emission from sources if (el.emit.checked && sources.length) { const perSec = +el.srcAmp.value; // interpret as "mass per second" const rpx = +el.srcSize.value; const stamp = perSec * h; for (let s of sources) depositGaussian(s.x, s.y, stamp, rpx); } // diffuse + decay for (let y = 0; y < NY; y++) { const y0 = Math.max(0, y - 1), y1 = Math.min(NY - 1, y + 1); for (let x = 0; x < NX; x++) { const x0 = Math.max(0, x - 1), x1g = Math.min(NX - 1, x + 1); const c = C[idx(x, y)]; const l = C[idx(x0, y)]; const r = C[idx(x1g, y)]; const u = C[idx(x, y0)]; const d = C[idx(x, y1)]; const lap = (l + r - 2 * c) / (dx * dx) + (u + d - 2 * c) / (dy * dy); let v = c + h * (D * lap - lam * c); Cnext[idx(x, y)] = v; } } // swap const tmp = C; C = Cnext; Cnext = tmp; t -= h; } } // ===== Agents (run-and-tumble with temporal sensing) ======================== function rand(a, b) { return a + Math.random() * (b - a); } function newHeading() { return Math.random() * Math.PI * 2; } let agents = []; function resetAgents() { agents = []; const N = +el.agents.value; for (let i = 0; i < N; i++) { agents.push({ x: Math.random() * W, y: Math.random() * H, th: newHeading(), m: 0, // filtered memory of concentration col: "#2b8a3e" // color (updated by climb/descend) }); } trailCtx.clearRect(0, 0, W, H); } resetAgents(); function reconcileAgents() { const target = +el.agents.value; if (agents.length < target) { const add = target - agents.length; for (let i = 0; i < add; i++) { agents.push({ x: Math.random() * W, y: Math.random() * H, th: newHeading(), m: 0, col: "#2b8a3e" }); } } else if (agents.length > target) { agents.length = target; } } // Sample concentration and gradient (bilinear) function sampleC(px, py) { const gx = Math.max(0, Math.min(NX - 1.001, px / dx - 0.5)); const gy = Math.max(0, Math.min(NY - 1.001, py / dy - 0.5)); const x0 = Math.floor(gx), y0 = Math.floor(gy); const fx = gx - x0, fy = gy - y0; const x1 = x0 + 1, y1 = y0 + 1; const c00 = C[idx(x0, y0)]; const c10 = C[idx(Math.min(NX - 1, x1), y0)]; const c01 = C[idx(x0, Math.min(NY - 1, y1))]; const c11 = C[idx(Math.min(NX - 1, x1), Math.min(NY - 1, y1))]; const c0 = c00 * (1 - fx) + c10 * fx; const c1 = c01 * (1 - fx) + c11 * fx; const c = c0 * (1 - fy) + c1 * fy; return c; } function sampleGrad(px, py) { const gx = Math.max(1, Math.min(NX - 2, Math.round(px / dx))); const gy = Math.max(1, Math.min(NY - 2, Math.round(py / dy))); const ddx = (C[idx(gx + 1, gy)] - C[idx(gx - 1, gy)]) / (2 * dx); const ddy = (C[idx(gx, gy + 1)] - C[idx(gx, gy - 1)]) / (2 * dy); return { gx: ddx, gy: ddy }; } // ===== Rendering ============================================================ function drawField() { if (!el.showField.checked) { fieldCtx.clearRect(0, 0, W, H); return; } // Map C to colors (per-frame auto scaling for visibility) let cmin = Infinity, cmax = -Infinity; for (let i = 0; i < C.length; i++) { const v = C[i]; if (v < cmin) cmin = v; if (v > cmax) cmax = v; } const span = Math.max(1e-6, cmax - cmin); // Paint to an offscreen ImageData at grid resolution, then scale up const img = fieldCtx.createImageData(NX, NY); const data = img.data; for (let y = 0; y < NY; y++) { for (let x = 0; x < NX; x++) { const v = (C[idx(x, y)] - cmin) / span; // 0..1 // blue -> cyan -> lime -> yellow const r = Math.max(0, Math.min(255, 255 * Math.max(0, (v - 0.5) * 2))); const g = Math.max(0, Math.min(255, 255 * v)); const b = Math.max(0, Math.min(255, 255 * (1 - v))); const k = 4 * (y * NX + x); data[k + 0] = r; data[k + 1] = g; data[k + 2] = b; data[k + 3] = 255; } } // Draw scaled fieldCtx.imageSmoothingEnabled = false; fieldCtx.clearRect(0, 0, W, H); fieldCtx.putImageData(img, 0, 0); // nearest-neighbor scale by drawing onto itself stretched: // (trick: drawImage from temp canvas) // Create a temporary canvas only once if (!drawField.tmp) { const t = document.createElement("canvas"); t.width = NX; t.height = NY; drawField.tmp = t; } const tctx = drawField.tmp.getContext("2d"); tctx.putImageData(img, 0, 0); fieldCtx.clearRect(0, 0, W, H); fieldCtx.imageSmoothingEnabled = false; fieldCtx.drawImage(drawField.tmp, 0, 0, NX, NY, 0, 0, W, H); // draw source markers fieldCtx.strokeStyle = "rgba(255,255,255,0.6)"; fieldCtx.lineWidth = 1; for (const s of sources) { fieldCtx.beginPath(); fieldCtx.arc(s.x, s.y, +el.srcSize.value, 0, Math.PI * 2); fieldCtx.stroke(); } } function drawAgents(dt) { // Trails if (el.showTrails.checked) { // Faintly draw current frame positions onto trails canvas trailCtx.fillStyle = "rgba(0,0,0,0.02)"; trailCtx.fillRect(0, 0, W, H); // slight fade } else { trailCtx.clearRect(0, 0, W, H); } // Agents agentCtx.clearRect(0, 0, W, H); for (const a of agents) { if (el.showTrails.checked) { trailCtx.fillStyle = "rgba(40,40,40,0.08)"; trailCtx.fillRect(a.x, a.y, 1.5, 1.5); } agentCtx.fillStyle = a.col; agentCtx.beginPath(); agentCtx.arc(a.x, a.y, 2.2, 0, Math.PI * 2); agentCtx.fill(); } } // ===== Simulation step ====================================================== let playing = true; el.play.textContent = "Pause"; function stepAgents(dt) { const v = +el.speed.value; const alpha0 = +el.tumble.value; const beta = +el.bias.value; const tau = +el.tau.value; let upCount = 0; for (const a of agents) { // Sense local concentration and update memory (exponential filter) const c = sampleC(a.x, a.y); a.m += (dt / Math.max(1e-6, tau)) * (c - a.m); // Chemotactic signal: positive when climbing gradient const s = c - a.m; // Tumble rate: reduce when s > 0; increase when s < 0 // Use a bounded nonlinearity to keep rates reasonable const mod = 1 - beta * Math.tanh(s); // in [1-β, 1+β] const alpha = Math.max(0.02, alpha0 * mod); // Decide if tumble occurs this step const p = 1 - Math.exp(-alpha * dt); if (Math.random() < p) { a.th = newHeading(); } // Move a.x += v * dt * Math.cos(a.th); a.y += v * dt * Math.sin(a.th); // Reflect at walls if (a.x < 0) { a.x = 0; a.th = Math.PI - a.th; } if (a.x > W) { a.x = W; a.th = Math.PI - a.th; } if (a.y < 0) { a.y = 0; a.th = -a.th; } if (a.y > H) { a.y = H; a.th = -a.th; } // Color by up/down gradient const g = sampleGrad(a.x, a.y); const dot = g.gx * Math.cos(a.th) + g.gy * Math.sin(a.th); if (dot > 0) { upCount++; a.col = "#2b8a3e"; } else { a.col = "#d9480f"; } } // Stats const ci = agents.length ? (upCount / agents.length) * 2 - 1 : 0; // -1..1 el.s_up.textContent = agents.length ? Math.round((upCount / agents.length) * 100) + "%" : "0%"; el.s_ci.textContent = ci.toFixed(2); } function updateStats() { // Agents & sources el.s_agents.textContent = agents.length; el.s_sources.textContent = sources.length; // Mean concentration let sum = 0; for (let i = 0; i < C.length; i++) sum += C[i]; const mean = sum / C.length; el.s_meanC.textContent = mean.toFixed(2); } // ===== Buttons ============================================================== el.play.onclick = () => { playing = !playing; el.play.textContent = playing ? "Pause" : "Play"; if (playing) { last = performance.now(); requestAnimationFrame(tick); } }; el.reset.onclick = () => resetAgents(); el.clear.onclick = () => { sources.length = 0; }; // ===== Animation loop ======================================================= let last = performance.now(); function tick(now) { if (!playing) return; let dt = (now - last) / 1000; if (dt > 0.05) dt = 0.05; // clamp for stability last = now; // Reconcile headcount reconcileAgents(); // Field physics stepField(dt); // Agents stepAgents(dt); // Draw drawField(); drawAgents(dt); updateStats(); requestAnimationFrame(tick); } // Start drawField(); drawAgents(0); updateStats(); requestAnimationFrame(tick); return wrap; }32:[] 2f:{"id":"615cb75b5670c6a1","slug":null,"title":"E. coli Chemotaxis Simulator","thumbnail":"c8b55abf937ef5801ee8a850f1f0d5ec66b2ceb400df6990fc6696d64486746c","access_level":"public","create_time":"$D2025-08-22T21:31:47.485Z","update_time":"$D2025-08-22T21:34:01.116Z","view_time":null,"first_public_time":"$D2025-08-22T21:31:47.485Z","has_unpublished_edits":null,"fork":{"id":"8d8295eb127e895c","slug":null,"title":"Enzyme Simulator","owner":{"id":"91bfe08cf53266a9","login":"nikodata","name":"Niko"}},"stars":0,"starred":false,"owner":{"type":"team","id":"91bfe08cf53266a9","login":"nikodata","name":"Niko","avatar_url":"https://avatars-next.observableusercontent.com/098f884db2223bef0607a4832dbbfebdb1b8f6232fe9c9c9a0732dd401bfa2fb","tier":"starter_2024","bio":""},"version":89,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"103b6e09e2305a61","login":"nikodata","name":"Niko","avatar_url":"https://avatars-next.observableusercontent.com/098f884db2223bef0607a4832dbbfebdb1b8f6232fe9c9c9a0732dd401bfa2fb","tier":null,"bio":""}],"members":[{"type":"individual","id":"103b6e09e2305a61","login":"nikodata","name":"Niko","avatar_url":"https://avatars-next.observableusercontent.com/098f884db2223bef0607a4832dbbfebdb1b8f6232fe9c9c9a0732dd401bfa2fb","tier":null,"role":"editor"},{"type":"team","id":"91bfe08cf53266a9","login":"nikodata","name":"Niko","avatar_url":"https://avatars-next.observableusercontent.com/098f884db2223bef0607a4832dbbfebdb1b8f6232fe9c9c9a0732dd401bfa2fb","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"E. coli Chemotaxis Simulator","cells":[{"id":0,"value":"# _E. coli_ Chemotaxis Simulator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"