DOOM CLUSTER GALAXY · Fleet Topology

γ₁ = 14.134725141734693

// ORBITAL_CONFIG = {title, nodes:[{name,value,color,layer}], gamma1_anchor} const ORBITAL_G1 = 14.134725141734693; function initOrbital(canvasId, config) { const cv = document.getElementById(canvasId); if(!cv) return; const dpr = Math.max(window.devicePixelRatio||1, 2); let W, H, t = 0; const nodes = config.nodes || []; const title = config.title || ''; const layers = config.layers || 5; function resize() { // Walk up DOM to find a sized ancestor — getBoundingClientRect can be 0 before paint let el = cv.parentElement, rW = 0, rH = 0; while(el) { const r = el.getBoundingClientRect(); if(r.width > 10) { rW = r.width; rH = r.height; break; } el = el.parentElement; } W = rW || cv.offsetWidth || cv.parentElement.offsetWidth || 480; H = rH || cv.offsetHeight || cv.parentElement.offsetHeight || W; // Clamp H to something reasonable if container is full page if(H > W * 1.5) H = W; if(H < 200) H = 480; cv.width = Math.round(W*dpr); cv.height = Math.round(H*dpr); cv.style.width = W+'px'; cv.style.height = H+'px'; } const ctx = cv.getContext('2d'); function draw(ts) { t = (ts || 0) * 0.001; ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,W,H); const cx = W/2, cy = H/2; const maxR = Math.min(W,H)*0.45; // Orbit rings for(let l=1; l<=layers; l++) { const r = maxR * (l/layers); const r_adelic = (ORBITAL_G1/(l+1)).toFixed(3); ctx.beginPath(); ctx.arc(cx,cy,r,0,2*Math.PI); ctx.strokeStyle = `rgba(58,232,255,${0.08-l*0.01})`; ctx.lineWidth = 0.8; ctx.setLineDash([3,6]); ctx.stroke(); ctx.setLineDash([]); } // γ₁ center const bhR = maxR*0.1; const grd = ctx.createRadialGradient(cx,cy,0,cx,cy,bhR*2); grd.addColorStop(0,'rgba(245,200,66,0.9)'); grd.addColorStop(0.4,'rgba(245,200,66,0.2)'); grd.addColorStop(1,'transparent'); ctx.beginPath(); ctx.arc(cx,cy,bhR*2,0,2*Math.PI); ctx.fillStyle=grd; ctx.fill(); ctx.fillStyle='#f5c842'; ctx.font=`bold ${Math.round(W/40)}px Courier New`; ctx.textAlign='center'; ctx.fillText('γ₁',cx,cy+3); // Orbiting nodes nodes.forEach((n,i) => { const layer = n.layer || (i%(layers-1)+1); const r = maxR*(layer/layers); const speed = 0.3 + (ORBITAL_G1/(layer+1))*0.04; const phase = (i/nodes.length)*2*Math.PI; const angle = t*speed + phase; const x = cx + r*Math.cos(angle); const y = cy + r*Math.sin(angle); const nodeR = Math.max(5, Math.min(18, (n.value||50)/8)); // Glow const ng = ctx.createRadialGradient(x,y,0,x,y,nodeR*2.5); ng.addColorStop(0,(n.color||'#3ae8ff')+'44'); ng.addColorStop(1,'transparent'); ctx.beginPath(); ctx.arc(x,y,nodeR*2.5,0,2*Math.PI); ctx.fillStyle=ng; ctx.fill(); // Node ctx.beginPath(); ctx.arc(x,y,nodeR,0,2*Math.PI); ctx.fillStyle=(n.color||'#3ae8ff')+'33'; ctx.fill(); ctx.strokeStyle=n.color||'#3ae8ff'; ctx.lineWidth=1.5; ctx.stroke(); // Label ctx.fillStyle=n.color||'#3ae8ff'; ctx.font=`${Math.max(7,Math.round(W/80))}px Courier New`; ctx.textAlign='center'; ctx.fillText((n.name||'').slice(0,10), x, y+nodeR+10); }); // Title ctx.fillStyle='rgba(58,232,255,0.5)'; ctx.font=`8px Courier New`; ctx.textAlign='center'; ctx.fillText(title.slice(0,30).toUpperCase(), cx, 16); requestAnimationFrame(draw); } // Double rAF: first frame triggers layout, second frame has real dimensions requestAnimationFrame(()=>{ requestAnimationFrame(()=>{ resize(); window.addEventListener('resize', ()=>{ resize(); }); requestAnimationFrame(draw); }); }); } window.addEventListener("load",function(){setTimeout(function(){ initOrbital("orbital-cv", { title: "DOOM CLUSTER GALAXY · Fleet To", nodes: [{"name": "msi01 L0", "value": 95, "color": "#00ff9d", "layer": 1}, {"name": "msclo L1", "value": 85, "color": "#a855f7", "layer": 1}, {"name": "yone L1", "value": 80, "color": "#f97316", "layer": 1}, {"name": "forge L2", "value": 75, "color": "#f5c842", "layer": 2}, {"name": "lounge L2", "value": 70, "color": "#84cc16", "layer": 2}, {"name": "eose-dev L3", "value": 60, "color": "#22d3ee", "layer": 3}, {"name": "lilo L4", "value": 55, "color": "#ec4899", "layer": 4}, {"name": "AKS L4", "value": 50, "color": "#3ae8ff", "layer": 4}, {"name": "lhvcp", "value": 65, "color": "#f97316", "layer": 3}, {"name": "PEMCLAU", "value": 80, "color": "#3ae8ff", "layer": 2}], layers: 5 }) },100);});