SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/downloads/20.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Watching • Crawling</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#04050f}
canvas{position:fixed;inset:0}
</style>
</head>
<body>
<canvas id="c"></canvas>

function resize(){
    DPR=Math.min(2,devicePixelRatio||1);
    W=innerWidth; H=innerHeight;
    c.width=W*DPR; c.height=H*DPR;
    ctx.setTransform(DPR,0,0,DPR,0,0);
  }
  addEventListener('resize',resize); resize();

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

/* ---------------- EYES ---------------- */
  const eyes=[];
  function buildEyes(){
    eyes.length=0;
    const density=Math.min(160,Math.floor(W*H/20000));
    for(let i=0;i<density;i++){
      eyes.push({
        x:rand(0,W),y:rand(0,H),
        r:rand(18,50),
        hue:rand(0,360),
        blink:rand(0,5),
        open:1,
        gaze:rand(0,Math.PI*2)
      });
    }
  }
  buildEyes();

/* ---------------- BUGS ---------------- */
  const bugs=[];
  function spawnBug(){
    bugs.push({
      x:rand(-50,W+50),
      y:rand(-50,H+50),
      vx:rand(-40,40),
      vy:rand(-40,40),
      size:rand(2,4),
      phase:rand(0,Math.PI*2),
      wing:rand(0,Math.PI*2),
      life:rand(6,14)
    });
  }

let bugTarget=0;

function drawEye(e,t){
    e.blink-=0.016;
    if(e.blink<0){e.blink=rand(2,6); e.open=0;}
    e.open+= (1-e.open)*0.08;

const lid=Math.max(0.05,e.open);
    ctx.save();
    ctx.translate(e.x,e.y);

ctx.globalAlpha=0.65;
    ctx.beginPath();
    ctx.ellipse(0,0,e.r*1.2,e.r*0.8*lid,0,0,Math.PI*2);
    ctx.fillStyle='rgba(255,255,255,0.15)';
    ctx.fill();

ctx.globalAlpha=0.9;
    ctx.beginPath();
    ctx.ellipse(0,0,e.r*0.55,e.r*0.55*lid,0,0,Math.PI*2);
    ctx.fillStyle=`hsla(${e.hue},80%,60%,0.9)`;
    ctx.fill();

ctx.fillStyle='black';
    ctx.beginPath();
    ctx.arc(
      Math.cos(e.gaze+t*0.2)*e.r*0.12,
      Math.sin(e.gaze+t*0.2)*e.r*0.12,
      e.r*0.18,0,Math.PI*2
    );
    ctx.fill();

ctx.restore();
  }

function drawBug(b,t){
    ctx.save();
    ctx.translate(b.x,b.y);

// wings
    ctx.globalAlpha=0.25;
    ctx.strokeStyle='white';
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(Math.cos(b.wing+t*10)*6,Math.sin(b.wing+t*10)*6);
    ctx.stroke();

ctx.globalAlpha=0.8;
    ctx.fillStyle='#111';
    ctx.beginPath();
    ctx.arc(0,0,b.size,0,Math.PI*2);
    ctx.fill();

ctx.restore();
  }

let last=performance.now();
  function frame(now){
    const dt=(now-last)/1000; last=now;
    const t=now/1000;

ctx.clearRect(0,0,W,H);

// dark breathing fog
    const g=ctx.createRadialGradient(W/2,H/2,0,W/2,H/2,Math.max(W,H));
    g.addColorStop(0,'rgba(30,30,60,0.12)');
    g.addColorStop(1,'rgba(0,0,0,0.9)');
    ctx.fillStyle=g;
    ctx.fillRect(0,0,W,H);

// eyes
    eyes.forEach(e=>drawEye(e,t));

// bugs density loop
    bugTarget = Math.floor((Math.sin(t*0.2)*0.5+0.5)*220);
    while(bugs.length<bugTarget) spawnBug();
    while(bugs.length>bugTarget) bugs.shift();

// update bugs
    for(let i=bugs.length-1;i>=0;i--){
      const b=bugs[i];
      b.life-=dt;
      b.wing+=dt*8;
      b.x+=b.vx*dt;
      b.y+=b.vy*dt;
      b.vx+=rand(-10,10)*dt;
      b.vy+=rand(-10,10)*dt;

drawBug(b,t);

if(b.life<0) bugs.splice(i,1);
    }

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

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump