SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/arcade/games/Simon_field.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 • Particle Field — FX Edition</title>
<style>
  html,body{height:100%;width:100%;margin:0;padding:0;background:#050a15;color:#eaf2ff;font:15px/1.3 system-ui,Segoe UI,Roboto,Arial;overflow:hidden}
  canvas{position:fixed;inset:0;display:block}
  #bg{z-index:0} #fx{z-index:1} #ui{z-index:2}
  .hud{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:3;background:rgba(255,255,255,.06);border:1px solid rgba(157,195,255,.28);backdrop-filter:blur(8px);border-radius:10px;padding:8px 12px;font-weight:800;white-space:nowrap}
  .legend{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:3;opacity:.9;color:#a8b6d9;font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.6);background:rgba(0,0,0,.2);border:1px solid rgba(157,195,255,.2);border-radius:10px;padding:8px 10px}
  .chip{padding:.2em .5em;border:1px solid rgba(157,195,255,.35);border-radius:999px;background:rgba(255,255,255,.06);color:#cfe3ff;margin:0 .15em}
</style>
</head>
<body>
<canvas id="bg"></canvas>
<canvas id="fx"></canvas>
<canvas id="ui"></canvas>

<div class="hud" id="hud">Particles: 12,000 • Trails ON • Shimmer ON • Sparks ON • Vortex ON</div>
<div class="legend">
  <span class="chip">Click</span> gravity burst
  <span class="chip">Hold & drag</span> stir flow
  <span class="chip">1</span> Trails
  <span class="chip">2</span> Shimmer
  <span class="chip">3</span> Sparks
  <span class="chip">4</span> Vortex
  <span class="chip">R</span> Reset
</div>

// Perlin curl
const P=new Uint8Array(512);
(function(){ for(let i=0;i<256;i++) P[i]=i; for(let i=255;i>0;i--){ const j=(Math.random()*i)|0; [P[i],P[j]]=[P[j],P[i]] } for(let i=0;i<256;i++) P[i+256]=P[i]; })();
const fade=t=>t*t*t*(t*(t*6-15)+10);
const grad=(h,x,y)=>((h&1)?-x:x)+((h&2)?-y: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);
  const nx0=n0+(n1-n0)*u,nx1=n2+(n3-n2)*u; return nx0+(nx1-nx0)*v;
}
const FIELD_BASE=0.0017;
function curl(x,y,t,intens=1){
  const s=FIELD_BASE*(0.9+0.35*Math.sin(t*0.18)), e=0.0005;
  const nx=x*s+Math.sin(t*0.13)*2, ny=y*s+Math.cos(t*0.11)*2;
  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*intens, -dx*intens];
}

// Particles
const COUNT=12000;
let px,py,vx,vy;
function initParticles(n=COUNT){
  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()*W; py[i]=Math.random()*H; vx[i]=(Math.random()*2-1)*0.2; vy[i]=(Math.random()*2-1)*0.2; }
}

// FX
const wells=[], vortices=[], sparks=[], shimmers=[];
const flags={trails:true, shimmer:true, sparks:true, vortex:true};
function updateHUD(){
  HUD.textContent=`Particles: ${px.length.toLocaleString()} • Trails ${flags.trails?'ON':'OFF'} • Shimmer ${flags.shimmer?'ON':'OFF'} • Sparks ${flags.sparks?'ON':'OFF'} • Vortex ${flags.vortex?'ON':'OFF'}`;
}
function spawnWell(x,y,strength=1100,life=1.6){ wells.push({x,y,age:0,life,strength,radius:20}); if(flags.shimmer) shimmers.push({x,y,age:0,life:0.6,r:26}); if(flags.sparks) addSparks(x,y,200+Math.random()*80,40,280); }
function spawnVortex(x,y,spin=(Math.random()<0.5?-1:1)*0.002,pull=900,life=4){ vortices.push({x,y,age:0,life,spin,pull,radius:24}); }
function addSparks(x,y,hue=220,count=36,sp=240){ for(let i=0;i<count;i++){ const a=Math.random()*Math.PI*2, s=80+Math.random()*sp; sparks.push({x,y,vx:Math.cos(a)*s,vy:Math.sin(a)*s,life:0.6+Math.random()*0.6,h:hue}); } }

