SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/downloads/9.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SIMON • Energy Orb</title>
<style>
  :root{
    --bg:#070b16; --ink:#eaf2ff; --edge:rgba(255,255,255,.22);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background:
      radial-gradient(120% 80% at 50% -10%, #152a61 0%, #0a1226 45%, #070b16 70%, #030711 100%);
    color:var(--ink); font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto;
    overflow:hidden;
  }
  .wrap{position:relative; height:100vh; width:100vw}
  canvas{display:block; width:100%; height:100%}

.hud{
    position:absolute; inset:auto 0 0 0; padding:10px 12px 14px;
    background:linear-gradient(to top, rgba(5,10,20,.65), rgba(5,10,20,0));
    pointer-events:none;
  }
  .row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
  .chip{
    border:1px solid var(--edge); padding:6px 10px; border-radius:999px;
    backdrop-filter: blur(6px); color:#cfe4ff; font-weight:600; letter-spacing:.02em;
  }
  .meter{
    --pct: 0.0;
    position:relative; flex:1 1 360px; height:14px; border-radius:999px; overflow:hidden;
    border:1px solid var(--edge); background:rgba(255,255,255,.06);
    box-shadow: inset 0 0 20px rgba(102,204,255,.18);
  }
  .meter > i{
    position:absolute; inset:0; width:calc(var(--pct) * 1%); display:block;
    background:linear-gradient(90deg, rgba(90,190,255,.0) 0%, rgba(90,190,255,.65) 40%, rgba(130,160,255,.95) 100%);
    box-shadow: 0 0 24px rgba(90,190,255,.65), 0 0 60px rgba(90,190,255,.35);
  }
  .readout{min-width:180px; text-align:right; opacity:.9}

.title{
    position:absolute; inset:18px 18px auto auto; text-align:right;
    font-weight:900; letter-spacing:.12em; font-size:clamp(12px,2.2vw,15px);
    color:#b9c7ff; text-shadow:0 0 8px rgba(91,125,255,.5);
  }
  .footer{
    position:absolute; left:18px; bottom:12px; font-size:12px; opacity:.7; letter-spacing:.06em
  }
  .controls{
    position:absolute; top:12px; left:12px;
    background:rgba(5,10,20,.72); border:1px solid var(--edge);
    border-radius:12px; padding:10px; display:grid; gap:6px; width:220px;
    color:#cfe4ff; font-size:12px;
  }
  .controls label{display:flex; align-items:center; justify-content:space-between; gap:8px}
  .controls input[type="range"]{width:140px}
</style>
</head>
<body>
  <div class="wrap">
    <canvas id="viz" aria-label="SIMON energy orb"></canvas>

<div class="title">
      SIMON • ENERGY ORB<br>
      <span style="font-weight:600; opacity:.75">Pulse → ΔVolume → Energy</span>
    </div>

<div class="hud">
      <div class="row" id="stats">
        <span class="chip">Speed ω<span id="omega">1.00</span>x</span>
        <span class="chip">Pulse<span id="pulse">0.28</span>×</span>
        <div class="meter" id="meter"><i></i></div>
        <div class="readout" id="readout">Energy: 0.00 kJ (sim)</div>
      </div>
    </div>

<div class="controls" aria-label="Orb controls">
      <label>PULSE <input id="pulseAmp" type="range" min="0.05" max="0.65" step="0.01" value="0.28"></label>
      <label>SPEED <input id="speed" type="range" min="0.2" max="3.0" step="0.05" value="1.0"></label>
      <label>RADIUS <input id="radius" type="range" min="80" max="260" step="1" value="145"></label>
      <label>GLOW <input id="glow" type="range" min="6" max="44" step="1" value="24"></label>
    </div>

<div class="footer">© 2025 gaylordsinclair.com ™</div>
  </div>

// Controls
  const pulseAmpUI = document.getElementById('pulseAmp');
  const speedUI    = document.getElementById('speed');
  const radiusUI   = document.getElementById('radius');
  const glowUI     = document.getElementById('glow');

const omegaEl = document.getElementById('omega');
  const pulseEl = document.getElementById('pulse');
  const meter   = document.getElementById('meter');
  const readout = document.getElementById('readout');

const params = {
    baseR: +radiusUI.value,    // base radius of the orb
    pulseAmp: +pulseAmpUI.value, // relative amp (±)
    speed: +speedUI.value,     // pulse speed
    glow: +glowUI.value,       // ring glow
    energyScale: 0.00022,      // ΔV→kJ (sim)
    swirlLayers: 160,          // radial paint passes for rainbow swirl
  };

function fit(){
    const dpr = Math.max(1, Math.min(2, window.devicePixelRatio||1));
    canvas.width = Math.floor(canvas.clientWidth * dpr);
    canvas.height = Math.floor(canvas.clientHeight * dpr);
    ctx.setTransform(dpr,0,0,dpr,0,0);
  }
  addEventListener('resize', fit, {passive:true}); fit();

// Star dust
  function stars(cx, cy){
    ctx.save(); ctx.translate(cx,cy); ctx.globalAlpha=0.12;
    for(let i=0;i<90;i++){
      const a = i*61.803 % (Math.PI*2);
      const r = 340 + (i*13)%480;
      const x = Math.cos(a)*r, y = Math.sin(a)*r;
      ctx.beginPath(); ctx.arc(x,y, i%7===0?1.4:0.7, 0, Math.PI*2);
      ctx.fillStyle = i%7===0? "#9ad1ff" : "#6aa8ff"; ctx.fill();
    }
    ctx.restore();
  }

let t = 0, last = performance.now();
  let prevR = params.baseR*(1 + params.pulseAmp*Math.sin(0));
  let smoothedE = 0;

function draw(){
    const now = performance.now();
    const dt = Math.max(0.001, (now-last)/1000);
    last = now; t += dt;

// Pull live controls
    params.pulseAmp = +pulseAmpUI.value;
    params.speed    = +speedUI.value;
    params.baseR    = +radiusUI.value;
    params.glow     = +glowUI.value;

// Pulse
    const phase = t*params.speed;
    const s = Math.sin(phase);
    const rOuter = params.baseR * (1 + params.pulseAmp * s);

// Energy model: |dV/dt| for V = 4/3 π r^3
    const drdt = (rOuter - prevR) / dt; prevR = rOuter;
    const dVdt = 4 * Math.PI * rOuter*rOuter * drdt;
    const eInst = Math.abs(dVdt) * params.energyScale;
    smoothedE = smoothedE*0.85 + eInst*0.15;

// Canvas prep
    const W = canvas.clientWidth, H = canvas.clientHeight;
    const cx = W/2, cy = H/2;
    ctx.clearRect(0,0,W,H);

// Background stars
    stars(cx,cy);

// Neon ring around orb
    const ringGrad = ctx.createRadialGradient(cx,cy,rOuter*0.92, cx,cy, rOuter*1.07);
    ringGrad.addColorStop(0, `rgba(120,170,255,0.0)`);
    ringGrad.addColorStop(0.5, `rgba(120,170,255,0.0)`);
    ringGrad.addColorStop(1, `rgba(140,170,255,0.35)`);
    ctx.strokeStyle = ringGrad;
    ctx.lineWidth = 2.0;
    ctx.shadowColor = "rgba(120,170,255,0.95)";
    ctx.shadowBlur = params.glow + 10*Math.abs(Math.cos(phase));
    ctx.beginPath(); ctx.arc(cx,cy,rOuter*1.02,0,Math.PI*2); ctx.stroke();
    ctx.shadowBlur = 0;

// Orb core: rainbow swirl (procedural)
    // Paint concentric bands with hue rotation and slight angle distortion to mimic the image.
    const layers = params.swirlLayers;
    for(let i=0;i<layers;i++){
      const u = i/(layers-1);                     // 0..1
      const ri = rOuter*(0.08 + 0.92*u);          // inner→outer
      const th = phase*0.9 + u*6.0 + Math.sin(phase*0.5+u*8.0)*0.3; // swirl angle
      const x = cx + Math.cos(th)*ri*0.02;
      const y = cy + Math.sin(th)*ri*0.02;
      const hue = (u*360 + phase*30) % 360;       // rainbow ramp
      const alpha = 0.38*(1.0 - Math.pow(u,1.2)); // fade to center

// Soft inner glow
    const core = ctx.createRadialGradient(cx,cy, rOuter*0.0, cx,cy, rOuter*0.9);
    core.addColorStop(0, 'rgba(255,255,255,0.20)');
    core.addColorStop(1, 'rgba(255,255,255,0.00)');
    ctx.globalCompositeOperation = 'lighter';
    ctx.fillStyle = core; ctx.beginPath(); ctx.arc(cx,cy,rOuter*0.9,0,Math.PI*2); ctx.fill();
    ctx.globalCompositeOperation = 'source-over';

// SIMON text with neon outline
    ctx.save();
    const fontSize = Math.max(28, rOuter*0.35);
    ctx.font = `900 ${fontSize}px Inter, Segoe UI, system-ui, -apple-system, sans-serif`;
    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';

// outer glow
    ctx.shadowColor = 'rgba(255,255,255,0.9)'; ctx.shadowBlur = params.glow;
    ctx.fillStyle = 'rgba(255,255,255,0.96)';
    ctx.fillText('SIMON', cx, cy);

// subtle inner stroke for crisp edge
    ctx.shadowBlur = 0;
    ctx.lineWidth = 2; ctx.strokeStyle = 'rgba(180,220,255,0.40)';
    ctx.strokeText('SIMON', cx, cy);
    ctx.restore();

// Energy HUD
    const pct = Math.max(0, Math.min(100, smoothedE*1000));
    meter.style.setProperty('--pct', pct.toFixed(1));
    readout.textContent = `Energy: ${(smoothedE*1000).toFixed(2)} kJ (sim)`;
    omegaEl.textContent = params.speed.toFixed(2);
    pulseEl.textContent = params.pulseAmp.toFixed(2);

requestAnimationFrame(draw);
  }
  draw();

// Keyboard shortcuts
  addEventListener('keydown', (e)=>{
    if(e.key==='['){ pulseAmpUI.value = Math.max(0.05, (+pulseAmpUI.value-0.02)).toFixed(2); }
    if(e.key===']'){ pulseAmpUI.value = Math.min(0.65, (+pulseAmpUI.value+0.02)).toFixed(2); }
    if(e.key==='-'){ speedUI.value    = Math.max(0.2, (+speedUI.value-0.05)).toFixed(2); }
    if(e.key==='='){ speedUI.value    = Math.min(3.0, (+speedUI.value+0.05)).toFixed(2); }
  });

})();
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump