The Golden Point on ℍ¹ — A Will Hunting Moment
Simulator
id
2604115244397
safecreative_url
https://www.safecreative.org/work/2604115244397-the-golden-point-on-h1-a-will-hunting-moment
title
The Golden Point on ℍ¹ — A Will Hunting Moment
date
04/11/2026
text
Show source code
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>φ — The Golden Point on ℍ¹ ⊂ ℝ^(1,1)</title>
<style>
:root{--bg:#e8e8f5;--ink:#1a1a1a;--light:#e8b800;--gold:#c9941a;--hyp:#2a4d8f;--ds:#8f2a2a}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:Georgia,serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px}
h1{font-size:clamp(18px,4vw,30px);font-weight:normal;text-align:center}
.sub{font-size:clamp(12px,2.2vw,15px);font-style:italic;margin:4px 0 14px;opacity:.75;text-align:center}
#stage{width:100%;max-width:640px;aspect-ratio:1/1;border:1px solid #bbb;touch-action:none}
.readout{margin-top:14px;font-size:clamp(12px,2.2vw,15px);text-align:center;line-height:1.7;max-width:640px}
.row{margin:3px 0}.k{font-weight:bold}
.controls{margin-top:14px;width:100%;max-width:640px;display:flex;align-items:center;gap:10px;font-size:14px}
input[type=range]{flex:1}
.legend{margin-top:10px;font-size:12px;max-width:640px;text-align:center;line-height:1.6;opacity:.8}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:3px}
.foot{margin-top:18px;font-size:11px;opacity:.6}
button{background:var(--ink);color:var(--bg);border:none;padding:6px 12px;font-family:inherit;font-size:13px;cursor:pointer;border-radius:3px}
button:hover{background:var(--gold)}
</style></head><body>
<h1>φ — The Golden Point on ℍ¹ ⊂ ℝ<sup>(1,1)</sup></h1>
<div class="sub">ℍ¹ := {(r,t) : t² − r² = 1, t > 0} · (√x, x) ∈ ℍ¹ ⇔ x² − x = 1 ⇔ x = φ</div>
<canvas id="stage" width="800" height="800"></canvas>
<div class="controls">
<span>x =</span>
<input type="range" id="slider" min="0" max="2.5" step="0.0001">
<span id="xval">—</span>
<button id="snap">snap to φ</button>
</div>
<div class="readout">
<div class="row"><span class="k">Q(√x, x) = x² − x =</span> <span id="qval">1.000</span></div>
<div class="row"><span class="k">rapidity η = artanh(r/t) =</span> <span id="rapval">—</span></div>
<div class="row"><span class="k">r/t =</span> <span id="rtval">—</span> <span style="opacity:.6">(at φ: 1/√φ)</span></div>
<div class="row" id="status">◆ on ℍ¹ — the golden point</div>
</div>
<div class="legend">
<span class="dot" style="background:#2a4d8f"></span> ℍ¹: t²−r²=1, t>0 ·
<span class="dot" style="background:#e8b800"></span> null lines t=±r ·
<span class="dot" style="background:#8f2a2a"></span> dS¹: r²−t²=1 ·
<span class="dot" style="background:#1a1a1a"></span> parabola (√x, x)
</div>
<div class="foot">© 2026 Captain Cookie Face Universe</div>
<script>
(()=>{
const canvas=document.getElementById('stage'),ctx=canvas.getContext('2d');
const slider=document.getElementById('slider'),xval=document.getElementById('xval');
const qval=document.getElementById('qval'),rapval=document.getElementById('rapval');
const rtval=document.getElementById('rtval'),status=document.getElementById('status');
const snap=document.getElementById('snap');
const PHI=(1+Math.sqrt(5))/2;
slider.value=PHI;
function resize(){const r=canvas.getBoundingClientRect(),d=devicePixelRatio||1;
canvas.width=r.width*d;canvas.height=r.height*d;ctx.setTransform(d,0,0,d,0,0);draw();}
const RM=2.2,TM=2.2;
function w2s(r,t){const w=canvas.clientWidth,h=canvas.clientHeight;
return[((r+RM)/(2*RM))*w,h-((t+TM)/(2*TM))*h];}
function axes(){const w=canvas.clientWidth,h=canvas.clientHeight;
ctx.strokeStyle='rgba(0,0,0,0.2)';ctx.lineWidth=1;
for(let i=-2;i<=2;i++){const[x]=w2s(i,0);ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,h);ctx.stroke();
const[,y]=w2s(0,i);ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(w,y);ctx.stroke();}
ctx.strokeStyle='rgba(0,0,0,0.55)';ctx.lineWidth=1.5;
const[,y0]=w2s(0,0),[x0]=w2s(0,0);
ctx.beginPath();ctx.moveTo(0,y0);ctx.lineTo(w,y0);ctx.stroke();
ctx.beginPath();ctx.moveTo(x0,0);ctx.lineTo(x0,h);ctx.stroke();
ctx.fillStyle='rgba(0,0,0,0.6)';ctx.font='13px Georgia';
ctx.fillText('r',w-14,y0-6);ctx.fillText('t',x0+6,14);}
function curve(fn,ra,col,lw=2.5,dash=[]){ctx.strokeStyle=col;ctx.lineWidth=lw;ctx.setLineDash(dash);
ctx.beginPath();let first=true;const N=400;
for(let i=0;i<=N;i++){const u=ra[0]+(ra[1]-ra[0])*i/N,p=fn(u);if(!p){first=true;continue;}
const[x,y]=w2s(p[0],p[1]);if(first){ctx.moveTo(x,y);first=false;}else ctx.lineTo(x,y);}
ctx.stroke();ctx.setLineDash([]);}
function dot(r,t,col,rad=7,lbl=''){const[x,y]=w2s(r,t);
ctx.fillStyle=col;ctx.beginPath();ctx.arc(x,y,rad,0,Math.PI*2);ctx.fill();
ctx.strokeStyle='rgba(0,0,0,0.8)';ctx.lineWidth=1.5;ctx.stroke();
if(lbl){ctx.fillStyle='rgba(0,0,0,0.85)';ctx.font='italic 14px Georgia';ctx.fillText(lbl,x+11,y-9);}}
function draw(){const w=canvas.clientWidth,h=canvas.clientHeight;ctx.clearRect(0,0,w,h);axes();
const x=parseFloat(slider.value);
// dS¹ (spacelike branches): r²−t²=1
curve(t=>[Math.sqrt(1+t*t),t],[-2.2,2.2],'#8f2a2a',2);
curve(t=>[-Math.sqrt(1+t*t),t],[-2.2,2.2],'#8f2a2a',2);
// null cone
ctx.strokeStyle='#d4a017';ctx.lineWidth=2;ctx.setLineDash([6,4]);
ctx.beginPath();let[a,b]=w2s(-2.2,-2.2),[c,d]=w2s(2.2,2.2);ctx.moveTo(a,b);ctx.lineTo(c,d);
[a,b]=w2s(-2.2,2.2);[c,d]=w2s(2.2,-2.2);ctx.moveTo(a,b);ctx.lineTo(c,d);ctx.stroke();ctx.setLineDash([]);
// ℍ¹: t²−r²=1, t>0 (upper sheet solid; lower sheet dashed for context)
curve(r=>[r,Math.sqrt(1+r*r)],[-2.2,2.2],'#2a4d8f',3);
curve(r=>[r,-Math.sqrt(1+r*r)],[-2.2,2.2],'#2a4d8f',3,[4,4]);
// parabola (√u, u)
curve(u=>u>=0?[Math.sqrt(u),u]:null,[0,2.5],'#1a1a1a',3);
const r=Math.sqrt(Math.max(0,x)),t=x,Q=t*t-r*r;
// target ring at φ
const[xp,yp]=w2s(Math.sqrt(PHI),PHI);
ctx.strokeStyle='rgba(201,148,26,0.5)';ctx.lineWidth=1;ctx.setLineDash([3,3]);
ctx.beginPath();ctx.arc(xp,yp,14,0,Math.PI*2);ctx.stroke();ctx.setLineDash([]);
dot(1,1,'#e8b800',6,'(1,1) light');
dot(Math.sqrt(PHI),PHI,'#c9941a',8,'(√φ, φ)');
dot(r,t,'#000',6);
ctx.strokeStyle='rgba(0,0,0,0.35)';ctx.lineWidth=1;
const[ox,oy]=w2s(0,0),[mx,my]=w2s(r,t);
ctx.beginPath();ctx.moveTo(ox,oy);ctx.lineTo(mx,my);ctx.stroke();
xval.textContent=x.toFixed(4);qval.textContent=Q.toFixed(4);
// rapidity: only defined inside timelike region (|r|<|t|, t>0)
if(t>0 && Math.abs(r)<t){
const eta=Math.atanh(r/t);
rapval.textContent=eta.toFixed(4);
rtval.textContent=(r/t).toFixed(4);
} else {rapval.textContent='— (not timelike)';rtval.textContent=(t!==0?(r/t).toFixed(4):'∞');}
let msg;
if(Math.abs(x-PHI)<0.002){msg='◆ golden point (√φ, φ) — on ℍ¹, r/t = 1/√φ ≈ 0.7862';status.style.color='#c9941a';}
else if(Math.abs(Q-1)<0.01){msg='◆ on ℍ¹ (Q=1)';status.style.color='#c9941a';}
else if(Math.abs(Q)<0.01){msg='☀ on a null line — light';status.style.color='#d4a017';}
else if(Q>0){msg='↑ timelike, Q = '+Q.toFixed(3);status.style.color='#2a4d8f';}
else {msg='↓ spacelike, Q = '+Q.toFixed(3);status.style.color='#8f2a2a';}
status.textContent=msg;}
slider.addEventListener('input',draw);
snap.addEventListener('click',()=>{slider.value=PHI;draw();});
addEventListener('resize',resize);resize();
})();
</script></body></html>tweet_url
SHA-256