31:T3a16,{ const W=860,H=620,EPS=1e-10,MAX=14000, C={p:4,q:4,r:3,maxDepth:11,radius:6.2,dual:false,guides:true}, D={surface:{s:470,x:0,y:20},klein:{s:275,x:0,y:0},poincare:{s:275,x:0,y:0},halfplane:{s:115,x:0,y:235}}, V=Object.fromEntries(Object.entries(D).map(([k,v])=>[k,{...v}])), N={surface:"Surface",klein:"Klein",poincare:"Poincaré",halfplane:"Half-plane"}, Fm={surface:"3D surface, current Lorentz frame",klein:"(X,Y)=(x/z,y/z)",poincare:"(X,Y)=(x/(z+1),y/(z+1))",halfplane:"(X,Y)=(x/(z-y),1/(z-y))"}; let mode="poincare",meshKey="",mesh=null,raf,drag=false,lx=0,ly=0,auto={d:0,r:0},adapting=false; const Fr={O:[0,0,1],X:[1,0,0],Y:[0,1,0]}; const css=(e,o)=>(Object.assign(e.style,o),e), E=(t,p={},...a)=>{let e=document.createElement(t);Object.assign(e,p);e.append(...a);return e}; const box=css(E("div"),{width:"100%",maxWidth:W+"px",fontFamily:"-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif",background:"#fff",borderRadius:"10px",boxShadow:"0 10px 30px #0002",overflow:"hidden"}); const top=css(E("div"),{padding:"14px 16px",background:"#f8f9fa",borderBottom:"1px solid #e1e4e8",display:"grid",gridTemplateColumns:"auto auto 1fr auto",gap:"16px",alignItems:"center"}); const wrap=css(E("div"),{position:"relative",width:W+"px",height:H+"px",background:"#fff"}); const cv=css(E("canvas",{width:W,height:H}),{display:"block",cursor:"grab",width:W+"px",height:H+"px"}),ctx=cv.getContext("2d"); const ov=css(E("div"),{position:"absolute",top:"16px",right:"16px",display:"flex",flexDirection:"column",gap:"8px"}); const rb=(t,f)=>css(E("button",{textContent:t,onclick:f}),{width:"38px",height:"38px",borderRadius:"50%",border:"1px solid #ccc",background:"white",fontSize:"20px",fontWeight:700,cursor:"pointer",boxShadow:"0 2px 5px #0002"}); ov.append(rb("+",()=>zoom(W/2,H/2,1.18)),rb("−",()=>zoom(W/2,H/2,1/1.18))); wrap.append(cv,ov); const nums=css(E("div"),{display:"flex",gap:"8px",alignItems:"center"}); function num(t,k,min,max,step=1){let i=css(E("input",{type:"number",min,max,step,value:C[k]}),{width:k=="radius"?"54px":"38px",padding:"4px",borderRadius:"4px",border:"1px solid #bbb",fontSize:"12px"}),l=css(E("label"),{display:"flex",alignItems:"center",gap:"4px",fontSize:"12px",fontWeight:650,color:"#444"});i.onchange=()=>{let v=step==1?parseInt(i.value):parseFloat(i.value);if(Number.isFinite(v))C[k]=v,auto={d:0,r:0},meshKey=""};l.append(t,i);return l} nums.append(num("p","p",2,20),num("q","q",2,20),num("r","r",2,20),num("depth","maxDepth",1,22),num("R","radius",1.5,16,.25)); const modes=css(E("div"),{display:"flex",gap:"7px",alignItems:"center"}),bs=[]; function mb(t,m){let b=css(E("button",{textContent:t}),{padding:"6px 10px",background:"#fff",border:"1px solid #bbb",borderRadius:"5px",fontSize:"12px",fontWeight:650,cursor:"pointer"});b.onclick=()=>{mode=m;upd();setTimeout(adapt,0)};b.dataset.m=m;bs.push(b);return b} modes.append(mb("Surface","surface"),mb("Klein","klein"),mb("Poincaré","poincare"),mb("Half-plane","halfplane")); const stat=css(E("div"),{fontSize:"12px",color:"#333",lineHeight:1.35,minWidth:"290px"}); const checks=css(E("div"),{display:"flex",gap:"12px",alignItems:"center",justifyContent:"flex-end"}); function chk(t,k){let i=E("input",{type:"checkbox",checked:C[k]}),l=css(E("label"),{display:"flex",gap:"5px",alignItems:"center",fontSize:"12px",fontWeight:650,color:"#333",userSelect:"none",whiteSpace:"nowrap"});i.onchange=()=>C[k]=i.checked;l.append(i,t);return l} const reset=css(E("button",{textContent:"Reset",onclick:()=>{Fr.O=[0,0,1];Fr.X=[1,0,0];Fr.Y=[0,1,0];for(const k in D)Object.assign(V[k],D[k]);auto={d:0,r:0};meshKey="";setTimeout(adapt,0)}}),{padding:"5px 9px",background:"#fff",border:"1px solid #bbb",borderRadius:"5px",fontSize:"12px",fontWeight:650,cursor:"pointer"}); checks.append(chk("Dual grid","dual"),chk("Lens guides","guides"),reset); top.append(nums,modes,stat,checks); box.append(top,wrap); upd(); const md=(a,b)=>a[2]*b[2]-a[0]*b[0]-a[1]*b[1], mc=(a,b)=>[a[1]*b[2]-a[2]*b[1],a[2]*b[0]-a[0]*b[2],-(a[0]*b[1]-a[1]*b[0])], ad=(a,b)=>[a[0]+b[0],a[1]+b[1],a[2]+b[2]], su=(a,b)=>[a[0]-b[0],a[1]-b[1],a[2]-b[2]], sm=(a,s)=>[a[0]*s,a[1]*s,a[2]*s], ed=(a,b)=>a[0]*b[0]+a[1]*b[1]+a[2]*b[2], ec=(a,b)=>[a[1]*b[2]-a[2]*b[1],a[2]*b[0]-a[0]*b[2],a[0]*b[1]-a[1]*b[0]], en=a=>{let l=Math.hypot(...a);return l{let q=md(v,v);if(!(q>EPS))return null;let s=1/Math.sqrt(q);if(v[2]*s<0)s=-s;return sm(v,s)}, ns=v=>{let q=md(v,v);return q<-EPS?sm(v,1/Math.sqrt(-q)):null}, rf=(v,n)=>su(v,sm(n,2*md(v,n)/md(n,n))), ac=x=>Math.acosh(Math.max(1,x)), ctr=a=>np(sm(ad(ad(a[0],a[1]),a[2]),1/3)), gp=(a,b,t)=>np([a[0]*(1-t)+b[0]*t,a[1]*(1-t)+b[1]*t,a[2]*(1-t)+b[2]*t]); function opp(v,i){let j=(i+1)%3,k=(i+2)%3,n=ns(mc(v[j],v[k]));return n&&md(v[i],n)<0?sm(n,-1):n} function inc(v){let n=[0,1,2].map(i=>opp(v,i));if(n.some(x=>!x))return ctr(v);let I=np(mc(su(n[0],n[1]),su(n[0],n[2])));if(!I)return ctr(v);if(md(I,n[0])<0)I=sm(I,-1);if(I[2]<0)I=sm(I,-1);return I} function foot(p,n){return np(su(p,sm(n,md(p,n)/md(n,n))))} function lc(v){return[-md(v,Fr.X),-md(v,Fr.Y),md(v,Fr.O)]} function gl(c){return ad(ad(sm(Fr.X,c[0]),sm(Fr.Y,c[1])),sm(Fr.O,c[2]))} function ren(){Fr.O=np(Fr.O)||[0,0,1];Fr.X=ns(su(Fr.X,sm(Fr.O,md(Fr.X,Fr.O))))||[1,0,0];Fr.Y=ns(mc(Fr.O,Fr.X))||[0,1,0]} function boost(a,b){a=Math.max(-.09,Math.min(.09,a));b=Math.max(-.09,Math.min(.09,b));if(Math.abs(a)>1e-12){let O=Fr.O,X=Fr.X,c=Math.cosh(a),s=Math.sinh(a);Fr.O=ad(sm(O,c),sm(X,s));Fr.X=ad(sm(O,s),sm(X,c))}if(Math.abs(b)>1e-12){let O=Fr.O,Y=Fr.Y,c=Math.cosh(b),s=Math.sinh(b);Fr.O=ad(sm(O,c),sm(Y,s));Fr.Y=ad(sm(O,s),sm(Y,c))}ren()} function roll(a){let X=Fr.X,Y=Fr.Y,c=Math.cos(a),s=Math.sin(a);Fr.X=ad(sm(X,c),sm(Y,s));Fr.Y=ad(sm(X,-s),sm(Y,c));ren()} function base(p,q,r){ let A=Math.PI/p,B=Math.PI/q,Cc=Math.PI/r, ca=(Math.cos(B)*Math.cos(Cc)+Math.cos(A))/(Math.sin(B)*Math.sin(Cc)), cb=(Math.cos(A)*Math.cos(Cc)+Math.cos(B))/(Math.sin(A)*Math.sin(Cc)), cc=(Math.cos(A)*Math.cos(B)+Math.cos(Cc))/(Math.sin(A)*Math.sin(B)), sb=Math.sqrt(Math.max(0,cb*cb-1)), z=[0,0,1], a=[sb,0,cb], x=(ca*cb-cc)/sb, y2=ca*ca-x*x-1; return Number.isFinite(x)&&y2>-1e-8?[a,[x,Math.sqrt(Math.max(0,y2)),ca],z]:null } const key=(v,n=6)=>v.map(x=>x.toFixed(n)).join(","), ekey=(a,b)=>{let A=key(a,5),B=key(b,5);return A=1)return{tiles:[],edges:[],error:`Not hyperbolic: 1/p+1/q+1/r=${(1/p+1/q+1/r).toFixed(4)} ≥ 1.`}; let s=base(p,q,r); if(!s)return{tiles:[],edges:[],error:"Could not construct base triangle."}; let T=[],Q=[{v:s,d:0,par:0}],seen=new Set(),h=0; while(hrad+.9)continue; let k=key(c,7); if(seen.has(k))continue; seen.add(k); let sn=[0,1,2].map(i=>opp(it.v,i)),I=inc(it.v); T.push({v:it.v,c,dist,d:it.d,par:it.par,sn,I}); if(it.d>=R||dist>rad)continue; for(let i=0;i<3;i++){let j=(i+1)%3,k=(i+2)%3,n=mc(it.v[j],it.v[k]),w=np(rf(it.v[i],n)); if(!w)continue; let nv=it.v.slice(); nv[i]=w; let nc=ctr(nv); if(nc&&ac(nc[2])<=rad+1.2)Q.push({v:nv,d:it.d+1,par:1-it.par})} } let E=new Map(); for(const t of T)for(let i=0;i<3;i++){let a=t.v[i],b=t.v[(i+1)%3],k=ekey(a,b); if(!E.has(k))E.set(k,{a,b})} return{tiles:T,edges:[...E.values()],truncated:T.length>=MAX} } function getMesh(){let k=JSON.stringify({...cfg(),dual:C.dual}); return k==meshKey?mesh:(meshKey=k,mesh=gen())} function xy(c,m){ let [x,y,z]=c; if(m=="klein")return[x/z,y/z]; if(m=="poincare")return[x/(z+1),y/(z+1)]; if(m=="halfplane"){let d=z-y; return Math.abs(d)[X/Y,(X*X+Y*Y-1)/(2*Y),(X*X+Y*Y+1)/(2*Y)]; function sp(v){ if(mode!="surface"){let c=lc(v),p=xy(c,mode); if(!p)return null; let tr=V[mode],X=W/2+tr.x+tr.s*p[0],Y=H/2+tr.y-tr.s*p[1],B=2e6; return{x:Math.max(-B,Math.min(B,X)),y:Math.max(-B,Math.min(B,Y)),d:c[2]}} let c=lc(v),C0=[0,-4.8,2.3],tar=[0,0,1.25],F=en(su(tar,C0)),R=en(ec(F,[0,0,1])),U=ec(R,F),d=su(c,C0),lx=ed(d,R),ly=ed(d,U),lz=ed(d,F); if(lz<.05)return null; let tr=V.surface,s=tr.s/lz; return{x:W/2+tr.x+lx*s,y:H/2+tr.y-ly*s,d:lz} } function seg(a,b,tol=.75,L=8){ let P=[],pt=t=>{let p=gp(a,b,t); return p&&sp(p)},p0=pt(0),p1=pt(1); if(p0)P.push(p0); function rec(t0,t1,A,B,l){let tm=(t0+t1)/2,M=pt(tm); if(!A||!B||!M){if(l>=L){if(B)P.push(B)}else rec(t0,tm,A,M,l+1),rec(tm,t1,M,B,l+1); return} let mx=(A.x+B.x)/2,my=(A.y+B.y)/2,dev=(M.x-mx)**2+(M.y-my)**2,len=(A.x-B.x)**2+(A.y-B.y)**2; if(l>=L||(dev-m&&a-m&&c2e5?ctx.moveTo(p.x,p.y):ctx.lineTo(p.x,p.y)} if(close)ctx.closePath()} function tri(v){let P=[]; for(let i=0;i<3;i++){let S=seg(v[i],v[(i+1)%3],.65,7); P.push(...(i?S.slice(1):S))} return P} function guides(){ if(!C.guides)return; for(const X of[-5,-3,-2,-1,0,1,2,3,5]){let P=[]; for(let i=0;i<=80;i++){let t=i/80,Y=Math.exp(Math.log(.08)*(1-t)+Math.log(9)*t); P.push(gl(hp(X,Y)))} poly(P,"rgba(40,90,220,.20)",1.1,[4,5])} for(const Y of[.125,.25,.5,1,2,4,8]){let P=[]; for(let i=0;i<=80;i++){let X=-7+14*i/80; P.push(gl(hp(X,Y)))} poly(P,"rgba(0,130,110,.18)",1.1,[2,6])} } function poly(A,sty,w=1,dash=null){ctx.save(); ctx.strokeStyle=sty; ctx.lineWidth=w; if(dash)ctx.setLineDash(dash); let on=false; ctx.beginPath(); for(const v of A){let p=sp(v); if(!p){on=false; continue} if(!on)ctx.moveTo(p.x,p.y),on=true; else ctx.lineTo(p.x,p.y)} ctx.stroke(); ctx.restore()} function boundary(){ ctx.save(); ctx.strokeStyle="#ff3b30"; ctx.lineWidth=2; if(mode=="halfplane"){let tr=V.halfplane,y=H/2+tr.y; ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(W,y); ctx.stroke()} else if(mode=="klein"||mode=="poincare"){let tr=V[mode]; ctx.beginPath(); ctx.arc(W/2+tr.x,H/2+tr.y,tr.s,0,2*Math.PI); ctx.stroke()} else{let r=Math.max(cfg().radius+.8,7.5),sh=Math.sinh(r),ch=Math.cosh(r),P=[]; for(let i=0;i<=360;i++){let t=2*Math.PI*i/360,p=sp(gl([sh*Math.cos(t),sh*Math.sin(t),ch])); if(p)P.push(p)} if(P.length>3)path(P,true),ctx.stroke()} ctx.restore() } function col(n){return n==3?"hsl(44,90%,46%)":n==4?"hsl(200,70%,43%)":n==5?"hsl(130,55%,42%)":"hsl(15,70%,48%)"} function draw(ms){ let T=ms.tiles.map(t=>({t,d:(sp(t.c)||{}).d})).filter(o=>Number.isFinite(o.d)).sort((a,b)=>b.d-a.d).map(o=>o.t); for(const t of T){let P=tri(t.v); if(!vis(P))continue; path(P,true); let a=Math.max(.055,.22-.008*t.d); ctx.fillStyle=t.par?`rgba(70,150,220,${a})`:`rgba(40,95,180,${a*.75})`; ctx.fill()} if(C.dual)for(const t of T){if(!t.I)continue; let cc=[C.r,C.p,C.q]; for(let e=0;e<3;e++){let n=t.sn[(e+2)%3],P=n&&foot(t.I,n); if(!P)continue; let S=seg(t.I,P,.45,6); if(!vis(S))continue; path(S); ctx.strokeStyle=col(cc[e]); ctx.lineWidth=2.2; ctx.stroke()}} else{ctx.save(); ctx.lineCap="round"; ctx.lineWidth=1.15; ctx.strokeStyle="rgba(25,25,25,.38)"; for(const e of ms.edges){let P=seg(e.a,e.b,.55,7); if(vis(P))path(P),ctx.stroke()} ctx.restore()} } function upd(){for(const b of bs){let on=b.dataset.m==mode; b.style.background=on?"#111":"#fff"; b.style.color=on?"#fff":"#111"; b.style.borderColor=on?"#111":"#bbb"}} function zoom(sx,sy,f){let tr=V[mode],ox=sx-W/2,oy=sy-H/2; tr.x=ox-f*(ox-tr.x); tr.y=oy-f*(oy-tr.y); tr.s*=f} function dom(x,y){ if(mode=="klein"||mode=="poincare"){let tr=V[mode],dx=x-(W/2+tr.x),dy=y-(H/2+tr.y); return dx*dx+dy*dy<=.985*tr.s*tr.s} if(mode=="halfplane")return y<=H/2+V.halfplane.y-1; return true } function pip(x,y,P){ let c=false; for(let i=0,j=P.length-1;iy)!=(b.y>y))&&x<(b.x-a.x)*(y-a.y)/(b.y-a.y)+a.x)c=!c } return c } function cov(ms){ let polys=[]; for(const t of ms.tiles){let P=tri(t.v); if(P.length>2&&vis(P,20))polys.push(P)} let gx=28,gy=20,tot=0,hit=0; for(let j=0;j.72)break; auto.d+=2; auto.r+=.8; meshKey=""; k++; } adapting=false } cv.onmousedown=e=>{drag=true; lx=e.clientX; ly=e.clientY; cv.style.cursor="grabbing"; e.preventDefault()}; const mm=e=>{if(!drag)return; let dx=e.clientX-lx,dy=e.clientY-ly; lx=e.clientX; ly=e.clientY; if(e.shiftKey)V[mode].x+=dx,V[mode].y+=dy; else if(e.altKey)roll(dx*.008); else boost(-dx*.0045,dy*.0045)}; const mu=()=>{if(!drag)return; drag=false; cv.style.cursor="grab"; setTimeout(adapt,0)}; window.addEventListener("mousemove",mm); window.addEventListener("mouseup",mu); cv.addEventListener("wheel",e=>{e.preventDefault(); let r=cv.getBoundingClientRect(); zoom(e.clientX-r.left,e.clientY-r.top,Math.exp(-e.deltaY*.001))},{passive:false}); function loop(){ let ms=getMesh(); ctx.clearRect(0,0,W,H); ctx.save(); ctx.beginPath(); ctx.rect(0,0,W,H); ctx.clip(); ctx.fillStyle="#fff"; ctx.fillRect(0,0,W,H); if(ms.error){ctx.fillStyle="#222"; ctx.font="16px -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif"; ctx.fillText(ms.error,28,42); stat.innerHTML=`${N[mode]}
drag frame · Shift-drag pan · Alt-drag roll`} else{ guides(); draw(ms); boundary(); stat.innerHTML=`${N[mode]}
${Fm[mode]}
drag frame · Shift-drag pan · Alt-drag roll
tiles ${ms.tiles.length}, edges ${ms.edges.length}${ms.truncated?" · truncated":""} · adaptive +${auto.d} depth, +${auto.r.toFixed(1)} radius` } ctx.restore(); raf=requestAnimationFrame(loop) } raf=requestAnimationFrame(loop); setTimeout(adapt,0); if(typeof invalidation!="undefined")invalidation.then(()=>{cancelAnimationFrame(raf); window.removeEventListener("mousemove",mm); window.removeEventListener("mouseup",mu)}); return box }32:[] 2f:{"title":"Hyperbolic Plane Models","cells":[{"id":0,"value":"# Hyperbolic Plane Models\n\nThis notebook visualizes how different models of hyperbolic plane are actually just different **perspectives** (projections) of the same object: the upper sheet of a hyperboloid (${tex`z^2 - x^2 - y^2 = 1`}) in 3D Minkowski space.\n\n**Interactive Controls:**\n1. **Model**: Switch between 3D view, Klein, Poincaré, and half-plane.\n2. **Tessellation**: Change the ${tex`(p, q, r)`} values to generate different triangle groups (e.g., 2-3-7, 5-4-2).\n3. **Rotation**: Rotate the 3D Hyperboloid to see how the projection changes.","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}