addEventListener('keydown',e=>{
  const k=e.key;
  if(k==='1') flags.trails=!flags.trails;
  if(k==='2') flags.shimmer=!flags.shimmer;
  if(k==='3') flags.sparks=!flags.sparks;
  if(k==='4') flags.vortex=!flags.vortex;
  if(k.toLowerCase()==='r'){ wells.length=0; vortices.length=0; sparks.length=0; shimmers.length=0; initParticles(px.length); }
  updateHUD();
});

// FX layer
  gx.clearRect(0,0,W,H);
  for(let i=wells.length-1;i>=0;i--){
    const w=wells[i]; w.age+=dt; w.radius+=420*dt; const a=1-(w.age/w.life); const hue=((w.age*220)|0)%360;
    gx.strokeStyle=`hsla(${hue},100%,70%,${0.5*a})`; gx.lineWidth=2.2; gx.beginPath(); gx.arc(w.x,w.y,w.radius,0,Math.PI*2); gx.stroke();
    const grad=gx.createRadialGradient(w.x,w.y,0,w.x,w.y,w.radius*0.7);
    grad.addColorStop(0,`hsla(${(hue+30)%360},100%,70%,${0.22*a})`); grad.addColorStop(1,`hsla(${(hue+30)%360},100%,70%,0)`);
    gx.fillStyle=grad; gx.beginPath(); gx.arc(w.x,w.y,w.radius*0.7,0,Math.PI*2); gx.fill();
    if(w.age>w.life) wells.splice(i,1);
  }
  if(flags.vortex){
    for(let i=vortices.length-1;i>=0;i--){
      const v=vortices[i]; v.age+=dt; v.radius+=60*dt; const p=v.age/v.life;
      gx.strokeStyle=`hsla(${(280+p*100)|0},100%,70%,0.35)`; gx.lineWidth=2; gx.beginPath(); gx.arc(v.x,v.y,v.radius,0,Math.PI*2); gx.stroke();
      if(v.age>v.life) vortices.splice(i,1);
    }
  }
  if(flags.sparks){
    for(let i=sparks.length-1;i>=0;i--){
      const s=sparks[i]; s.life-=dt; s.x+=s.vx*dt; s.y+=s.vy*dt; s.vx*=0.985; s.vy*=0.985;
      gx.fillStyle=`hsla(${s.h},100%,70%,${Math.max(0,s.life)})`; gx.fillRect(s.x,s.y,2,2);
      if(s.life<=0) sparks.splice(i,1);
    }
  }
  if(flags.shimmer){
    for(let i=shimmers.length-1;i>=0;i--){
      const b=shimmers[i]; b.age+=dt; b.r+=180*dt; const a=Math.max(0,0.18*(1-b.age/b.life));
      gx.strokeStyle=`rgba(255,255,255,${a})`; gx.lineWidth=1.5; gx.beginPath(); gx.arc(b.x,b.y,b.r,0,Math.PI*2); gx.stroke();
      if(b.age>b.life) shimmers.splice(i,1);
    }
  }

// UI overlay
  gg.clearRect(0,0,W,H);
  if(dragging){
    gg.strokeStyle='rgba(200,230,255,.6)'; gg.lineWidth=1.5;
    gg.beginPath(); gg.arc(lastX,lastY,22,0,Math.PI*2); gg.stroke();
    gg.beginPath(); gg.moveTo(lastX-26,lastY); gg.lineTo(lastX+26,lastY); gg.moveTo(lastX,lastY-26); gg.lineTo(lastX,lastY+26); gg.stroke();
  }

requestAnimationFrame(loop);
}

function boot(){
  resize(); initParticles(); updateHUD();
  setTimeout(()=>spawnWell(W*0.3,H*0.5,1200,1.4), 200);
  setTimeout(()=>spawnWell(W*0.7,H*0.4,1200,1.4), 600);
  requestAnimationFrame(loop);
}
boot();
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump