Overlays: redraw at most once per frame, lighter sampling, pause when hidden

overlay/index.html

@@ -62,7 +62,7 @@ const T=[
 const P=(X,Y)=>[(X-150)/100,-(Y-150)/100];
 const css=n=>getComputedStyle(document.documentElement).getPropertyValue(n).trim();
 const col={up:css('--up'),down:css('--down'),bindu:css('--bindu'),ring:css('--ring'),fit:css('--fit'),fg:css('--fg')};
-function seg(a,b,n=500){const o=[];for(let i=0;i<=n;i++){const t=i/n;o.push([a[0]+(b[0]-a[0])*t,a[1]+(b[1]-a[1])*t])}return o}
+function seg(a,b,n=220){const o=[];for(let i=0;i<=n;i++){const t=i/n;o.push([a[0]+(b[0]-a[0])*t,a[1]+(b[1]-a[1])*t])}return o}
 const sides=[];T.forEach(([lx,by,ay,rx,ty])=>{const A=P(lx,by),B=P(150,ay),C=P(rx,by);[[A,B],[B,C],[C,A]].forEach(([a,b])=>sides.push({up:!!ty,pts:seg(a,b)}))});
 // Fit: send the outer downward triangle's vertices (where two outer lobes meet) onto the
 // side midpoints of the outer upward triangle, which lie on the same three rays: rho^2 = |V||M|.
@@ -79,7 +79,10 @@ const inv=(p,r2)=>{const r=p[0]*p[0]+p[1]*p[1];return r<1e-12?null:[r2*p[0]/r,r2
 let L={orig:true,unit:false,fit:true,outer:true},rho=RHO_FIT,zoom=1,pan=[0,0];
 const cv=document.getElementById('c'),ctx=cv.getContext('2d');
 function size(){const d=Math.min(devicePixelRatio,2);cv.width=innerWidth*d;cv.height=innerHeight*d;ctx.setTransform(d,0,0,d,0,0);draw()}
-function draw(){
+let queued=false;
+function draw(){if(queued||document.hidden)return;queued=true;requestAnimationFrame(()=>{queued=false;render()})}
+document.addEventListener('visibilitychange',()=>{if(!document.hidden)draw()});
+function render(){
   const w=innerWidth,h=innerHeight,cx=w/2+pan[0],cy=h*0.44+pan[1],s=Math.min(w,h)*0.34*zoom;
   ctx.fillStyle=css('--bg');ctx.fillRect(0,0,w,h);
   const X=p=>cx+p[0]*s,Y=p=>cy-p[1]*s;