SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/arcade/games/galaxy.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<title>SIMON • 8K Galaxy Background</title>
<meta name="theme-color" content="#070b16" />
<style>
  :root{
    --bg0:#050615;
    --bg1:#070b16;
    --txt:rgba(234,242,255,.92);
    --mut:rgba(169,182,217,.78);
    --edge:rgba(255,255,255,.14);
    --glass:rgba(255,255,255,.06);
    --glass2:rgba(255,255,255,.035);
    --cyan:#6ae0ff;
    --ind:#7b62ff;
    --pink:#ff4fd6;
    --ok:#44d18a;
    --warn:#ffcc4d;
    --bad:#ff4f6d;
    --r:18px;
    --shadow:0 18px 60px rgba(0,0,0,.55);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; overflow:hidden;
    font-family:ui-sans-serif,system-ui,Inter,Segoe UI,Roboto,Arial;
    color:var(--txt);
    background:radial-gradient(120% 140% at 50% -10%, #0b1432 0%, var(--bg1) 55%, #040611 100%);
  }

/* Fullscreen canvas */
  #galaxy{
    position:fixed; inset:0;
    width:100vw; height:100vh;
    display:block;
  }

/* Optional top overlay UI (demo) */
  .ui{
    position:fixed; inset:0;
    pointer-events:none;
  }
  .hud{
    position:absolute; left:14px; top:14px;
    width:min(420px, calc(100vw - 28px));
    pointer-events:auto;
    border:1px solid var(--edge);
    border-radius:var(--r);
    background:linear-gradient(180deg, var(--glass), var(--glass2));
    backdrop-filter: blur(10px);
    box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.10);
    padding:12px;
  }
  .title{
    display:flex; gap:10px; align-items:baseline;
    margin:0 0 6px 0;
  }
  .title h1{
    margin:0;
    font-size:14px;
    font-weight:900;
    letter-spacing:.55px;
    background:conic-gradient(from 90deg,var(--cyan),var(--ind),var(--pink),var(--cyan));
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
    text-shadow:0 0 18px rgba(124,77,255,.45);
  }
  .title .tag{
    font-size:12px; color:var(--mut);
  }

