SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/arcade/games/junk.php

<!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 — Sin-i-CUSS Heaven Hell Effect</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#020104;
  font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  color:#fff;
}
canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
#hud{
  position:fixed;
  left:18px;
  top:18px;
  z-index:10;
  max-width:520px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  backdrop-filter:blur(14px);
  box-shadow:0 0 50px rgba(255,0,90,.18);
}
#hud h1{
  font-size:14px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 0 18px #ff0066,0 0 28px #63e8ff;
}
#hud p{
  margin-top:8px;
  font-size:12px;
  line-height:1.55;
  color:rgba(255,255,255,.72);
}
#badge{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:10;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
  color:rgba(255,255,255,.72);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
</style>
</head>
<body>

<div id="hud">
  <h1>SIMON SIN-i-CUSS GATEWAY</h1>
  <p>Pure heaven and hell collision field. Move pointer or touch screen to bend the orb, flames, halos, stars, and cursed-light particles.</p>
</div>

<div id="badge">HEAVEN × HELL × SIMON</div>

const canvas = document.getElementById("scene");
  const ctx = canvas.getContext("2d", { alpha:false });

let w = 0;
  let h = 0;
  let cx = 0;
  let cy = 0;
  let dpr = Math.min(window.devicePixelRatio || 1, 2);

const pointer = {
    x: 0,
    y: 0,
    tx: 0,
    ty: 0,
    active: false
  };

const stars = [];
  const sparks = [];
  const glyphs = [];
  const rings = [];
  const clouds = [];
  const bolts = [];

const rand = (a,b) => a + Math.random() * (b-a);
  const clamp = (v,a,b) => Math.max(a, Math.min(b, v));

function resize(){
    dpr = Math.min(window.devicePixelRatio || 1, 2);
    w = window.innerWidth;
    h = window.innerHeight;
    cx = w / 2;
    cy = h / 2;
    canvas.width = Math.floor(w * dpr);
    canvas.height = Math.floor(h * dpr);
    canvas.style.width = w + "px";
    canvas.style.height = h + "px";
    ctx.setTransform(dpr,0,0,dpr,0,0);

pointer.x = pointer.tx = cx;
    pointer.y = pointer.ty = cy;

build();
  }

function build(){
    stars.length = 0;
    sparks.length = 0;
    glyphs.length = 0;
    rings.length = 0;
    clouds.length = 0;
    bolts.length = 0;

const starCount = Math.floor((w*h)/4200);
    for(let i=0;i<starCount;i++){
      stars.push({
        x: rand(0,w),
        y: rand(0,h),
        z: rand(.2,1.8),
        r: rand(.4,1.8),
        a: rand(.18,.95),
        drift: rand(-.25,.25)
      });
    }

const sparkCount = Math.floor((w*h)/2800);
    for(let i=0;i<sparkCount;i++) addSpark(true);

for(let i=0;i<80;i++){
      glyphs.push({
        x: rand(0,w),
        y: rand(0,h),
        s: rand(10,30),
        a: rand(.05,.28),
        v: rand(.15,.8),
        char: randomGlyph()
      });
    }

for(let i=0;i<9;i++){
      rings.push({
        r: 82 + i * 34,
        speed: rand(-.018,.018),
        phase: rand(0,Math.PI*2),
        wobble: rand(.05,.22),
        width: rand(1,3)
      });
    }

for(let i=0;i<34;i++){
      clouds.push({
        x: rand(0,w),
        y: rand(0,h),
        r: rand(80,260),
        a: rand(.025,.08),
        dx: rand(-.25,.25),
        dy: rand(-.16,.16),
        side: Math.random() < .5 ? "heaven" : "hell"
      });
    }
  }

function randomGlyph(){
    const g = "✦✧✺✹✷✶✵✴✳✲✱☉☽☿♆♄♃⚚⚝⚡∞∴∵⌁⌬⟁⧫";
    return g[Math.floor(Math.random()*g.length)];
  }

