C₂ in algebra · Closure in geometry
Simulator
id
2604245382358
title
C₂ in algebra · Closure in geometry
date
04/24/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>C₂ in algebra. Closure in geometry.</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0f;color:#c8b875;font-family:'JetBrains Mono',monospace;overflow:hidden;height:100vh}
#header{position:absolute;top:10px;left:0;width:100%;text-align:center;z-index:20}
#title{font-size:10px;font-weight:600;letter-spacing:2px;color:#c8b875}
#formula{font-size:13px;color:#c8b875;margin-top:3px;letter-spacing:1px}
#controls{position:absolute;top:48px;left:0;width:100%;display:flex;justify-content:center;gap:6px;z-index:20}
.btn{background:rgba(200,184,117,0.08);border:1px solid rgba(200,184,117,0.25);color:#c8b875;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:1px;padding:5px 9px;cursor:pointer;text-transform:uppercase}
.btn:hover{background:rgba(200,184,117,0.18)}
#container{display:flex;width:100%;height:100vh;padding-top:68px}
.panel{flex:1;position:relative;border-right:1px solid rgba(200,184,117,0.08);overflow:hidden}
.panel:last-child{border-right:none}
.panel:nth-child(2){border-left:1px solid rgba(200,184,117,0.2);border-right:1px solid rgba(200,184,117,0.2)}
canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important}
.info{position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:10;pointer-events:none;padding:6px;background:rgba(10,10,15,0.85)}
.info .name{font-size:14px;font-weight:600;color:#c8b875}
.info .ratio{font-size:11px;margin-top:2px}
.info .ratio.good{color:#44cc44}
.info .ratio.bad{color:#cc4444}
.info .depth{font-size:9px;color:#8a7a40;margin-top:2px}
.copy{position:absolute;bottom:2px;right:6px;font-size:8px;color:#222;z-index:20}
</style>
</head>
<body>
<div id="header">
<div id="title">C₂ in algebra · Closure in geometry</div>
<div id="formula">λ² = λ + 1</div>
</div>
<div id="controls">
<button class="btn" id="cutBtn" onclick="startAnim()">▶ FALL IN</button>
<button class="btn" onclick="resetAll()">↺</button>
</div>
<div id="container">
<div class="panel">
<canvas id="cv0"></canvas>
<div class="info"><div class="name">λ = √2</div><div class="ratio bad" id="r0">1.4142</div><div class="depth" id="d0">depth 0</div></div>
</div>
<div class="panel">
<canvas id="cv1"></canvas>
<div class="info"><div class="name">λ = φ</div><div class="ratio good" id="r1">1.6180</div><div class="depth" id="d1">depth 0</div></div>
</div>
<div class="panel">
<canvas id="cv2"></canvas>
<div class="info"><div class="name">λ = π</div><div class="ratio bad" id="r2">3.1416</div><div class="depth" id="d2">depth 0</div></div>
</div>
</div>
<div class="copy">© 2026 Captain Cookie Face Universe</div>
<script>
var PHI = (1 + Math.sqrt(5)) / 2;
var SQRT2 = Math.sqrt(2);
var PI = Math.PI;
var KNOWN_CONSTANTS = [
PHI, SQRT2, 1+SQRT2, PI, Math.E,
1,2,3,4,5,6,7,8,9,10,15,292,
1/PHI, Math.sqrt(3), Math.sqrt(5)
];
var LAMBDAS = [SQRT2, PHI, PI];
var COLORS = ['#ff3344', '#c8b875', '#3388ff'];
var canvases = [document.getElementById('cv0'), document.getElementById('cv1'), document.getElementById('cv2')];
var ctxs = canvases.map(function(c){ return c.getContext('2d'); });
var rEls = [document.getElementById('r0'), document.getElementById('r1'), document.getElementById('r2')];
var dEls = [document.getElementById('d0'), document.getElementById('d1'), document.getElementById('d2')];
var animId = null, running = false, depth = 0;
var ratioHistory = [[], [], []];
function initStates() {
ratioHistory = LAMBDAS.map(function(l){ return [l >= 1 ? l : 1/l]; });
}
function resize() {
canvases.forEach(function(c){
var p = c.parentElement;
c.width = p.clientWidth * 2;
c.height = p.clientHeight * 2;
});
}
// ONE function. ALL inputs. Same rules.
// Gauss map: r → 1/(r - floor(r))
// Then error correction against ALL known constants, same threshold.
function cutRatio(r) {
if (r < 1) r = 1 / r;
var intPart = Math.floor(r + 1e-12);
var frac = r - intPart;
if (frac < 1e-10) return r;
var result = 1 / frac;
for (var i = 0; i < KNOWN_CONSTANTS.length; i++) {
if (Math.abs(result - KNOWN_CONSTANTS[i]) < 1e-10) {
result = KNOWN_CONSTANTS[i];
break;
}
}
return result;
}
// Draw rectangle with floor(r) squares cut, matching the Gauss map computation
function drawRect(ctx, rx, ry, rw, rh, ratio, color, levelsLeft) {
if (rw < 2 || rh < 2 || levelsLeft < 0) return;
var r = ratio >= 1 ? ratio : 1/ratio;
// Draw outer rectangle
ctx.strokeStyle = color;
ctx.globalAlpha = 1;
ctx.lineWidth = 2;
ctx.strokeRect(rx, ry, rw, rh);
if (levelsLeft === 0) {
ctx.fillStyle = color;
ctx.globalAlpha = 0.12;
ctx.fillRect(rx, ry, rw, rh);
ctx.globalAlpha = 1;
return;
}
// Cut floor(r) squares — matching the Gauss map computation
var numSquares = Math.floor(r + 1e-12);
var remX = rx, remY = ry, remW = rw, remH = rh;
for (var s = 0; s < numSquares; s++) {
if (remW < 2 || remH < 2) break;
var sqX, sqY, sqW, sqH;
if (remW >= remH) {
var sq = remH;
sqX = remX; sqY = remY; sqW = sq; sqH = sq;
// Fill square
ctx.fillStyle = color;
ctx.globalAlpha = 0.03 + (s % 2) * 0.02;
ctx.fillRect(sqX, sqY, sqW, sqH);
// Square outline
ctx.strokeStyle = color;
ctx.globalAlpha = 0.25;
ctx.lineWidth = 1;
ctx.strokeRect(sqX, sqY, sqW, sqH);
// Diagonal
ctx.beginPath();
ctx.moveTo(sqX, sqY);
ctx.lineTo(sqX + sqW, sqY + sqH);
ctx.stroke();
ctx.globalAlpha = 1;
// Advance remainder
remX = remX + sq;
remW = remW - sq;
} else {
var sq = remW;
sqX = remX; sqY = remY; sqW = sq; sqH = sq;
ctx.fillStyle = color;
ctx.globalAlpha = 0.03 + (s % 2) * 0.02;
ctx.fillRect(sqX, sqY, sqW, sqH);
ctx.strokeStyle = color;
ctx.globalAlpha = 0.25;
ctx.lineWidth = 1;
ctx.strokeRect(sqX, sqY, sqW, sqH);
ctx.beginPath();
ctx.moveTo(sqX, sqY);
ctx.lineTo(sqX + sqW, sqY + sqH);
ctx.stroke();
ctx.globalAlpha = 1;
remY = remY + sq;
remH = remH - sq;
}
}
// Highlight remainder
if (remW >= 2 && remH >= 2) {
ctx.strokeStyle = '#ffffff';
ctx.globalAlpha = 0.25;
ctx.lineWidth = 1.5;
ctx.strokeRect(remX, remY, remW, remH);
ctx.globalAlpha = 1;
// Recurse into remainder
var nextRatio = cutRatio(r);
var nr = nextRatio >= 1 ? nextRatio : 1/nextRatio;
// Fit nr ratio into remainder
var innerW, innerH;
if (remW >= remH) {
// Remainder is landscape
innerW = remH * nr;
innerH = remH;
if (innerW > remW) { innerW = remW; innerH = remW / nr; }
} else {
// Remainder is portrait — flip: height = width * nr
innerH = remW * nr;
innerW = remW;
if (innerH > remH) { innerH = remH; innerW = remH / nr; }
}
var innerX = remX + (remW - innerW) / 2;
var innerY = remY + (remH - innerH) / 2;
drawRect(ctx, innerX, innerY, innerW, innerH, nextRatio, color, levelsLeft - 1);
}
}
function drawPanel(idx) {
var ctx = ctxs[idx];
var cv = canvases[idx];
var w = cv.width, h = cv.height;
var color = COLORS[idx];
var currentRatio = ratioHistory[idx][ratioHistory[idx].length - 1];
ctx.fillStyle = '#0a0a0f';
ctx.fillRect(0, 0, w, h);
var pad = w * 0.05;
var maxW = w - 2*pad, maxH = h - 2*pad;
var r = currentRatio >= 1 ? currentRatio : 1/currentRatio;
var rw, rh;
// Fit rectangle with ratio r into canvas
if (r >= 1) {
rw = maxW; rh = maxW / r;
if (rh > maxH) { rh = maxH; rw = maxH * r; }
} else {
rh = maxH; rw = maxH * r;
if (rw > maxW) { rw = maxW; rh = maxW / r; }
}
var rx = (w-rw)/2, ry = (h-rh)/2;
drawRect(ctx, rx, ry, rw, rh, currentRatio, color, 2);
// Ratio text
ctx.fillStyle = color;
ctx.globalAlpha = 0.35;
ctx.font = (w*0.035)+'px JetBrains Mono';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(r.toFixed(6), w/2, h*0.12);
ctx.globalAlpha = 1;
// Check if ratio returns to original
var original = LAMBDAS[idx] >= 1 ? LAMBDAS[idx] : 1/LAMBDAS[idx];
var matchesOriginal = Math.abs(r - original) < 0.001;
if (matchesOriginal) {
rEls[idx].textContent = r.toFixed(6) + ' = λ · returns to itself';
rEls[idx].className = 'ratio good';
} else {
rEls[idx].textContent = r.toFixed(4) + ' ≠ λ · drifted';
rEls[idx].className = 'ratio bad';
}
dEls[idx].textContent = 'depth ' + depth;
}
function drawAll() { for (var i=0;i<3;i++) drawPanel(i); }
function startAnim() {
if (running) {
running=false;
if (animId){clearTimeout(animId);animId=null;}
document.getElementById('cutBtn').textContent='▶ FALL IN';
return;
}
running=true;
document.getElementById('cutBtn').textContent='⏸ PAUSE';
doStep();
}
function doStep() {
if (!running) return;
for (var i=0;i<3;i++) {
var current = ratioHistory[i][ratioHistory[i].length-1];
var next = cutRatio(current);
ratioHistory[i].push(next);
}
depth++;
drawAll();
animId = setTimeout(doStep, 500);
}
function resetAll() {
running=false;
if (animId){clearTimeout(animId);animId=null;}
depth=0;
initStates();
document.getElementById('cutBtn').textContent='▶ FALL IN';
rEls[0].textContent='1.4142'; rEls[0].className='ratio bad';
rEls[1].textContent='1.6180'; rEls[1].className='ratio good';
rEls[2].textContent='3.1416'; rEls[2].className='ratio bad';
dEls[0].textContent='depth 0'; dEls[1].textContent='depth 0'; dEls[2].textContent='depth 0';
drawAll();
}
initStates(); resize(); drawAll();
window.addEventListener('resize', function(){ resize(); drawAll(); });
</script>
</body>
</html>tweet_url
SHA-256