HH Single Compartment Demo<\/title>\n <style>\n :root{\n --bg: #0f1115;\n --panel: #151923;\n --ink: #e6e8ee;\n --muted: rgba(230,232,238,0.65);\n --hair: rgba(230,232,238,0.14);\n --accent: rgba(120,170,255,0.9);\n }\n html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); font: 14px\/1.25 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, sans-serif; }\n .app{\n height: 100%;\n display: grid;\n grid-template-columns: 280px 1fr;\n gap: 12px;\n padding: 12px;\n box-sizing: border-box;\n }\n .panel{\n background: var(--panel);\n border: 1px solid var(--hair);\n border-radius: 12px;\n padding: 12px;\n box-sizing: border-box;\n }\n .controls h2{ margin: 0 0 8px 0; font-size: 16px; font-weight: 650; }\n .hint{ color: var(--muted); margin: 0 0 10px 0; }\n .row{ margin: 10px 0; }\n .row label{ display: flex; justify-content: space-between; gap: 10px; color: var(--muted); }\n .row input[type=\"range\"]{ width: 100%; }\n .value{ color: var(--ink); font-variant-numeric: tabular-nums; }\n .main{\n display: grid;\n grid-template-rows: 1fr 220px;\n gap: 12px;\n min-width: 0;\n min-height: 0;\n }\n .canvasWrap{\n position: relative;\n overflow: hidden;\n min-height: 0;\n }\n canvas{ width: 100%; height: 100%; display: block; }\n .badge{\n position: absolute;\n left: 12px; top: 12px;\n padding: 6px 10px;\n background: rgba(15,17,21,0.65);\n border: 1px solid var(--hair);\n border-radius: 999px;\n color: var(--muted);\n backdrop-filter: blur(6px);\n font-variant-numeric: tabular-nums;\n }\n .kbd{\n padding: 0 6px;\n border: 1px solid var(--hair);\n border-bottom-color: rgba(230,232,238,0.25);\n border-radius: 6px;\n background: rgba(15,17,21,0.55);\n color: var(--ink);\n font-variant-numeric: tabular-nums;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"app\">\n <div class=\"panel controls\">\n <h2>Single compartment HH<\/h2>\n <p class=\"hint\">\n Press <span class=\"kbd\">1<\/span> to inject a pulse at the soma.\n The sim runs continuously.\n <\/p>\n\n <div class=\"row\">\n\t<label style=\"justify-content:flex-start; gap:10px; color: var(--ink);\">\n\t <input id=\"useColor\" type=\"checkbox\" checked>\n\t <span>Voltage coloration<\/span>\n\t<\/label>\n <\/div>\n\n <div class=\"row\">\n <label><span>Active gNa (mS\/cm\u00b2)<\/span><span class=\"value\" id=\"v_gNa\"><\/span><\/label>\n <input id=\"gNa\" type=\"range\" min=\"0\" max=\"200\" step=\"1\" value=\"120\">\n <\/div>\n\n <div class=\"row\">\n <label><span>Active gK (mS\/cm\u00b2)<\/span><span class=\"value\" id=\"v_gK\"><\/span><\/label>\n <input id=\"gK\" type=\"range\" min=\"0\" max=\"80\" step=\"1\" value=\"36\">\n <\/div>\n\n <div class=\"row\">\n <label><span>Passive (leak) gNaP (mS\/cm\u00b2)<\/span><span class=\"value\" id=\"v_gNaP\"><\/span><\/label>\n <input id=\"gNaP\" type=\"range\" min=\"0\" max=\"0.5\" step=\"0.005\" value=\"0.02\">\n <\/div>\n\n <div class=\"row\">\n <label><span>Passive (leak) gKP (mS\/cm\u00b2)<\/span><span class=\"value\" id=\"v_gKP\"><\/span><\/label>\n <input id=\"gKP\" type=\"range\" min=\"0\" max=\"0.5\" step=\"0.005\" value=\"0.1\">\n <\/div>\n\n \n \n \n \n\n <hr style=\"border:none;border-top:1px solid var(--hair); margin: 12px 0;\">\n\n <div class=\"row\">\n <label><span>Pulse amplitude (\u00b5A\/cm\u00b2)<\/span><span class=\"value\" id=\"v_Iamp\"><\/span><\/label>\n <input id=\"Iamp\" type=\"range\" min=\"0\" max=\"40\" step=\"0.1\" value=\"12\">\n <\/div>\n\n <div class=\"row\">\n <label><span>Pulse duration (ms)<\/span><span class=\"value\" id=\"v_Idur\"><\/span><\/label>\n <input id=\"Idur\" type=\"range\" min=\"0.1\" max=\"5\" step=\"0.1\" value=\"1.0\">\n <\/div>\n\n <div class=\"row\">\n <label><span>dt (ms)<\/span><span class=\"value\" id=\"v_dt\"><\/span><\/label>\n <input id=\"dt\" type=\"range\" min=\"0.005\" max=\"0.05\" step=\"0.005\" value=\"0.01\">\n <\/div>\n\n <div class=\"row\">\n\t<button id=\"resetBtn\" type=\"button\"\n\t\tstyle=\"width:100%; padding:10px 12px; border-radius:10px;\n\t\t border:1px solid var(--hair); background: rgba(15,17,21,0.55);\n\t\t color: var(--ink); cursor:pointer;\">\n\t Reset controls\n\t<\/button>\n <\/div>\n\n <p class=\"hint\" style=\"margin-top: 10px;\">\n Tip: try lowering active gNa, then see how much stimulus is needed.\n <\/p>\n <\/div>\n\n <div class=\"main\">\n <div class=\"panel canvasWrap\" id=\"sceneWrap\">\n <div class=\"badge\" id=\"badge\">t = 0.0000 s \u00b7 V = -65.00 mV<\/div>\n <canvas id=\"scene\"><\/canvas>\n <\/div>\n\n <div class=\"panel canvasWrap\">\n <canvas id=\"scope\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n <script type=\"module\">\n import { HHParams, Compartment } from \"\/~theobald\/wp-content\/plugins\/neuro_demos\/assets\/hh.js\";\n\n \/\/ ----------------- tiny utils -----------------\n\n function clamp01(x){ return Math.max(0, Math.min(1, x)); }\n\n \/\/ paired logistic (your dlog)\n function dlog(x, ymin, ymid, ymax, xmid1, xmid2, k1, k2){\n const s1 = 1.0 \/ (1.0 + Math.exp(-k1 * (x - xmid1)));\n const s2 = 1.0 \/ (1.0 + Math.exp(-k2 * (x - xmid2)));\n return ymin + (ymid - ymin) * s1 + (ymax - ymid) * s2;\n }\n\n \/\/ voltage -> rgb(0..255)\n function vcol(v){\n const rs = dlog(v, 0.0, 0.5, 1.0, -0.085, -0.045, 210, 250);\n const gs = dlog(v, 0.0, 0.5, 1.0, -0.085, -0.010, 210, 160);\n const bs = dlog(v, 1.0, 0.5, 1.0, -0.075, 0.030, 500, 160);\n return {\n r: Math.round(255 * clamp01(rs)),\n g: Math.round(255 * clamp01(gs)),\n b: Math.round(255 * clamp01(bs)),\n };\n }\n\n class RingBuffer {\n constructor(n, fillValue = 0){\n this.n = n;\n this.a = new Float64Array(n);\n this.i = 0;\n this.full = false;\n this.a.fill(fillValue);\n \/\/ start \"full\" so the scope scrolls immediately (no early squish)\n this.full = true;\n }\n push(x){\n this.a[this.i] = x;\n this.i = (this.i + 1) % this.n;\n }\n toArray(){\n \/\/ return in time order (oldest -> newest)\n const out = new Float64Array(this.n);\n const k = this.i; \/\/ next write index == oldest sample\n out.set(this.a.subarray(k));\n out.set(this.a.subarray(0, k), this.n - k);\n return out;\n }\n }\n\n \/\/ ----------------- layout \/ DPI-safe canvas -----------------\n\n const scene = document.getElementById(\"scene\");\n const scope = document.getElementById(\"scope\");\n const sceneCtx = scene.getContext(\"2d\");\n const scopeCtx = scope.getContext(\"2d\");\n const badge = document.getElementById(\"badge\");\n\n function resizeCanvasToCSS(canvas){\n const dpr = window.devicePixelRatio || 1;\n const rect = canvas.getBoundingClientRect();\n const w = Math.max(1, Math.floor(rect.width * dpr));\n const h = Math.max(1, Math.floor(rect.height * dpr));\n if (canvas.width !== w || canvas.height !== h){\n canvas.width = w;\n canvas.height = h;\n }\n return { w, h, dpr, rect };\n }\n\n \/\/ fixed world view: choose a constant \"world\" window so the drawing doesn't auto-zoom\n \/\/ (soma stays the same even if you later change axon length).\n const WORLD = { xmin: -2, xmax: 6, ymin: -3, ymax: 3 };\n\n function makeWorldXform(canvas, paddingPx = 30){\n const W = canvas.width, H = canvas.height;\n const spanX = WORLD.xmax - WORLD.xmin;\n const spanY = WORLD.ymax - WORLD.ymin;\n\n const sx = (W - 2 * paddingPx) \/ spanX;\n const sy = (H - 2 * paddingPx) \/ spanY;\n const s = Math.min(sx, sy); \/\/ isotropic\n\n const cx = 0.5 * (WORLD.xmin + WORLD.xmax);\n const cy = 0.5 * (WORLD.ymin + WORLD.ymax);\n\n const map = (x, y) => {\n const X = (x - cx) * s + W \/ 2;\n const Y = -(y - cy) * s + H \/ 2;\n return [X, Y];\n };\n\n return { map, scale: s };\n }\n\n \/\/ ----------------- model: one soma compartment -----------------\n\n const area_cm2 = 1e-4;\n const params = new HHParams({\n area_cm2,\n Cm_uF_cm2: 1.0,\n gNa_mS_cm2: 120.0,\n gK_mS_cm2: 36.0,\n gL_mS_cm2: 0.3,\n gNaP_mS_cm2: 0.0,\n gKP_mS_cm2: 0.0,\n ENa_mV: 50.0,\n EK_mV: -77.0,\n EL_mV: -54.387\n });\n\n const soma = new Compartment(params, -0.065, { name: \"S000\", pos: [0.5, 0.0], draw_rad: 0.45 });\n\n const trace = new RingBuffer(1200, -0.065); \/\/ ~ scope history; prefilled\n\n \/\/ stim state\n let t_s = 0.0;\n let dt_s = 0.01e-3;\n let stimUntil_s = -1;\n let stimAmp_uA_cm2 = 12.0;\n let stimDur_ms = 1.0;\n\n \/\/ ----------------- UI wiring -----------------\n\n const $ = (id) => document.getElementById(id);\n\n function linkSlider(id, outId, fmt = (x)=>String(x)){\n const el = $(id);\n const out = $(outId);\n const update = () => { out.textContent = fmt(Number(el.value)); };\n el.addEventListener(\"input\", update);\n update();\n return el;\n }\n\n const s_gNa = linkSlider(\"gNa\", \"v_gNa\", x => x.toFixed(0));\n const s_gK = linkSlider(\"gK\", \"v_gK\", x => x.toFixed(0));\n const s_gNaP = linkSlider(\"gNaP\", \"v_gNaP\", x => x.toFixed(2));\n const s_gKP = linkSlider(\"gKP\", \"v_gKP\", x => x.toFixed(2));\n \/\/ const s_gL = linkSlider(\"gL\", \"v_gL\", x => x.toFixed(3));\n const s_Iamp = linkSlider(\"Iamp\", \"v_Iamp\", x => x.toFixed(1));\n const s_Idur = linkSlider(\"Idur\", \"v_Idur\", x => x.toFixed(1));\n const s_dt = linkSlider(\"dt\", \"v_dt\", x => x.toFixed(3));\n\n const defaults = {\n\tgNa: 120,\n\tgK: 36,\n\tgNaP: 0.02, \/\/ mS\/cm^2 (passive Na)\n\tgKP: 0.10, \/\/ mS\/cm^2 (passive K)\n\tIamp: 12,\n\tIdur: 1.0,\n\tdt: 0.01\n };\n\n document.getElementById(\"resetBtn\").addEventListener(\"click\", () => {\n\ts_gNa.value = defaults.gNa;\n\ts_gK.value = defaults.gK;\n\ts_gNaP.value = defaults.gNaP;\n\ts_gKP.value = defaults.gKP;\n\t\/\/ s_gL.value = defaults.gL;\n\ts_Iamp.value = defaults.Iamp;\n\ts_Idur.value = defaults.Idur;\n\ts_dt.value = defaults.dt;\n\n\t\/\/ trigger display updates\n\ts_gNa.dispatchEvent(new Event(\"input\"));\n\ts_gK.dispatchEvent(new Event(\"input\"));\n\ts_gNaP.dispatchEvent(new Event(\"input\"));\n\ts_gKP.dispatchEvent(new Event(\"input\"));\n\t\/\/ s_gL.dispatchEvent(new Event(\"input\"));\n\ts_Iamp.dispatchEvent(new Event(\"input\"));\n\ts_Idur.dispatchEvent(new Event(\"input\"));\n\ts_dt.dispatchEvent(new Event(\"input\"));\n });\n \n function updateParamsFromUI(){\n soma.p.gNa_mS_cm2 = Number(s_gNa.value);\n soma.p.gK_mS_cm2 = Number(s_gK.value);\n soma.p.gNaP_mS_cm2 = Number(s_gNaP.value);\n soma.p.gKP_mS_cm2 = Number(s_gKP.value);\n \/\/ soma.p.gL_mS_cm2 = Number(s_gL.value);\n\n stimAmp_uA_cm2 = Number(s_Iamp.value);\n stimDur_ms = Number(s_Idur.value);\n\n const dt_ms = Number(s_dt.value);\n dt_s = dt_ms * 1e-3;\n }\n\n \/\/ capture keypresses globally and prevent browser find-from-typing\n window.addEventListener(\"keydown\", (ev) => {\n\t\/\/ Don't hijack typical typing in text fields, but DO allow range sliders.\n\tconst el = ev.target;\n\tconst tag = el?.tagName?.toLowerCase() || \"\";\n\tconst isTextEntry =\n\t tag === \"textarea\" ||\n\t tag === \"select\" ||\n\t (tag === \"input\" && ![\"range\", \"checkbox\", \"button\"].includes((el.type || \"\").toLowerCase()));\n\n\tif (isTextEntry) return;\n\n\t\/\/ Stim key\n\tif (ev.key === \"1\") {\n\t ev.preventDefault(); \/\/ blocks typeahead-find\n\t ev.stopPropagation();\n\n\t if (ev.repeat) return; \/\/ optional: avoid auto-repeat stimulation\n\t stimUntil_s = t_s + (stimDur_ms * 1e-3);\n\t}\n }, { capture: true });\n\n \/\/ window.addEventListener(\"keydown\", (ev) => {\n \/\/ \/\/ ignore if user is interacting with a form input\n \/\/ const tag = (ev.target && ev.target.tagName) ? ev.target.tagName.toLowerCase() : \"\";\n \/\/ if (tag === \"input\" || tag === \"textarea\" || tag === \"select\") return;\n\n \/\/ if (ev.key === \"1\"){\n \/\/ ev.preventDefault();\n \/\/ ev.stopPropagation();\n \/\/ \/\/ schedule a single pulse starting \"now\"\n \/\/ stimUntil_s = t_s + (stimDur_ms * 1e-3);\n \/\/ }\n \/\/ }, { capture: true });\n\n \/\/ ----------------- drawing -----------------\n\n function drawScene(xform){\n const { map, scale } = xform;\n\n \/\/ clear\n sceneCtx.clearRect(0, 0, scene.width, scene.height);\n\n \/\/ soma\n const useColor = document.getElementById(\"useColor\").checked;\n const col = useColor ? vcol(soma.V) : { r: 160, g: 165, b: 175 }; \/\/ neutral gray\n \/\/ const col = vcol(soma.V);\n const [X, Y] = map(soma.pos[0], soma.pos[1]);\n const r = Math.max(1, soma.draw_rad * scale);\n\n sceneCtx.beginPath();\n sceneCtx.arc(X, Y, r, 0, Math.PI * 2);\n sceneCtx.fillStyle = `rgb(${col.r},${col.g},${col.b})`;\n sceneCtx.fill();\n\n \/\/ electrode markers (fixed pixel size, not soma-scaled)\n \/\/ recording (blue-ish)\n drawPipette(sceneCtx, X, Y, r, { color: \"rgba(120,170,255,0.95)\", dir: [+1, -1], label: \"REC\" });\n \/\/ stim (green-ish)\n drawPipette(sceneCtx, X, Y, r, { color: \"rgba(120,255,180,0.95)\", dir: [+1, +1], label: \"STIM\" });\n }\n\n function drawPipette(ctx, X, Y, rPix, { color=\"rgba(230,232,238,0.9)\", dir=[1,-1], label=\"\" } = {}){\n\t\/\/ A sharp glass electrode look: long thin triangle\n\t\/\/ Fixed pixels so it remains readable at any zoom.\n\tconst dx = dir[0], dy = dir[1];\n\n\tconst gap = -15; \/\/ tiny air gap outside membrane (px)\n\tconst lead = rPix + gap; \/\/ tip starts at soma radius, not center\n\tconst L = 60; \/\/ length (px)\n\tconst w = 10; \/\/ base width (px)\n\tconst nx = -dy, ny = dx; \/\/ perpendicular\n\n\t\/\/ tip point (on\/just outside membrane)\n\tconst tipX = X + dx * lead;\n\tconst tipY = Y + dy * lead;\n\n\t\/\/ base center\n\tconst baseX = tipX + dx * L;\n\tconst baseY = tipY + dy * L;\n\n\t\/\/ base corners\n\tconst x1 = baseX + nx * (w * 0.5);\n\tconst y1 = baseY + ny * (w * 0.5);\n\tconst x2 = baseX - nx * (w * 0.5);\n\tconst y2 = baseY - ny * (w * 0.5);\n\n\t\/\/ triangle body\n\tctx.beginPath();\n\tctx.moveTo(tipX, tipY);\n\tctx.lineTo(x1, y1);\n\tctx.lineTo(x2, y2);\n\tctx.closePath();\n\tctx.fillStyle = color;\n\tctx.fill();\n\n\t\/\/ short leader from membrane to tip (optional but looks good)\n\tctx.beginPath();\n\tctx.moveTo(X + dx * rPix, Y + dy * rPix);\n\tctx.lineTo(tipX, tipY);\n\tctx.lineWidth = 2;\n\tctx.strokeStyle = color;\n\tctx.stroke();\n\n\tif (label){\n\t ctx.font = \"12px system-ui, sans-serif\";\n\t ctx.fillStyle = \"rgba(230,232,238,0.75)\";\n\t ctx.fillText(label, baseX + dx*10, baseY + dy*10);\n\t}\n }\n\n function drawScope(){\n scopeCtx.clearRect(0, 0, scope.width, scope.height);\n\n const W = scope.width, H = scope.height;\n\n \/\/ plot window (in Volts)\n const vmin = -0.09;\n const vmax = 0.06;\n\n \/\/ frame\n scopeCtx.lineWidth = 1;\n scopeCtx.strokeStyle = \"rgba(230,232,238,0.20)\";\n scopeCtx.strokeRect(0.5, 0.5, W-1, H-1);\n\n \/\/ midline at -65mV\n const y0 = (1 - ((-0.065 - vmin) \/ (vmax - vmin))) * H;\n scopeCtx.beginPath();\n scopeCtx.moveTo(0, y0);\n scopeCtx.lineTo(W, y0);\n scopeCtx.strokeStyle = \"rgba(230,232,238,0.10)\";\n scopeCtx.stroke();\n\n \/\/ trace\n const data = trace.toArray();\n scopeCtx.beginPath();\n for (let i=0; i<data.length; i++){\n const x = (i \/ (data.length - 1)) * W;\n const v = data[i];\n const yn = 1 - ((v - vmin) \/ (vmax - vmin));\n const y = yn * H;\n if (i === 0) scopeCtx.moveTo(x, y);\n else scopeCtx.lineTo(x, y);\n }\n scopeCtx.lineWidth = 2;\n scopeCtx.strokeStyle = \"rgba(120,170,255,0.95)\";\n scopeCtx.stroke();\n\n \/\/ labels\n scopeCtx.font = \"12px system-ui, sans-serif\";\n scopeCtx.fillStyle = \"rgba(230,232,238,0.70)\";\n scopeCtx.fillText(\"V (S000)\", 10, 18);\n }\n\n \/\/ ----------------- main loop -----------------\n\n function frame(){\n resizeCanvasToCSS(scene);\n resizeCanvasToCSS(scope);\n\n updateParamsFromUI();\n\n \/\/ step model: several small dt steps per animation frame\n const stepsPerFrame = 10;\n for (let k=0; k<stepsPerFrame; k++){\n const Iinj_A =\n (t_s < stimUntil_s)\n ? (stimAmp_uA_cm2 * 1e-6 * soma.p.area_cm2)\n : 0.0;\n\n soma.step(dt_s, Iinj_A, null);\n\n t_s += dt_s;\n }\n\n \/\/ sample after stepping\n trace.push(soma.V);\n\n \/\/ transforms & draw\n const xform = makeWorldXform(scene, 35);\n drawScene(xform);\n drawScope();\n\n \/\/ badge\n const VmV = soma.V * 1e3;\n badge.textContent = `t = ${t_s.toFixed(4)} s \u00b7 V = ${VmV.toFixed(2)} mV`;\n\n requestAnimationFrame(frame);\n }\n\n requestAnimationFrame(frame);\n <\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>HH Single Compartment Demo Single compartment HH Press 1 to inject a pulse at the soma. The sim runs continuously. Voltage coloration Active gNa (mS\/cm\u00b2) Active gK (mS\/cm\u00b2) Passive (leak) gNaP (mS\/cm\u00b2) Passive (leak) gKP (mS\/cm\u00b2) Pulse amplitude (\u00b5A\/cm\u00b2) Pulse duration (ms) dt (ms) Reset controls Tip: try lowering active gNa, then see how much […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":4438,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4633","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/comments?post=4633"}],"version-history":[{"count":12,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4633\/revisions"}],"predecessor-version":[{"id":4654,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4633\/revisions\/4654"}],"up":[{"embeddable":true,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4438"}],"wp:attachment":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/media?parent=4633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\n\n\n \n \n HH Single Compartment Demo<\/title>\n <style>\n :root{\n --bg: #0f1115;\n --panel: #151923;\n --ink: #e6e8ee;\n --muted: rgba(230,232,238,0.65);\n --hair: rgba(230,232,238,0.14);\n --accent: rgba(120,170,255,0.9);\n }\n html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); font: 14px\/1.25 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, sans-serif; }\n .app{\n height: 100%;\n display: grid;\n grid-template-columns: 280px 1fr;\n gap: 12px;\n padding: 12px;\n box-sizing: border-box;\n }\n .panel{\n background: var(--panel);\n border: 1px solid var(--hair);\n border-radius: 12px;\n padding: 12px;\n box-sizing: border-box;\n }\n .controls h2{ margin: 0 0 8px 0; font-size: 16px; font-weight: 650; }\n .hint{ color: var(--muted); margin: 0 0 10px 0; }\n .row{ margin: 10px 0; }\n .row label{ display: flex; justify-content: space-between; gap: 10px; color: var(--muted); }\n .row input[type=\"range\"]{ width: 100%; }\n .value{ color: var(--ink); font-variant-numeric: tabular-nums; }\n .main{\n display: grid;\n grid-template-rows: 1fr 220px;\n gap: 12px;\n min-width: 0;\n min-height: 0;\n }\n .canvasWrap{\n position: relative;\n overflow: hidden;\n min-height: 0;\n }\n canvas{ width: 100%; height: 100%; display: block; }\n .badge{\n position: absolute;\n left: 12px; top: 12px;\n padding: 6px 10px;\n background: rgba(15,17,21,0.65);\n border: 1px solid var(--hair);\n border-radius: 999px;\n color: var(--muted);\n backdrop-filter: blur(6px);\n font-variant-numeric: tabular-nums;\n }\n .kbd{\n padding: 0 6px;\n border: 1px solid var(--hair);\n border-bottom-color: rgba(230,232,238,0.25);\n border-radius: 6px;\n background: rgba(15,17,21,0.55);\n color: var(--ink);\n font-variant-numeric: tabular-nums;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"app\">\n <div class=\"panel controls\">\n <h2>Single compartment HH<\/h2>\n <p class=\"hint\">\n Press <span class=\"kbd\">1<\/span> to inject a pulse at the soma.\n The sim runs continuously.\n <\/p>\n\n <div class=\"row\">\n\t<label style=\"justify-content:flex-start; gap:10px; color: var(--ink);\">\n\t <input id=\"useColor\" type=\"checkbox\" checked>\n\t <span>Voltage coloration<\/span>\n\t<\/label>\n <\/div>\n\n <div class=\"row\">\n <label><span>Active gNa (mS\/cm\u00b2)<\/span><span class=\"value\" id=\"v_gNa\"><\/span><\/label>\n <input id=\"gNa\" type=\"range\" min=\"0\" max=\"200\" step=\"1\" value=\"120\">\n <\/div>\n\n <div class=\"row\">\n <label><span>Active gK (mS\/cm\u00b2)<\/span><span class=\"value\" id=\"v_gK\"><\/span><\/label>\n <input id=\"gK\" type=\"range\" min=\"0\" max=\"80\" step=\"1\" value=\"36\">\n <\/div>\n\n <div class=\"row\">\n <label><span>Passive (leak) gNaP (mS\/cm\u00b2)<\/span><span class=\"value\" id=\"v_gNaP\"><\/span><\/label>\n <input id=\"gNaP\" type=\"range\" min=\"0\" max=\"0.5\" step=\"0.005\" value=\"0.02\">\n <\/div>\n\n <div class=\"row\">\n <label><span>Passive (leak) gKP (mS\/cm\u00b2)<\/span><span class=\"value\" id=\"v_gKP\"><\/span><\/label>\n <input id=\"gKP\" type=\"range\" min=\"0\" max=\"0.5\" step=\"0.005\" value=\"0.1\">\n <\/div>\n\n \n \n \n \n\n <hr style=\"border:none;border-top:1px solid var(--hair); margin: 12px 0;\">\n\n <div class=\"row\">\n <label><span>Pulse amplitude (\u00b5A\/cm\u00b2)<\/span><span class=\"value\" id=\"v_Iamp\"><\/span><\/label>\n <input id=\"Iamp\" type=\"range\" min=\"0\" max=\"40\" step=\"0.1\" value=\"12\">\n <\/div>\n\n <div class=\"row\">\n <label><span>Pulse duration (ms)<\/span><span class=\"value\" id=\"v_Idur\"><\/span><\/label>\n <input id=\"Idur\" type=\"range\" min=\"0.1\" max=\"5\" step=\"0.1\" value=\"1.0\">\n <\/div>\n\n <div class=\"row\">\n <label><span>dt (ms)<\/span><span class=\"value\" id=\"v_dt\"><\/span><\/label>\n <input id=\"dt\" type=\"range\" min=\"0.005\" max=\"0.05\" step=\"0.005\" value=\"0.01\">\n <\/div>\n\n <div class=\"row\">\n\t<button id=\"resetBtn\" type=\"button\"\n\t\tstyle=\"width:100%; padding:10px 12px; border-radius:10px;\n\t\t border:1px solid var(--hair); background: rgba(15,17,21,0.55);\n\t\t color: var(--ink); cursor:pointer;\">\n\t Reset controls\n\t<\/button>\n <\/div>\n\n <p class=\"hint\" style=\"margin-top: 10px;\">\n Tip: try lowering active gNa, then see how much stimulus is needed.\n <\/p>\n <\/div>\n\n <div class=\"main\">\n <div class=\"panel canvasWrap\" id=\"sceneWrap\">\n <div class=\"badge\" id=\"badge\">t = 0.0000 s \u00b7 V = -65.00 mV<\/div>\n <canvas id=\"scene\"><\/canvas>\n <\/div>\n\n <div class=\"panel canvasWrap\">\n <canvas id=\"scope\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n <script type=\"module\">\n import { HHParams, Compartment } from \"\/~theobald\/wp-content\/plugins\/neuro_demos\/assets\/hh.js\";\n\n \/\/ ----------------- tiny utils -----------------\n\n function clamp01(x){ return Math.max(0, Math.min(1, x)); }\n\n \/\/ paired logistic (your dlog)\n function dlog(x, ymin, ymid, ymax, xmid1, xmid2, k1, k2){\n const s1 = 1.0 \/ (1.0 + Math.exp(-k1 * (x - xmid1)));\n const s2 = 1.0 \/ (1.0 + Math.exp(-k2 * (x - xmid2)));\n return ymin + (ymid - ymin) * s1 + (ymax - ymid) * s2;\n }\n\n \/\/ voltage -> rgb(0..255)\n function vcol(v){\n const rs = dlog(v, 0.0, 0.5, 1.0, -0.085, -0.045, 210, 250);\n const gs = dlog(v, 0.0, 0.5, 1.0, -0.085, -0.010, 210, 160);\n const bs = dlog(v, 1.0, 0.5, 1.0, -0.075, 0.030, 500, 160);\n return {\n r: Math.round(255 * clamp01(rs)),\n g: Math.round(255 * clamp01(gs)),\n b: Math.round(255 * clamp01(bs)),\n };\n }\n\n class RingBuffer {\n constructor(n, fillValue = 0){\n this.n = n;\n this.a = new Float64Array(n);\n this.i = 0;\n this.full = false;\n this.a.fill(fillValue);\n \/\/ start \"full\" so the scope scrolls immediately (no early squish)\n this.full = true;\n }\n push(x){\n this.a[this.i] = x;\n this.i = (this.i + 1) % this.n;\n }\n toArray(){\n \/\/ return in time order (oldest -> newest)\n const out = new Float64Array(this.n);\n const k = this.i; \/\/ next write index == oldest sample\n out.set(this.a.subarray(k));\n out.set(this.a.subarray(0, k), this.n - k);\n return out;\n }\n }\n\n \/\/ ----------------- layout \/ DPI-safe canvas -----------------\n\n const scene = document.getElementById(\"scene\");\n const scope = document.getElementById(\"scope\");\n const sceneCtx = scene.getContext(\"2d\");\n const scopeCtx = scope.getContext(\"2d\");\n const badge = document.getElementById(\"badge\");\n\n function resizeCanvasToCSS(canvas){\n const dpr = window.devicePixelRatio || 1;\n const rect = canvas.getBoundingClientRect();\n const w = Math.max(1, Math.floor(rect.width * dpr));\n const h = Math.max(1, Math.floor(rect.height * dpr));\n if (canvas.width !== w || canvas.height !== h){\n canvas.width = w;\n canvas.height = h;\n }\n return { w, h, dpr, rect };\n }\n\n \/\/ fixed world view: choose a constant \"world\" window so the drawing doesn't auto-zoom\n \/\/ (soma stays the same even if you later change axon length).\n const WORLD = { xmin: -2, xmax: 6, ymin: -3, ymax: 3 };\n\n function makeWorldXform(canvas, paddingPx = 30){\n const W = canvas.width, H = canvas.height;\n const spanX = WORLD.xmax - WORLD.xmin;\n const spanY = WORLD.ymax - WORLD.ymin;\n\n const sx = (W - 2 * paddingPx) \/ spanX;\n const sy = (H - 2 * paddingPx) \/ spanY;\n const s = Math.min(sx, sy); \/\/ isotropic\n\n const cx = 0.5 * (WORLD.xmin + WORLD.xmax);\n const cy = 0.5 * (WORLD.ymin + WORLD.ymax);\n\n const map = (x, y) => {\n const X = (x - cx) * s + W \/ 2;\n const Y = -(y - cy) * s + H \/ 2;\n return [X, Y];\n };\n\n return { map, scale: s };\n }\n\n \/\/ ----------------- model: one soma compartment -----------------\n\n const area_cm2 = 1e-4;\n const params = new HHParams({\n area_cm2,\n Cm_uF_cm2: 1.0,\n gNa_mS_cm2: 120.0,\n gK_mS_cm2: 36.0,\n gL_mS_cm2: 0.3,\n gNaP_mS_cm2: 0.0,\n gKP_mS_cm2: 0.0,\n ENa_mV: 50.0,\n EK_mV: -77.0,\n EL_mV: -54.387\n });\n\n const soma = new Compartment(params, -0.065, { name: \"S000\", pos: [0.5, 0.0], draw_rad: 0.45 });\n\n const trace = new RingBuffer(1200, -0.065); \/\/ ~ scope history; prefilled\n\n \/\/ stim state\n let t_s = 0.0;\n let dt_s = 0.01e-3;\n let stimUntil_s = -1;\n let stimAmp_uA_cm2 = 12.0;\n let stimDur_ms = 1.0;\n\n \/\/ ----------------- UI wiring -----------------\n\n const $ = (id) => document.getElementById(id);\n\n function linkSlider(id, outId, fmt = (x)=>String(x)){\n const el = $(id);\n const out = $(outId);\n const update = () => { out.textContent = fmt(Number(el.value)); };\n el.addEventListener(\"input\", update);\n update();\n return el;\n }\n\n const s_gNa = linkSlider(\"gNa\", \"v_gNa\", x => x.toFixed(0));\n const s_gK = linkSlider(\"gK\", \"v_gK\", x => x.toFixed(0));\n const s_gNaP = linkSlider(\"gNaP\", \"v_gNaP\", x => x.toFixed(2));\n const s_gKP = linkSlider(\"gKP\", \"v_gKP\", x => x.toFixed(2));\n \/\/ const s_gL = linkSlider(\"gL\", \"v_gL\", x => x.toFixed(3));\n const s_Iamp = linkSlider(\"Iamp\", \"v_Iamp\", x => x.toFixed(1));\n const s_Idur = linkSlider(\"Idur\", \"v_Idur\", x => x.toFixed(1));\n const s_dt = linkSlider(\"dt\", \"v_dt\", x => x.toFixed(3));\n\n const defaults = {\n\tgNa: 120,\n\tgK: 36,\n\tgNaP: 0.02, \/\/ mS\/cm^2 (passive Na)\n\tgKP: 0.10, \/\/ mS\/cm^2 (passive K)\n\tIamp: 12,\n\tIdur: 1.0,\n\tdt: 0.01\n };\n\n document.getElementById(\"resetBtn\").addEventListener(\"click\", () => {\n\ts_gNa.value = defaults.gNa;\n\ts_gK.value = defaults.gK;\n\ts_gNaP.value = defaults.gNaP;\n\ts_gKP.value = defaults.gKP;\n\t\/\/ s_gL.value = defaults.gL;\n\ts_Iamp.value = defaults.Iamp;\n\ts_Idur.value = defaults.Idur;\n\ts_dt.value = defaults.dt;\n\n\t\/\/ trigger display updates\n\ts_gNa.dispatchEvent(new Event(\"input\"));\n\ts_gK.dispatchEvent(new Event(\"input\"));\n\ts_gNaP.dispatchEvent(new Event(\"input\"));\n\ts_gKP.dispatchEvent(new Event(\"input\"));\n\t\/\/ s_gL.dispatchEvent(new Event(\"input\"));\n\ts_Iamp.dispatchEvent(new Event(\"input\"));\n\ts_Idur.dispatchEvent(new Event(\"input\"));\n\ts_dt.dispatchEvent(new Event(\"input\"));\n });\n \n function updateParamsFromUI(){\n soma.p.gNa_mS_cm2 = Number(s_gNa.value);\n soma.p.gK_mS_cm2 = Number(s_gK.value);\n soma.p.gNaP_mS_cm2 = Number(s_gNaP.value);\n soma.p.gKP_mS_cm2 = Number(s_gKP.value);\n \/\/ soma.p.gL_mS_cm2 = Number(s_gL.value);\n\n stimAmp_uA_cm2 = Number(s_Iamp.value);\n stimDur_ms = Number(s_Idur.value);\n\n const dt_ms = Number(s_dt.value);\n dt_s = dt_ms * 1e-3;\n }\n\n \/\/ capture keypresses globally and prevent browser find-from-typing\n window.addEventListener(\"keydown\", (ev) => {\n\t\/\/ Don't hijack typical typing in text fields, but DO allow range sliders.\n\tconst el = ev.target;\n\tconst tag = el?.tagName?.toLowerCase() || \"\";\n\tconst isTextEntry =\n\t tag === \"textarea\" ||\n\t tag === \"select\" ||\n\t (tag === \"input\" && ![\"range\", \"checkbox\", \"button\"].includes((el.type || \"\").toLowerCase()));\n\n\tif (isTextEntry) return;\n\n\t\/\/ Stim key\n\tif (ev.key === \"1\") {\n\t ev.preventDefault(); \/\/ blocks typeahead-find\n\t ev.stopPropagation();\n\n\t if (ev.repeat) return; \/\/ optional: avoid auto-repeat stimulation\n\t stimUntil_s = t_s + (stimDur_ms * 1e-3);\n\t}\n }, { capture: true });\n\n \/\/ window.addEventListener(\"keydown\", (ev) => {\n \/\/ \/\/ ignore if user is interacting with a form input\n \/\/ const tag = (ev.target && ev.target.tagName) ? ev.target.tagName.toLowerCase() : \"\";\n \/\/ if (tag === \"input\" || tag === \"textarea\" || tag === \"select\") return;\n\n \/\/ if (ev.key === \"1\"){\n \/\/ ev.preventDefault();\n \/\/ ev.stopPropagation();\n \/\/ \/\/ schedule a single pulse starting \"now\"\n \/\/ stimUntil_s = t_s + (stimDur_ms * 1e-3);\n \/\/ }\n \/\/ }, { capture: true });\n\n \/\/ ----------------- drawing -----------------\n\n function drawScene(xform){\n const { map, scale } = xform;\n\n \/\/ clear\n sceneCtx.clearRect(0, 0, scene.width, scene.height);\n\n \/\/ soma\n const useColor = document.getElementById(\"useColor\").checked;\n const col = useColor ? vcol(soma.V) : { r: 160, g: 165, b: 175 }; \/\/ neutral gray\n \/\/ const col = vcol(soma.V);\n const [X, Y] = map(soma.pos[0], soma.pos[1]);\n const r = Math.max(1, soma.draw_rad * scale);\n\n sceneCtx.beginPath();\n sceneCtx.arc(X, Y, r, 0, Math.PI * 2);\n sceneCtx.fillStyle = `rgb(${col.r},${col.g},${col.b})`;\n sceneCtx.fill();\n\n \/\/ electrode markers (fixed pixel size, not soma-scaled)\n \/\/ recording (blue-ish)\n drawPipette(sceneCtx, X, Y, r, { color: \"rgba(120,170,255,0.95)\", dir: [+1, -1], label: \"REC\" });\n \/\/ stim (green-ish)\n drawPipette(sceneCtx, X, Y, r, { color: \"rgba(120,255,180,0.95)\", dir: [+1, +1], label: \"STIM\" });\n }\n\n function drawPipette(ctx, X, Y, rPix, { color=\"rgba(230,232,238,0.9)\", dir=[1,-1], label=\"\" } = {}){\n\t\/\/ A sharp glass electrode look: long thin triangle\n\t\/\/ Fixed pixels so it remains readable at any zoom.\n\tconst dx = dir[0], dy = dir[1];\n\n\tconst gap = -15; \/\/ tiny air gap outside membrane (px)\n\tconst lead = rPix + gap; \/\/ tip starts at soma radius, not center\n\tconst L = 60; \/\/ length (px)\n\tconst w = 10; \/\/ base width (px)\n\tconst nx = -dy, ny = dx; \/\/ perpendicular\n\n\t\/\/ tip point (on\/just outside membrane)\n\tconst tipX = X + dx * lead;\n\tconst tipY = Y + dy * lead;\n\n\t\/\/ base center\n\tconst baseX = tipX + dx * L;\n\tconst baseY = tipY + dy * L;\n\n\t\/\/ base corners\n\tconst x1 = baseX + nx * (w * 0.5);\n\tconst y1 = baseY + ny * (w * 0.5);\n\tconst x2 = baseX - nx * (w * 0.5);\n\tconst y2 = baseY - ny * (w * 0.5);\n\n\t\/\/ triangle body\n\tctx.beginPath();\n\tctx.moveTo(tipX, tipY);\n\tctx.lineTo(x1, y1);\n\tctx.lineTo(x2, y2);\n\tctx.closePath();\n\tctx.fillStyle = color;\n\tctx.fill();\n\n\t\/\/ short leader from membrane to tip (optional but looks good)\n\tctx.beginPath();\n\tctx.moveTo(X + dx * rPix, Y + dy * rPix);\n\tctx.lineTo(tipX, tipY);\n\tctx.lineWidth = 2;\n\tctx.strokeStyle = color;\n\tctx.stroke();\n\n\tif (label){\n\t ctx.font = \"12px system-ui, sans-serif\";\n\t ctx.fillStyle = \"rgba(230,232,238,0.75)\";\n\t ctx.fillText(label, baseX + dx*10, baseY + dy*10);\n\t}\n }\n\n function drawScope(){\n scopeCtx.clearRect(0, 0, scope.width, scope.height);\n\n const W = scope.width, H = scope.height;\n\n \/\/ plot window (in Volts)\n const vmin = -0.09;\n const vmax = 0.06;\n\n \/\/ frame\n scopeCtx.lineWidth = 1;\n scopeCtx.strokeStyle = \"rgba(230,232,238,0.20)\";\n scopeCtx.strokeRect(0.5, 0.5, W-1, H-1);\n\n \/\/ midline at -65mV\n const y0 = (1 - ((-0.065 - vmin) \/ (vmax - vmin))) * H;\n scopeCtx.beginPath();\n scopeCtx.moveTo(0, y0);\n scopeCtx.lineTo(W, y0);\n scopeCtx.strokeStyle = \"rgba(230,232,238,0.10)\";\n scopeCtx.stroke();\n\n \/\/ trace\n const data = trace.toArray();\n scopeCtx.beginPath();\n for (let i=0; i<data.length; i++){\n const x = (i \/ (data.length - 1)) * W;\n const v = data[i];\n const yn = 1 - ((v - vmin) \/ (vmax - vmin));\n const y = yn * H;\n if (i === 0) scopeCtx.moveTo(x, y);\n else scopeCtx.lineTo(x, y);\n }\n scopeCtx.lineWidth = 2;\n scopeCtx.strokeStyle = \"rgba(120,170,255,0.95)\";\n scopeCtx.stroke();\n\n \/\/ labels\n scopeCtx.font = \"12px system-ui, sans-serif\";\n scopeCtx.fillStyle = \"rgba(230,232,238,0.70)\";\n scopeCtx.fillText(\"V (S000)\", 10, 18);\n }\n\n \/\/ ----------------- main loop -----------------\n\n function frame(){\n resizeCanvasToCSS(scene);\n resizeCanvasToCSS(scope);\n\n updateParamsFromUI();\n\n \/\/ step model: several small dt steps per animation frame\n const stepsPerFrame = 10;\n for (let k=0; k<stepsPerFrame; k++){\n const Iinj_A =\n (t_s < stimUntil_s)\n ? (stimAmp_uA_cm2 * 1e-6 * soma.p.area_cm2)\n : 0.0;\n\n soma.step(dt_s, Iinj_A, null);\n\n t_s += dt_s;\n }\n\n \/\/ sample after stepping\n trace.push(soma.V);\n\n \/\/ transforms & draw\n const xform = makeWorldXform(scene, 35);\n drawScene(xform);\n drawScope();\n\n \/\/ badge\n const VmV = soma.V * 1e3;\n badge.textContent = `t = ${t_s.toFixed(4)} s \u00b7 V = ${VmV.toFixed(2)} mV`;\n\n requestAnimationFrame(frame);\n }\n\n requestAnimationFrame(frame);\n <\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>HH Single Compartment Demo Single compartment HH Press 1 to inject a pulse at the soma. The sim runs continuously. Voltage coloration Active gNa (mS\/cm\u00b2) Active gK (mS\/cm\u00b2) Passive (leak) gNaP (mS\/cm\u00b2) Passive (leak) gKP (mS\/cm\u00b2) Pulse amplitude (\u00b5A\/cm\u00b2) Pulse duration (ms) dt (ms) Reset controls Tip: try lowering active gNa, then see how much […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":4438,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4633","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/comments?post=4633"}],"version-history":[{"count":12,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4633\/revisions"}],"predecessor-version":[{"id":4654,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4633\/revisions\/4654"}],"up":[{"embeddable":true,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4438"}],"wp:attachment":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/media?parent=4633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}