function addSpark(initial=false){
    const side = Math.random() < .5 ? -1 : 1;
    const baseX = side < 0 ? rand(0,w*.48) : rand(w*.52,w);
    sparks.push({
      x: initial ? rand(0,w) : baseX,
      y: initial ? rand(0,h) : rand(h*.2,h*.9),
      vx: rand(-1.5,1.5),
      vy: rand(-2.8,.8),
      r: rand(1,4),
      life: rand(80,260),
      max: rand(160,320),
      hue: side < 0 ? rand(38,60) : rand(330,18) + (Math.random()<.5?360:0),
      side
    });
  }

function background(t){
    const g = ctx.createLinearGradient(0,0,w,h);
    g.addColorStop(0,"#050817");
    g.addColorStop(.33,"#120412");
    g.addColorStop(.5,"#020104");
    g.addColorStop(.68,"#1b0402");
    g.addColorStop(1,"#050005");
    ctx.fillStyle = g;
    ctx.fillRect(0,0,w,h);

const split = ctx.createRadialGradient(cx,cy,20,cx,cy,Math.max(w,h)*.75);
    split.addColorStop(0,"rgba(255,255,255,.11)");
    split.addColorStop(.22,"rgba(115,232,255,.08)");
    split.addColorStop(.45,"rgba(255,0,92,.08)");
    split.addColorStop(1,"rgba(0,0,0,.12)");
    ctx.fillStyle = split;
    ctx.fillRect(0,0,w,h);

ctx.save();
    ctx.globalCompositeOperation = "screen";
    for(const c of clouds){
      c.x += c.dx;
      c.y += c.dy;
      if(c.x < -c.r) c.x = w + c.r;
      if(c.x > w + c.r) c.x = -c.r;
      if(c.y < -c.r) c.y = h + c.r;
      if(c.y > h + c.r) c.y = -c.r;

function drawStars(t){
    ctx.save();
    ctx.globalCompositeOperation = "screen";
    for(const s of stars){
      const warp = Math.sin(t*.0006*s.z + s.x*.01) * 8;
      s.y += .08 * s.z;
      s.x += s.drift;
      if(s.y > h) s.y = 0;
      if(s.x < 0) s.x = w;
      if(s.x > w) s.x = 0;

ctx.fillStyle = `rgba(255,255,255,${s.a})`;
      ctx.beginPath();
      ctx.arc(s.x + warp, s.y, s.r, 0, Math.PI*2);
      ctx.fill();
    }
    ctx.restore();
  }

function drawSparks(t){
    ctx.save();
    ctx.globalCompositeOperation = "lighter";

for(let i=sparks.length-1;i>=0;i--){
      const p = sparks[i];

const dx = pointer.x - p.x;
      const dy = pointer.y - p.y;
      const dist = Math.sqrt(dx*dx+dy*dy) || 1;
      const force = clamp(120/dist,0,.9);

p.vx += (dx/dist) * force * .025;
      p.vy += (dy/dist) * force * .025;

p.x += p.vx;
      p.y += p.vy;
      p.life--;

const a = clamp(p.life / p.max,0,1);
      const color = p.side < 0
        ? `hsla(${p.hue},100%,70%,${a})`
        : `hsla(${p.hue},100%,58%,${a})`;

ctx.shadowColor = color;
      ctx.shadowBlur = 18;
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.arc(p.x,p.y,p.r*a,0,Math.PI*2);
      ctx.fill();

if(p.life <= 0 || p.x < -50 || p.x > w+50 || p.y < -80 || p.y > h+80){
        sparks.splice(i,1);
        addSpark(false);
      }
    }

ctx.restore();
  }

function drawSplitWorld(t){
    ctx.save();

const wave = Math.sin(t*.0012) * 28;

ctx.globalCompositeOperation = "screen";

const heaven = ctx.createLinearGradient(0,0,cx,0);
    heaven.addColorStop(0,"rgba(120,220,255,.13)");
    heaven.addColorStop(.55,"rgba(255,235,150,.10)");
    heaven.addColorStop(1,"rgba(255,255,255,.035)");
    ctx.fillStyle = heaven;
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(cx + wave,0);
    ctx.bezierCurveTo(cx-80,h*.25,cx+80,h*.5,cx-30,h);
    ctx.lineTo(0,h);
    ctx.closePath();
    ctx.fill();

const hell = ctx.createLinearGradient(cx,0,w,0);
    hell.addColorStop(0,"rgba(255,0,60,.045)");
    hell.addColorStop(.45,"rgba(255,64,0,.12)");
    hell.addColorStop(1,"rgba(120,0,0,.18)");
    ctx.fillStyle = hell;
    ctx.beginPath();
    ctx.moveTo(w,0);
    ctx.lineTo(cx + wave,0);
    ctx.bezierCurveTo(cx-80,h*.25,cx+80,h*.5,cx-30,h);
    ctx.lineTo(w,h);
    ctx.closePath();
    ctx.fill();

ctx.restore();
  }

function drawOrb(t){
    pointer.x += (pointer.tx - pointer.x) * .08;
    pointer.y += (pointer.ty - pointer.y) * .08;

const ox = cx + (pointer.x - cx) * .08;
    const oy = cy + (pointer.y - cy) * .08;
    const pulse = 1 + Math.sin(t*.004)*.04;
    const radius = Math.min(w,h) * .105 * pulse;

ctx.save();
    ctx.translate(ox,oy);

ctx.globalCompositeOperation = "screen";

for(const ring of rings){
      const rr = ring.r * pulse;
      const a = t * ring.speed + ring.phase;
      ctx.save();
      ctx.rotate(a);
      ctx.scale(1 + ring.wobble, 1 - ring.wobble*.55);

ctx.strokeStyle = ring.speed > 0
        ? "rgba(120,235,255,.32)"
        : "rgba(255,55,105,.30)";
      ctx.lineWidth = ring.width;
      ctx.shadowColor = ring.speed > 0 ? "#63e8ff" : "#ff005d";
      ctx.shadowBlur = 18;

ctx.beginPath();
      ctx.arc(0,0,rr,0,Math.PI*2);
      ctx.stroke();

for(let i=0;i<12;i++){
        const a2 = i * Math.PI * 2 / 12;
        const x = Math.cos(a2) * rr;
        const y = Math.sin(a2) * rr;
        ctx.beginPath();
        ctx.arc(x,y,2.4,0,Math.PI*2);
        ctx.fillStyle = i%2 ? "rgba(255,230,120,.75)" : "rgba(255,25,95,.65)";
        ctx.fill();
      }

ctx.restore();
    }

const outer = ctx.createRadialGradient(0,0,0,0,0,radius*2.8);
    outer.addColorStop(0,"rgba(255,255,255,.45)");
    outer.addColorStop(.25,"rgba(99,232,255,.22)");
    outer.addColorStop(.52,"rgba(255,0,90,.18)");
    outer.addColorStop(1,"rgba(0,0,0,0)");
    ctx.fillStyle = outer;
    ctx.beginPath();
    ctx.arc(0,0,radius*2.8,0,Math.PI*2);
    ctx.fill();

const orb = ctx.createRadialGradient(-radius*.35,-radius*.42,2,0,0,radius*1.1);
    orb.addColorStop(0,"#ffffff");
    orb.addColorStop(.18,"#ffeaa0");
    orb.addColorStop(.38,"#63e8ff");
    orb.addColorStop(.58,"#2d0a38");
    orb.addColorStop(.82,"#ff005d");
    orb.addColorStop(1,"#050006");

ctx.shadowColor = "#ff005d";
    ctx.shadowBlur = 55;
    ctx.fillStyle = orb;
    ctx.beginPath();
    ctx.arc(0,0,radius,0,Math.PI*2);
    ctx.fill();

ctx.lineWidth = 2;
    ctx.strokeStyle = "rgba(255,255,255,.55)";
    ctx.stroke();

ctx.font = `700 ${Math.max(22,radius*.34)}px Inter,Arial,sans-serif`;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillStyle = "rgba(255,255,255,.92)";
    ctx.shadowColor = "#63e8ff";
    ctx.shadowBlur = 22;
    ctx.fillText("SIMON",0,0);

ctx.restore();
  }

function drawLightning(t){
    if(Math.random() < .025){
      bolts.push({
        x: rand(w*.55,w*.98),
        y: rand(0,h*.45),
        life: 10,
        pts: Array.from({length:9},(_,i)=>({
          x: rand(-60,60) + i*rand(18,42),
          y: i*rand(28,62)
        }))
      });
    }

ctx.save();
    ctx.globalCompositeOperation = "lighter";
    for(let i=bolts.length-1;i>=0;i--){
      const b = bolts[i];
      b.life--;

ctx.strokeStyle = `rgba(255,60,92,${b.life/10})`;
      ctx.lineWidth = 2.5;
      ctx.shadowColor = "#ff004d";
      ctx.shadowBlur = 24;
      ctx.beginPath();
      ctx.moveTo(b.x,b.y);
      for(const p of b.pts) ctx.lineTo(b.x+p.x,b.y+p.y);
      ctx.stroke();

if(b.life <= 0) bolts.splice(i,1);
    }
    ctx.restore();
  }

function drawHeavenHellStructures(t){
    ctx.save();
    ctx.globalCompositeOperation = "screen";

for(let i=0;i<9;i++){
      const x = w*.12 + i*w*.035 + Math.sin(t*.001+i)*10;
      const y = h*.78 - Math.sin(t*.0014+i)*16;
      const height = 90 + i*18;
      ctx.fillStyle = `rgba(180,240,255,${.045+i*.006})`;
      ctx.strokeStyle = "rgba(255,244,180,.22)";
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(x,y);
      ctx.lineTo(x+22,y-height);
      ctx.lineTo(x+44,y);
      ctx.closePath();
      ctx.fill();
      ctx.stroke();
    }

for(let i=0;i<12;i++){
      const x = w*.58 + i*w*.035;
      const y = h*.82 + Math.sin(t*.001+i)*16;
      const height = 80 + Math.sin(i)*35;
      ctx.fillStyle = "rgba(255,25,60,.08)";
      ctx.strokeStyle = "rgba(255,80,20,.24)";
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(x,y);
      ctx.lineTo(x+18,y-height);
      ctx.lineTo(x+40,y);
      ctx.closePath();
      ctx.fill();
      ctx.stroke();
    }

ctx.restore();
  }

function drawVortex(t){
    ctx.save();
    ctx.translate(cx,cy);
    ctx.globalCompositeOperation = "screen";

for(let i=0;i<90;i++){
      const a = i*.22 + t*.0013;
      const r = 18 + i*5.7 + Math.sin(t*.002+i)*10;
      const x = Math.cos(a)*r;
      const y = Math.sin(a)*r*.62;
      const alpha = 1 - i/95;

ctx.fillStyle = i%2
        ? `rgba(99,232,255,${alpha*.16})`
        : `rgba(255,0,92,${alpha*.18})`;

ctx.beginPath();
      ctx.arc(x,y,2.3 + alpha*3,0,Math.PI*2);
      ctx.fill();
    }

ctx.restore();
  }

function drawScanlines(t){
    ctx.save();
    ctx.globalAlpha = .13;
    ctx.fillStyle = "#000";
    for(let y=0;y<h;y+=4){
      ctx.fillRect(0,y,w,1);
    }
    ctx.restore();

const flicker = .035 + Math.sin(t*.03)*.015;
    ctx.fillStyle = `rgba(255,255,255,${flicker})`;
    ctx.fillRect(0,0,w,h);
  }

function animate(t){
    background(t);
    drawSplitWorld(t);
    drawStars(t);
    drawHeavenHellStructures(t);
    drawGlyphRain(t);
    drawVortex(t);
    drawLightning(t);
    drawSparks(t);
    drawOrb(t);
    drawScanlines(t);

requestAnimationFrame(animate);
  }

window.addEventListener("resize", resize);

window.addEventListener("pointermove", e => {
    pointer.tx = e.clientX;
    pointer.ty = e.clientY;
    pointer.active = true;
  }, { passive:true });

window.addEventListener("pointerdown", e => {
    pointer.tx = e.clientX;
    pointer.ty = e.clientY;
    for(let i=0;i<55;i++) addSpark(false);
  }, { passive:true });

resize();
  requestAnimationFrame(animate);
})();
</script>

</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump