SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/arcade/games/ORB MOD.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 Energy Field — Fullscreen (DPR-SAFE)</title>
<style>
  :root{ --bg:#060a16; --edge:rgba(255,255,255,.14); --ink:#eaf2ff }
  html,body{height:100%}
  body{
    margin:0; overflow:hidden; background:
      radial-gradient(1200px 800px at 85% -10%, rgba(106,224,255,.12), transparent 60%),
      var(--bg);
    color:var(--ink); font-family:system-ui,Inter,Segoe UI,Roboto,Arial;
  }
  /* Fullscreen layers */
  #stage{position:fixed; inset:0; z-index:0; pointer-events:none}
  canvas{position:fixed; inset:0; display:block}
  /* Dashboard */
  #simonDashboard{
    position:fixed; right:14px; bottom:14px; width:min(360px,94vw);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid var(--edge); padding:12px; border-radius:14px;
    box-shadow:0 10px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
    color:var(--ink); z-index:10; backdrop-filter: blur(8px);
  }
  #simonDashboard h4{margin:0 0 10px; font-weight:900; font-size:14px; letter-spacing:.6px; color:#dff6ff}
  .card{border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px;
        background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)); margin-bottom:10px}
  .card h5{margin:0 0 6px; font-size:12px; letter-spacing:.5px; color:#d7ecff}
  .s-row{display:flex;align-items:center;gap:10px;margin:8px 0}
  .s-row label{flex:1;font-size:12px;color:#cfe3ff}
  .s-row input[type=range]{flex:2}
  .s-row input[type=number]{width:76px;background:transparent;border:1px solid rgba(255,255,255,.12);color:inherit;padding:4px;border-radius:6px}
  select{flex:2;padding:6px;border-radius:8px;background:transparent;color:inherit;border:1px solid rgba(255,255,255,.12)}
  .s-btn{display:inline-block;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.14);
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    cursor:pointer;font-weight:800;font-size:12px;color:#eaf2ff;margin-right:6px;
    transition:transform .15s ease, box-shadow .2s ease}
  .s-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(106,224,255,.18) }
  .s-btn.warn{background:linear-gradient(90deg,#ff7ad1,#8a7bff); color:#021018}
  .row2{display:flex;justify-content:space-between;gap:8px;margin-top:6px}
  .s-small{font-size:11px;color:#9fb6da;margin-top:6px}
</style>
</head>
<body>

<div id="stage" aria-hidden="true">
  <canvas id="bg"></canvas>
  <canvas id="fx"></canvas>
</div>

<div id="simonDashboard" role="region" aria-label="SIMON Effects Dashboard">
  <h4>SIMON Effects — Dashboard</h4>

<div class="card">
    <h5>Particles Field</h5>
    <div class="s-row">
      <label>Particles</label>
      <input id="dashParticles" type="range" min="500" max="25000" step="100" value="11000">
      <input id="dashParticlesN" type="number" min="100" max="50000" value="11000">
    </div>
    <div class="s-row">
      <label>Trail Fade</label>
      <input id="dashTrail" type="range" min="0.02" max="0.30" step="0.01" value="0.08">
      <input id="dashTrailN" type="number" step="0.01" value="0.08">
    </div>
    <div class="s-row">
      <label>Field Scale</label>
      <input id="dashScale" type="range" min="0.0003" max="0.0060" step="0.0001" value="0.0018">
      <input id="dashScaleN" type="number" step="0.0001" value="0.0018">
    </div>
    <div class="s-row">
      <label>Storm Intensity</label>
      <input id="dashStorm" type="range" min="0.5" max="2.0" step="0.05" value="1.0">
      <input id="dashStormN" type="number" step="0.05" value="1.0">
    </div>
    <div class="s-row">
      <label>Mode</label>
      <select id="dashMode">
        <option value="0">Ethereal</option>
        <option value="1">Plasma</option>
        <option value="2">Vortex</option>
      </select>
      <button id="dashLive" class="s-btn">Live</button>
    </div>
    <div class="row2">
      <button class="s-btn" data-preset="calm">Calm</button>
      <button class="s-btn" data-preset="wild">Wild</button>
      <button class="s-btn warn" data-preset="insane">INSANE</button>
    </div>
  </div>

<div class="card">
    <h5>Energy Orbs + Links</h5>
    <div class="s-row">
      <label>Orb Count</label>
      <input id="boCount" type="range" min="2" max="80" step="1" value="7">
      <input id="boCountN" type="number" min="1" max="120" value="7">
    </div>
    <div class="s-row">
      <label>Orb Base Size</label>
      <input id="boSize" type="range" min="10" max="80" step="1" value="42">
      <input id="boSizeN" type="number" min="6" max="120" value="42">
    </div>
    <div class="s-row">
      <label>Orb Speed</label>
      <input id="boSpeed" type="range" min="0.1" max="2.5" step="0.05" value="0.8">
      <input id="boSpeedN" type="number" step="0.05" value="0.8">
    </div>
    <div class="s-row">
      <label>Link Distance</label>
      <input id="boLink" type="range" min="60" max="600" step="5" value="220">
      <input id="boLinkN" type="number" min="40" max="1200" value="220">
    </div>
    <div class="s-row">
      <label>Line Width</label>
      <input id="boLineW" type="range" min="0.5" max="4.0" step="0.1" value="1.6">
      <input id="boLineWN" type="number" step="0.1" value="1.6">
    </div>
    <div class="s-row">
      <label>Line Opacity</label>
      <input id="boLineA" type="range" min="0.05" max="1.0" step="0.05" value="0.55">
      <input id="boLineAN" type="number" step="0.05" value="0.55">
    </div>
  </div>

<div class="row2">
    <button id="dashApply" class="s-btn">Apply</button>
    <button id="dashPause" class="s-btn">Pause</button>
    <button id="dashClose" class="s-btn">Close</button>
  </div>
  <div class="s-small" id="dashStatus">Status: initializing…</div>
</div>

// -------- State (CSS px units) --------
  const state = {
    // particles
    particles: 11000,
    trailFade: 0.08,
    fieldScale: 0.0018,
    storm: 1.0,
    mode: 0,
    // orbs/links
    orbCount: 7,
    orbSize: 42,  // px base radius before pulse
    orbSpeed: 0.8,
    linkDist: 220,
    lineW: 1.6,
    lineA: 0.55,
    paused:false
  };

// -------- Permutation noise + curl (same flavor as your doc) --------
  const P = new Uint8Array(512);
  (function initPerm(){ for(let i=0;i<256;i++) P[i]=i;
    for(let i=255;i>0;i--){ const j=(Math.random()*i)|0; const t=P[i]; P[i]=P[j]; P[j]=t; }
    for(let i=0;i<256;i++) P[i+256]=P[i]; })();
  function fade(t){return t*t*t*(t*(t*6-15)+10)}
  function grad(h,x,y){ switch(h&3){case 0: return x+y; case 1: return -x+y; case 2: return x-y; default: return -x-y} }
  function noise2(x,y){
    const X=Math.floor(x)&255, Y=Math.floor(y)&255; x-=Math.floor(x); y-=Math.floor(y);
    const u=fade(x), v=fade(y), A=P[X]+Y, B=P[X+1]+Y;
    const n0=grad(P[A],x,y), n1=grad(P[B],x-1,y), n2=grad(P[A+1],x,y-1), n3=grad(P[B+1],x-1,y-1);
    return (n0+(n1-n0)*u) + ( (n2+(n3-n2)*u) - (n0+(n1-n0)*u) )*v;
  }
  function curl(x,y,t){
    const s = state.fieldScale * (0.8 + 0.4*Math.sin(t*0.2));
    const e = 0.0005;
    const nx = x*s + Math.sin(t*0.13)*2.0;
    const ny = y*s + Math.cos(t*0.11)*2.0;
    const n1 = noise2(nx, ny+e), n2 = noise2(nx, ny-e), n3 = noise2(nx+e, ny), n4 = noise2(nx-e, ny);
    const dx = (n1-n2)/(2*e), dy = (n3-n4)/(2*e);
    return [ dy*state.storm, -dx*state.storm ];
  }

// -------- Particles (CSS px arrays) --------
  let px, py, vx, vy;
  function seedParticles(N){
    const n = Math.max(100, Math.min(50000, N|0));
    px = new Float32Array(n); py = new Float32Array(n);
    vx = new Float32Array(n); vy = new Float32Array(n);
    for(let i=0;i<n;i++){
      px[i]=Math.random()*innerWidth; py[i]=Math.random()*innerHeight;
      vx[i]=(Math.random()*2-1)*0.2;  vy[i]=(Math.random()*2-1)*0.2;
    }
  }
  seedParticles(state.particles);

// -------- Orbs (CSS px; gradient + core + rim; lightning) --------
  let orbs=[];
  function seedOrbs(count){
    const n = Math.max(1, Math.min(120, count|0));
    orbs = new Array(n).fill(0).map(()=>({
      x: Math.random()*innerWidth,
      y: Math.random()*innerHeight,
      vx:(Math.random()*2-1)*0.6*state.orbSpeed,
      vy:(Math.random()*2-1)*0.6*state.orbSpeed,
      r: state.orbSize + Math.random()*state.orbSize*0.3,
      phase: Math.random()*Math.PI*2,
      hue: Math.random()
    }));
  }
  seedOrbs(state.orbCount);

// -------- Animation --------
  let last = performance.now();
  function tick(now){
    if(state.paused){ requestAnimationFrame(tick); return; }
    const dt = Math.min(0.033, (now-last)/1000); last=now;
    const t = now*0.001;

// Particles trails
    g.fillStyle = `rgba(5,10,22,${state.trailFade})`;
    g.fillRect(0,0,innerWidth,innerHeight);
    const hueShift = (t*40)%360;
    g.globalCompositeOperation = 'lighter';
    g.fillStyle = `hsla(${hueShift}, 95%, 60%, 0.075)`;
    for(let i=0;i<px.length;i++){
      const f = curl(px[i], py[i], t);
      vx[i] = vx[i]*0.985 + f[0]*20*dt + (Math.random()*2-1)*0.1*dt;
      vy[i] = vy[i]*0.985 + f[1]*20*dt + (Math.random()*2-1)*0.1*dt;
      px[i] += vx[i]; py[i] += vy[i];
      if(px[i]<-2) px[i]+=innerWidth+4; else if(px[i]>innerWidth+2) px[i]-=innerWidth+4;
      if(py[i]<-2) py[i]+=innerHeight+4; else if(py[i]>innerHeight+2) py[i]-=innerHeight+4;
      g.fillRect(px[i], py[i], 1.2, 1.2);
    }
    g.globalCompositeOperation='source-over';

// Orbs layer
    gx.clearRect(0,0,innerWidth,innerHeight);
    gx.save(); gx.globalCompositeOperation='lighter';

for(let i=0;i<orbs.length;i++){
      const o = orbs[i];
      // drift from curl
      const f = curl(o.x, o.y, t);
      o.vx += f[0]*18*dt; o.vy += f[1]*18*dt;
      o.vx *= 0.992; o.vy *= 0.992;
      o.x += o.vx; o.y += o.vy;

// bounce (CSS px bounds)
      const pad = o.r*0.8;
      if(o.x<pad){ o.x=pad; o.vx*=-0.7 }
      if(o.x>innerWidth-pad){ o.x=innerWidth-pad; o.vx*=-0.7 }
      if(o.y<pad){ o.y=pad; o.vy*=-0.7 }
      if(o.y>innerHeight-pad){ o.y=innerHeight-pad; o.vy*=-0.7 }

// pulse + hue
      o.phase += dt*(0.6 + 0.8*Math.sin(t*0.7 + i));
      const R = o.r * (0.85 + Math.sin(o.phase)*0.15);
      const hue = ((o.hue + t*0.05 + i*0.07)*360)%360;

// outer glow gradient
      const grd = gx.createRadialGradient(o.x,o.y,R*0.1, o.x,o.y,R);
      grd.addColorStop(0, `hsla(${hue}, 100%, 75%, 0.60)`);
      grd.addColorStop(0.5,`hsla(${(hue+40)%360}, 100%, 60%, 0.25)`);
      grd.addColorStop(1, `hsla(${(hue+120)%360}, 100%, 50%, 0.02)`);
      gx.fillStyle = grd;
      gx.beginPath(); gx.arc(o.x,o.y,R,0,Math.PI*2); gx.fill();

// bright core
      const core = gx.createRadialGradient(o.x,o.y,0, o.x,o.y,R*0.35);
      core.addColorStop(0, `hsla(${hue}, 100%, 85%, 0.85)`);
      core.addColorStop(1, `hsla(${hue}, 100%, 85%, 0.0)`);
      gx.fillStyle = core;
      gx.beginPath(); gx.arc(o.x,o.y,R*0.35,0,Math.PI*2); gx.fill();

// rim
      gx.strokeStyle = `hsla(${(hue+20)%360},100%,70%,0.25)`;
      gx.lineWidth = 1.2*DPR;
      gx.beginPath(); gx.arc(o.x,o.y,R,0,Math.PI*2); gx.stroke();
    }

// Links + lightning
    const linkSq = state.linkDist*state.linkDist;
    gx.lineWidth = state.lineW*DPR;
    for(let i=0;i<orbs.length;i++){
      for(let j=i+1;j<orbs.length;j++){
        const a=orbs[i], b=orbs[j];
        const dx=a.x-b.x, dy=a.y-b.y, d2=dx*dx+dy*dy;
        if(d2<linkSq){
          const alpha = Math.max(0, state.lineA * (1 - d2/linkSq));
          gx.strokeStyle = `rgba(120,220,255,${alpha})`;
          gx.beginPath(); gx.moveTo(a.x,a.y); gx.lineTo(b.x,b.y); gx.stroke();
          // spark lightning when *very* close
          const d = Math.sqrt(d2), thresh = (a.r+b.r)*1.2;
          if(d<thresh){ drawLightning(a.x,a.y,b.x,b.y, 1 - d/thresh); }
        }
      }
    }

gx.restore();
    requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);

/* ================= API (no DPR math in inputs) ================= */
  window.SIMON_API = {
    // particles
    setParticleCount(n){ seedParticles(n); state.particles = px.length; },
    setTrailFade(v){ state.trailFade = Math.max(0.01, Math.min(0.35, +v)); },
    setFieldScale(v){ state.fieldScale = Math.max(0.0001, Math.min(0.02, +v)); },
    setStormIntensity(v){ state.storm = Math.max(0.5, Math.min(2.0, +v)); },
    setMode(m){ state.mode = (+m|0)%3; /* reserved for future color bands */ },

// orbs
    setBOCount(n){ state.orbCount = Math.max(1, Math.min(120, +n|0)); seedOrbs(state.orbCount); },
    setBOSize(px){ state.orbSize = Math.max(6, Math.min(160, +px|0)); for(const o of orbs){ o.r = state.orbSize + Math.random()*state.orbSize*0.3; } },
    setBOSpeed(v){ state.orbSpeed = Math.max(0.05, Math.min(5, +v)); for(const o of orbs){ o.vx*=(0.8+v*0.2); o.vy*=(0.8+v*0.2); } },
    setBOLinkDist(px){ state.linkDist = Math.max(40, Math.min(1600, +px)); },
    setBOLineWidth(w){ state.lineW = Math.max(0.2, Math.min(6, +w)); },
    setBOLineAlpha(a){ state.lineA = Math.max(0.01, Math.min(1, +a)); },

// batch + pause
    applyAll(cfg){
      if('particleCount' in cfg) this.setParticleCount(cfg.particleCount);
      if('trailFade' in cfg)     this.setTrailFade(cfg.trailFade);
      if('fieldScale' in cfg)    this.setFieldScale(cfg.fieldScale);
      if('stormIntens' in cfg)   this.setStormIntensity(cfg.stormIntens);
      if('mode' in cfg)          this.setMode(cfg.mode);

if('boCount' in cfg)       this.setBOCount(cfg.boCount);
      if('boSize' in cfg)        this.setBOSize(cfg.boSize);
      if('boSpeed' in cfg)       this.setBOSpeed(cfg.boSpeed);
      if('boLink' in cfg)        this.setBOLinkDist(cfg.boLink);
      if('boLineW' in cfg)       this.setBOLineWidth(cfg.boLineW);
      if('boLineA' in cfg)       this.setBOLineAlpha(cfg.boLineA);
    },
    setPaused(p){ state.paused = !!p; }
  };
})();
</script>

// Field
  bind($('dashParticles'),$('dashParticlesN'),v=>api.setParticleCount(v));
  bind($('dashTrail'),$('dashTrailN'),v=>api.setTrailFade(v));
  bind($('dashScale'),$('dashScaleN'),v=>api.setFieldScale(v));
  bind($('dashStorm'),$('dashStormN'),v=>api.setStormIntensity(v));
  $('dashMode').addEventListener('change',e=>{ if(live) api.setMode(+e.target.value) });

// Orbs
  bind($('boCount'),$('boCountN'),v=>api.setBOCount(v));
  bind($('boSize'),$('boSizeN'),v=>api.setBOSize(v));
  bind($('boSpeed'),$('boSpeedN'),v=>api.setBOSpeed(v));
  bind($('boLink'),$('boLinkN'),v=>api.setBOLinkDist(v));
  bind($('boLineW'),$('boLineWN'),v=>api.setBOLineWidth(v));
  bind($('boLineA'),$('boLineAN'),v=>api.setBOLineAlpha(v));

// Presets
  document.querySelectorAll('[data-preset]').forEach(b=>b.addEventListener('click',()=>{
    const p=b.getAttribute('data-preset');
    if(p==='calm'){
      $('dashParticles').value=$('dashParticlesN').value=7000;
      $('dashTrail').value=$('dashTrailN').value=0.12;
      $('dashScale').value=$('dashScaleN').value=0.0012;
      $('dashStorm').value=$('dashStormN').value=0.8; $('dashMode').value=0;
      $('boCount').value=$('boCountN').value=6; $('boSize').value=$('boSizeN').value=38;
      $('boSpeed').value=$('boSpeedN').value=0.6; $('boLink').value=$('boLinkN').value=260;
      $('boLineW').value=$('boLineWN').value=1.2; $('boLineA').value=$('boLineAN').value=0.45;
    }
    if(p==='wild'){
      $('dashParticles').value=$('dashParticlesN').value=14000;
      $('dashTrail').value=$('dashTrailN').value=0.07;
      $('dashScale').value=$('dashScaleN').value=0.0019;
      $('dashStorm').value=$('dashStormN').value=1.3; $('dashMode').value=1;
      $('boCount').value=$('boCountN').value=10; $('boSize').value=$('boSizeN').value=44;
      $('boSpeed').value=$('boSpeedN').value=1.0; $('boLink').value=$('boLinkN').value=220;
      $('boLineW').value=$('boLineWN').value=1.6; $('boLineA').value=$('boLineAN').value=0.6;
    }
    if(p==='insane'){
      $('dashParticles').value=$('dashParticlesN').value=22000;
      $('dashTrail').value=$('dashTrailN').value=0.05;
      $('dashScale').value=$('dashScaleN').value=0.0032;
      $('dashStorm').value=$('dashStormN').value=1.8; $('dashMode').value=1;
      $('boCount').value=$('boCountN').value=18; $('boSize').value=$('boSizeN').value=50;
      $('boSpeed').value=$('boSpeedN').value=1.6; $('boLink').value=$('boLinkN').value=200;
      $('boLineW').value=$('boLineWN').value=2.0; $('boLineA').value=$('boLineAN').value=0.75;
    }
    if(live) applyAll();
  }));

let live=false;
  $('dashLive').addEventListener('click',()=>{ live=!live; $('dashLive').textContent=live?'Live ON':'Live';
    $('dashLive').style.boxShadow = live ? '0 8px 24px rgba(106,224,255,.22)' : ''; say(live?'Live mode ON':'Live mode OFF'); });

// Kick off
  if(window.SIMON_API){ say('SIMON_API ready — dashboard connected'); applyAll(); }
  else { say('SIMON_API not found', false); }
})();
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump