-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathautonomic.html
More file actions
10 lines (10 loc) · 3.94 KB
/
Copy pathautonomic.html
File metadata and controls
10 lines (10 loc) · 3.94 KB
1
2
3
4
5
6
7
8
9
10
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Autonomic Trace - Joseph B. Smith</title><meta name="description" content="An educational simulator of short-term arterial baroreflex feedback."><link rel="canonical" href="https://josephbsmith.com/autonomic"><link rel="stylesheet" href="/tool.css"><meta name="theme-color" content="#0f0e10"></head><body><main>
<a class="back" href="/tools">← tools</a><h1>Autonomic Trace</h1><p class="tag">One feedback loop, exposed</p><p class="lede">A transparent educational model of short-term arterial baroreflex feedback after a pressure disturbance. Move the disturbance and watch the afferent signal, sympathetic drive, heart rate, and vascular resistance answer it.</p>
<h2>Explore the response</h2><div class="grid"><label>Pressure disturbance <span id="shockValue">−20 mmHg</span><input id="shock" type="range" min="-30" max="20" value="-20"></label><label>Disturbance begins <span id="atValue">5 s</span><input id="at" type="range" min="1" max="20" value="5"></label></div><div class="panel"><canvas id="chart" width="820" height="360" style="width:100%;height:auto" role="img" aria-label="Simulated pressure and heart-rate response over 45 seconds"></canvas><p id="traceSummary" class="status"></p></div><div class="grid"><div class="panel"><span id="minP" class="metric"></span><span class="label">minimum pressure</span></div><div class="panel"><span id="maxH" class="metric"></span><span class="label">maximum heart rate</span></div><div class="panel"><span id="endP" class="metric"></span><span class="label">pressure at 45 s</span></div></div>
<h2>Run the model</h2><pre>python3 autonomic_trace.py --shock-mmhg -20 --shock-at 5 --seconds 45 --out trace.csv</pre>
<h2>The boundary</h2><p class="fine">This is an illustrative teaching model with exposed assumptions—not a validated patient model, medical device, diagnosis, treatment guide, or estimator of anyone's autonomic state. MIT licensed. <a href="https://github.com/josephbsmith/autonomic-trace" rel="noopener">Source and scientific references</a>.</p>
</main><script>
function simulate(shock,at){let sym=0,para=0,hr=70,res=1,out=[];for(let i=0;i<=450;i++){const t=i/10,d=t<at?0:shock*Math.exp(-(t-at)/10),p=90+d+.16*(hr-70)+30*(res-1),aff=1/(1+Math.exp(-.16*(p-90))),st=Math.max(0,1-2*aff),pt=Math.max(0,2*aff-1);sym+=.1*(st-sym)/5;para+=.1*(pt-para);hr=70+24*sym-18*para;res=1*(1+.35*sym);out.push({t,p,hr})}return out}
function draw(){const shock=+document.querySelector('#shock').value,at=+document.querySelector('#at').value,data=simulate(shock,at),canvas=document.querySelector('#chart'),ctx=canvas.getContext('2d'),W=canvas.width,H=canvas.height,pad=45;ctx.clearRect(0,0,W,H);ctx.strokeStyle='#403c43';ctx.lineWidth=1;for(let y=60;y<=120;y+=10){const py=H-pad-(y-50)/(130-50)*(H-2*pad);ctx.beginPath();ctx.moveTo(pad,py);ctx.lineTo(W-pad,py);ctx.stroke();ctx.fillStyle='#98938c';ctx.font='12px monospace';ctx.fillText(y,8,py+4)}function line(key,color){ctx.beginPath();data.forEach((d,i)=>{const x=pad+d.t/45*(W-2*pad),y=H-pad-(d[key]-50)/(130-50)*(H-2*pad);i?ctx.lineTo(x,y):ctx.moveTo(x,y)});ctx.strokeStyle=color;ctx.lineWidth=2;ctx.stroke()}line('p','#fb923c');line('hr','#62a8e5');ctx.fillStyle='#fb923c';ctx.fillText('pressure',pad,18);ctx.fillStyle='#62a8e5';ctx.fillText('heart rate',pad+88,18);const ps=data.map(d=>d.p),hs=data.map(d=>d.hr);document.querySelector('#minP').textContent=Math.min(...ps).toFixed(1)+' mmHg';document.querySelector('#maxH').textContent=Math.max(...hs).toFixed(1)+' bpm';document.querySelector('#endP').textContent=ps.at(-1).toFixed(1)+' mmHg';document.querySelector('#shockValue').textContent=(shock<0?'−':'')+Math.abs(shock)+' mmHg';document.querySelector('#atValue').textContent=at+' s';document.querySelector('#traceSummary').textContent='Orange: arterial pressure · blue: heart rate'}
document.querySelectorAll('input').forEach(x=>x.oninput=draw);draw();
</script></body></html>