.row{
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    margin-top:8px;
  }
  .row label{ font-size:12px; color:var(--mut) }
  .row input[type="range"]{ width:160px }
  .row select, .row button{
    pointer-events:auto;
    background:#121a30;
    color:var(--txt);
    border:1px solid rgba(255,255,255,.16);
    border-radius:12px;
    padding:7px 10px;
  }
  .row button{
    background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
    cursor:pointer;
  }
  .pill{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    padding:6px 10px;
    background:rgba(0,0,0,.18);
  }
  .dot{
    width:10px; height:10px; border-radius:50%;
    box-shadow:0 0 18px rgba(106,224,255,.35);
    background:radial-gradient(circle at 30% 30%, #fff, var(--cyan));
  }
  .small{ font-size:12px; color:var(--mut) }

/* Center watermark (optional) */
  .mark{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
    text-align:center;
    opacity:.14;
    mix-blend-mode:screen;
  }
  .mark .big{
    font-weight:900;
    letter-spacing:1.4px;
    font-size:clamp(26px, 4vw, 54px);
    background:conic-gradient(from 220deg,var(--cyan),var(--ind),var(--pink),var(--cyan));
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
    text-shadow:0 0 28px rgba(106,224,255,.25);
  }
  .mark .sub{
    margin-top:6px;
    font-size:12px;
    color:rgba(234,242,255,.7);
  }

/* Reduce motion respect */
  @media (prefers-reduced-motion: reduce){
    .mark{ display:none }
  }
</style>
</head>
<body>

<div class="ui">
  <div class="hud">
    <div class="title">
      <h1>SIMON • Galaxy Background</h1>
      <div class="tag">8K-ish • Canvas</div>
    </div>

<div class="row">
      <span class="pill"><span class="dot"></span><span class="small" id="stat">booting…</span></span>
    </div>

<div class="row">
      <label>Quality</label>
      <select id="quality">
        <option value="0.75">Balanced</option>
        <option value="1.0">High</option>
        <option value="1.5">Ultra</option>
        <option value="2.0">Insane (8K-ish)</option>
      </select>

<label>Speed</label>
      <input id="speed" type="range" min="0" max="200" value="85" />

<label>Bloom</label>
      <input id="bloom" type="range" min="0" max="200" value="110" />
    </div>

<div class="row">
      <button id="pause">Pause</button>
      <button id="snap">Screenshot</button>
      <button id="reset">Re-seed</button>
    </div>

<div class="small" style="margin-top:8px">
      Tip: “Insane” tries to push very high internal resolution. If it stutters, drop to Ultra/High.
    </div>
  </div>

<div class="mark">
    <div class="big">GAYLORD SINCLAIR</div>
    <div class="sub">SIMON • cosmic field</div>
  </div>
</div>

const $quality = document.getElementById('quality');
  const $speed   = document.getElementById('speed');
  const $bloom   = document.getElementById('bloom');
  const $pause   = document.getElementById('pause');
  const $snap    = document.getElementById('snap');
  const $reset   = document.getElementById('reset');
  const $stat    = document.getElementById('stat');

// ---------- RNG ----------
  let SEED = (Math.random()*1e9)>>>0;
  function rand() { // xorshift32
    SEED ^= SEED << 13; SEED >>>= 0;
    SEED ^= SEED >> 17; SEED >>>= 0;
    SEED ^= SEED << 5;  SEED >>>= 0;
    return (SEED >>> 0) / 4294967296;
  }
  function r(a,b){ return a + (b-a)*rand(); }

// ---------- Noise helpers ----------
  function hash2(x,y){
    // deterministic pseudo-noise from coords
    const s = Math.sin(x*127.1 + y*311.7) * 43758.5453123;
    return s - Math.floor(s);
  }
  function smoothstep(t){ return t*t*(3-2*t); }
  function valueNoise(x,y){
    const xi = Math.floor(x), yi = Math.floor(y);
    const xf = x - xi, yf = y - yi;
    const a = hash2(xi, yi);
    const b = hash2(xi+1, yi);
    const d = hash2(xi, yi+1);
    const e = hash2(xi+1, yi+1);
    const u = smoothstep(xf);
    const v = smoothstep(yf);
    return (a*(1-u) + b*u)*(1-v) + (d*(1-u) + e*u)*v;
  }
  function fbm(x,y){
    let v=0, amp=0.55, freq=1;
    for(let i=0;i<5;i++){
      v += amp * valueNoise(x*freq, y*freq);
      freq *= 2.0;
      amp  *= 0.55;
    }
    return v;
  }

// ---------- Buffers (precomputed starfield + dust) ----------
  let W=0,H=0, DPR=1, QS=1;
  let paused=false;

const stars = [];
  const dust  = [];
  function buildField(){
    stars.length=0; dust.length=0;

// Scales with pixel count but clamped to avoid insane overdraw
    const px = W*H;
    const starCount = Math.max(900, Math.min(6500, Math.floor(px / 220000)));
    const dustCount = Math.max(1800, Math.min(14000, Math.floor(px / 120000)));

for(let i=0;i<starCount;i++){
      const z = rand(); // depth
      stars.push({
        x: rand()*W,
        y: rand()*H,
        z,
        r: r(0.4, 1.8) * (0.35 + 1.6*z),
        tw: r(0.3, 1.2),
        ph: rand()*Math.PI*2,
        hue: r(190, 280), // cyan -> violet range
        a: r(0.25, 0.95) * (0.25 + 0.9*z)
      });
    }

for(let i=0;i<dustCount;i++){
      const z = rand();
      dust.push({
        x: rand()*W,
        y: rand()*H,
        z,
        r: r(0.3, 2.6) * (0.5 + 1.2*z),
        a: r(0.02, 0.12) * (0.25 + 0.8*z),
        hue: r(170, 330)
      });
    }
  }

// ---------- Resize ----------
  function resize(){
    // quality scalar multiplies DPR, but clamp for sanity
    DPR = Math.max(1, Math.min(3, (window.devicePixelRatio || 1)));
    QS  = parseFloat($quality.value || "1.0");

// “8K-ish”: allow huge internal canvas, but cap by max pixels to prevent crashes.
    // 8K UHD ~ 7680*4320 = 33,177,600 pixels.
    const MAX_PIXELS = 34_000_000; // safe-ish cap
    const w = Math.max(1, Math.floor(innerWidth  * DPR * QS));
    const h = Math.max(1, Math.floor(innerHeight * DPR * QS));
    let ww = w, hh = h;

const pixels = ww*hh;
    if(pixels > MAX_PIXELS){
      const s = Math.sqrt(MAX_PIXELS / pixels);
      ww = Math.floor(ww*s);
      hh = Math.floor(hh*s);
    }

c.width  = ww;
    c.height = hh;
    c.style.width  = "100vw";
    c.style.height = "100vh";
    W = ww; H = hh;

buildField();
  }

// ---------- Render ----------
  function drawGalaxy(t){
    const speed = (+$speed.value || 85) / 100;
    const bloom = (+$bloom.value || 110) / 100;

// Background gradient
    ctx.clearRect(0,0,W,H);
    const g = ctx.createRadialGradient(W*0.5, H*0.45, 0, W*0.5, H*0.5, Math.max(W,H)*0.75);
    g.addColorStop(0.00, "rgba(20,30,60,0.40)");
    g.addColorStop(0.35, "rgba(10,14,30,0.55)");
    g.addColorStop(1.00, "rgba(2,3,10,1.00)");
    ctx.fillStyle = g;
    ctx.fillRect(0,0,W,H);

// Swirl params
    const cx = W*0.5, cy = H*0.5;
    const R  = Math.min(W,H)*0.48;
    const time = t*0.00008*speed;

// Nebula layer (procedural)
    // We sample in a coarse grid to keep performance reasonable at huge resolutions.
    const step = Math.max(2, Math.floor(Math.min(W,H) / 320)); // adaptive
    ctx.globalCompositeOperation = "screen";

for(let y=0;y<H;y+=step){
      for(let x=0;x<W;x+=step){
        const dx = (x-cx)/R;
        const dy = (y-cy)/R;
        const d  = Math.sqrt(dx*dx + dy*dy);

// swirl angle + radial warp
        const ang = Math.atan2(dy, dx);
        const swirl = ang + (1.25 - d) * 2.6 + time*3.2;

const u = (Math.cos(swirl)*d + 0.12) * 2.2;
        const v = (Math.sin(swirl)*d + 0.18) * 2.2;

// fractal noise for nebula density
        const n = fbm(u + time*0.55, v - time*0.35);

// bright arms / core
        const core = Math.exp(-d*d*3.6);
        const arms = Math.max(0, (1.0 - d)) * Math.max(0, Math.sin(ang*3 + time*2.2)*0.35 + 0.65);

// density
        let den = (n*0.85 + core*0.9 + arms*0.5) * (1.0 - d*0.85);
        if (den <= 0.02) continue;

// color mix (cyan/indigo/pink)
        const hue = 200 + 110*n + 60*arms;
        const sat = 70 + 20*core;
        const lum = 22 + 40*den + 25*core;

const alpha = Math.min(0.35, den*0.55) * bloom;

ctx.fillStyle = `hsla(${hue.toFixed(1)},${sat.toFixed(0)}%,${lum.toFixed(0)}%,${alpha.toFixed(3)})`;
        ctx.fillRect(x,y,step,step);
      }
    }

// Dust layer
    ctx.globalCompositeOperation = "lighter";
    for(const p of dust){
      const dz = 0.25 + p.z*0.95;
      const a = p.a * (0.4 + 0.6*Math.sin(t*0.0012*speed + p.x*0.002 + p.y*0.001));
      if(a <= 0.002) continue;
      ctx.beginPath();
      ctx.fillStyle = `hsla(${p.hue}, 90%, 70%, ${a})`;
      ctx.arc(p.x, p.y, p.r*dz, 0, Math.PI*2);
      ctx.fill();
    }

// Stars
    ctx.globalCompositeOperation = "screen";
    for(const s of stars){
      const tw = 0.55 + 0.45*Math.sin(t*0.0011*speed*s.tw + s.ph);
      const a = Math.min(1, s.a * tw);
      const rr = s.r * (0.75 + 0.55*tw);

// Small glow
      const glow = ctx.createRadialGradient(s.x, s.y, 0, s.x, s.y, rr*6);
      glow.addColorStop(0.0, `hsla(${s.hue}, 95%, 92%, ${a*0.85})`);
      glow.addColorStop(0.2, `hsla(${s.hue+10}, 95%, 75%, ${a*0.22})`);
      glow.addColorStop(1.0, `hsla(${s.hue+30}, 95%, 60%, 0)`);
      ctx.fillStyle = glow;
      ctx.fillRect(s.x-rr*6, s.y-rr*6, rr*12, rr*12);

// Star core
      ctx.fillStyle = `rgba(255,255,255,${Math.min(1,a)})`;
      ctx.fillRect(s.x, s.y, 1.2, 1.2);
    }

// Core bloom + subtle vignette
    ctx.globalCompositeOperation = "screen";
    const coreG = ctx.createRadialGradient(cx, cy, 0, cx, cy, R*0.95);
    coreG.addColorStop(0.0, `rgba(255,255,255,${0.16*bloom})`);
    coreG.addColorStop(0.12, `rgba(120,180,255,${0.10*bloom})`);
    coreG.addColorStop(0.35, `rgba(160,90,255,${0.06*bloom})`);
    coreG.addColorStop(1.0, "rgba(0,0,0,0)");
    ctx.fillStyle = coreG;
    ctx.fillRect(0,0,W,H);

ctx.globalCompositeOperation = "multiply";
    const vig = ctx.createRadialGradient(cx, cy, R*0.35, cx, cy, R*1.2);
    vig.addColorStop(0.0, "rgba(0,0,0,0)");
    vig.addColorStop(1.0, "rgba(0,0,0,0.75)");
    ctx.fillStyle = vig;
    ctx.fillRect(0,0,W,H);

ctx.globalCompositeOperation = "source-over";
  }

// ---------- Loop + FPS stats ----------
  let lastT = performance.now();
  let fpsAcc=0, fpsN=0, lastStat=performance.now();

requestAnimationFrame(tick);
  }

// ---------- Controls ----------
  $pause.addEventListener('click', () => {
    paused = !paused;
    $pause.textContent = paused ? 'Resume' : 'Pause';
  });

$snap.addEventListener('click', () => {
    // Open image in new tab (simple, no downloads forced)
    const url = c.toDataURL('image/png');
    const w = window.open('', '_blank');
    if(w) w.document.write(`<title>Galaxy Snapshot</title><img src="${url}" style="width:100%;height:auto;display:block;background:#000">`);
  });

$reset.addEventListener('click', () => {
    SEED = (Math.random()*1e9)>>>0;
    buildField();
  });

$quality.addEventListener('change', () => {
    resize();
  });

// Resize listeners
  let rzTimer=null;
  window.addEventListener('resize', () => {
    clearTimeout(rzTimer);
    rzTimer = setTimeout(resize, 80);
  });

// Boot
  resize();
  requestAnimationFrame(tick);
})();
</script>

</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump