SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/downloads/simon-intelligence-dynamic-interface.html

<?php
declare(strict_types=1);
header('Content-Type: text/html; charset=UTF-8');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#000008">
<title>SIMON — GAY STAR Interactive 3D</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
  cursor:none;
  overscroll-behavior:none;
}
body{
  font-family:"Courier New",monospace;
  touch-action:none;
}
canvas{
  display:block;
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
}
#hint{
  position:fixed;
  bottom:max(20px,env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  width:min(94vw,900px);
  font:600 9px/1.8 "Courier New",monospace;
  letter-spacing:.24em;
  color:rgba(0,220,255,.34);
  text-transform:uppercase;
  text-align:center;
  pointer-events:none;
  z-index:30;
  transition:opacity 1s;
}
#badge{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:40;
  pointer-events:none;
  color:rgba(255,255,255,.72);
  font:700 10px/1 "Courier New",monospace;
  letter-spacing:.45em;
  text-transform:uppercase;
  text-shadow:
    0 0 8px rgba(255,255,255,.5),
    0 0 22px rgba(255,0,200,.35);
  mix-blend-mode:screen;
}
@media (max-width:700px){
  #hint{font-size:8px;letter-spacing:.14em}
  #badge{font-size:8px;letter-spacing:.3em}
}
</style>
</head>
<body>
<canvas id="c0" aria-label="SIMON GAY STAR interactive canvas"></canvas>
<canvas id="c1" aria-hidden="true"></canvas>

<div id="badge">GAY STAR // SIMON</div>

<div id="hint">
  MOVE — TILT &nbsp;|&nbsp; CLICK — STAR BURST &nbsp;|&nbsp;
  SCROLL — ZOOM &nbsp;|&nbsp; RIGHT CLICK — COLOUR SHIFT &nbsp;|&nbsp;
  HOLD — GRAVITY PULL
</div>

const c0 = document.getElementById("c0");
const c1 = document.getElementById("c1");
const ctx = c0.getContext("2d", { alpha:false });
const glx = c1.getContext("2d");
const hint = document.getElementById("hint");

let W=0,H=0,cx=0,cy=0,dpr=1;
let FOV=480;
let camZ=0;
let scRX=0,scRY=0;
let tRX=0,tRY=0;
let gt2=0;
let lastFrame=performance.now();

const mouse={
  x:0,y:0,
  nx:0,ny:0,
  down:false,
  downTime:0,
  trail:[],
  targetZ:0,
  colorShift:0,
  initialized:false
};

const MAX_TRAIL=34;
const bursts=[];
const starFlashes=[];

function resize(){
  dpr=Math.min(window.devicePixelRatio||1,2);
  W=innerWidth;
  H=innerHeight;
  cx=W/2;
  cy=H/2;

[c0,c1].forEach(canvas=>{
    canvas.width=Math.round(W*dpr);
    canvas.height=Math.round(H*dpr);
    canvas.style.width=W+"px";
    canvas.style.height=H+"px";
  });

ctx.setTransform(dpr,0,0,dpr,0,0);
  glx.setTransform(dpr,0,0,dpr,0,0);

if(!mouse.initialized){
    mouse.x=cx;
    mouse.y=cy;
    mouse.initialized=true;
  }

updateRingSizes();
}

function updatePointer(x,y){
  mouse.x=x;
  mouse.y=y;
  mouse.nx=(x/W-.5)*2;
  mouse.ny=(y/H-.5)*2;
  mouse.trail.unshift({x,y,t:performance.now()});
  if(mouse.trail.length>MAX_TRAIL) mouse.trail.pop();
  hint.style.opacity="0";
}

window.addEventListener("resize",resize,{passive:true});

window.addEventListener("mousemove",e=>updatePointer(e.clientX,e.clientY),{passive:true});

window.addEventListener("mousedown",e=>{
  mouse.down=true;
  mouse.downTime=performance.now();
  if(e.button===0){
    spawnBurst(e.clientX,e.clientY);
    spawnStarFlash(e.clientX,e.clientY);
  }
});

window.addEventListener("mouseup",()=>{mouse.down=false});

window.addEventListener("mouseleave",()=>{mouse.down=false});

window.addEventListener("contextmenu",e=>{
  e.preventDefault();
  mouse.colorShift=(mouse.colorShift+60)%360;
  spawnBurst(mouse.x,mouse.y);
});

window.addEventListener("wheel",e=>{
  mouse.targetZ=clamp(mouse.targetZ+e.deltaY*.8,-400,600);
},{passive:true});

window.addEventListener("touchstart",e=>{
  const p=e.touches[0];
  if(!p)return;
  updatePointer(p.clientX,p.clientY);
  mouse.down=true;
  mouse.downTime=performance.now();
  spawnBurst(p.clientX,p.clientY);
  spawnStarFlash(p.clientX,p.clientY);
},{passive:true});

window.addEventListener("touchmove",e=>{
  const p=e.touches[0];
  if(!p)return;
  updatePointer(p.clientX,p.clientY);
},{passive:true});

window.addEventListener("touchend",()=>{mouse.down=false},{passive:true});

function proj(x,y,z){
  const rx=rotX(y,z,scRX);
  const ry=rotY(x,rx.z,scRY);
  const px=ry.x;
  const py=rx.y;
  const pz=ry.z;
  const dz=pz-camZ+FOV;
  const sc=dz>1?FOV/dz:0;
  return{x:cx+px*sc,y:cy+py*sc,sc,pz};
}

function spawnBurst(x,y){
  bursts.push({
    x,y,r:0,
    maxR:Math.min(W,H)*.62,
    born:performance.now(),
    hue:180+mouse.colorShift
  });
}

function spawnStarFlash(x,y){
  starFlashes.push({
    x,y,
    rot:Math.random()*TAU,
    size:10,
    life:1,
    hue:(315+mouse.colorShift)%360
  });
}

function drawBursts(){
  for(let i=bursts.length-1;i>=0;i--){
    const b=bursts[i];
    const prog=b.r/b.maxR;
    b.r+=(b.maxR-b.r)*.06+2;

if(b.r>=b.maxR){
      bursts.splice(i,1);
      continue;
    }

const alpha=(1-prog)*(1-prog)*.72;

ctx.beginPath();
    ctx.arc(b.x,b.y,b.r,0,TAU);
    ctx.strokeStyle=`hsla(${b.hue},100%,70%,${alpha})`;
    ctx.lineWidth=(1-prog)*3+.5;
    ctx.stroke();

if(b.r>20){
      ctx.beginPath();
      ctx.arc(b.x,b.y,b.r*.6,0,TAU);
      ctx.strokeStyle=`hsla(${b.hue+60},100%,85%,${alpha*.5})`;
      ctx.lineWidth=.8;
      ctx.stroke();
    }

glx.beginPath();
    glx.arc(b.x,b.y,b.r,0,TAU);
    glx.strokeStyle=`hsla(${b.hue},100%,70%,${alpha*.35})`;
    glx.lineWidth=(1-prog)*10;
    glx.stroke();
  }
}

function starPath(context,x,y,outerR,innerR,points,rotation){
  context.beginPath();
  for(let i=0;i<points*2;i++){
    const r=i%2===0?outerR:innerR;
    const a=rotation+i*Math.PI/points;
    const px=x+Math.cos(a)*r;
    const py=y+Math.sin(a)*r;
    if(i===0)context.moveTo(px,py);
    else context.lineTo(px,py);
  }
  context.closePath();
}

function drawStarFlashes(){
  for(let i=starFlashes.length-1;i>=0;i--){
    const s=starFlashes[i];
    s.life-=.025;
    s.size+=4.5;
    s.rot+=.05;

if(s.life<=0){
      starFlashes.splice(i,1);
      continue;
    }

ctx.save();
    ctx.globalCompositeOperation="screen";
    starPath(ctx,s.x,s.y,s.size,s.size*.44,8,s.rot);
    ctx.strokeStyle=`hsla(${s.hue},100%,78%,${s.life})`;
    ctx.lineWidth=1.5;
    ctx.stroke();
    ctx.restore();
  }
}

function drawCursor(t){
  const{x,y}=mouse;
  const hue=(180+mouse.colorShift+t*30)%360;
  const held=mouse.down?Math.min((performance.now()-mouse.downTime)/600,1):0;
  const R=10+held*18;

if(held>0){
    ctx.beginPath();
    ctx.arc(x,y,R*(1+held*.5),0,TAU);
    ctx.strokeStyle=`hsla(${hue},100%,70%,${held*.4})`;
    ctx.lineWidth=1;
    ctx.stroke();
  }

ctx.beginPath();
  ctx.arc(x,y,R,0,TAU);
  ctx.strokeStyle=`hsla(${hue},100%,70%,.85)`;
  ctx.lineWidth=1.2;
  ctx.stroke();

[0,Math.PI/2,Math.PI,Math.PI*1.5].forEach(a=>{
    ctx.beginPath();
    ctx.moveTo(x+Math.cos(a)*(R+3),y+Math.sin(a)*(R+3));
    ctx.lineTo(x+Math.cos(a)*(R+8),y+Math.sin(a)*(R+8));
    ctx.strokeStyle=`hsla(${hue},100%,80%,.75)`;
    ctx.lineWidth=1;
    ctx.stroke();
  });

ctx.beginPath();
  ctx.arc(x,y,1.8,0,TAU);
  ctx.fillStyle=`hsla(${hue},100%,95%,.95)`;
  ctx.fill();

const cg=glx.createRadialGradient(x,y,0,x,y,R*2.5);
  cg.addColorStop(0,`hsla(${hue},100%,80%,.22)`);
  cg.addColorStop(1,"transparent");
  glx.fillStyle=cg;
  glx.beginPath();
  glx.arc(x,y,R*2.5,0,TAU);
  glx.fill();

for(let i=1;i<mouse.trail.length;i++){
    const a=mouse.trail[i-1];
    const b=mouse.trail[i];
    const prog=i/mouse.trail.length;
    ctx.beginPath();
    ctx.moveTo(a.x,a.y);
    ctx.lineTo(b.x,b.y);
    ctx.strokeStyle=`hsla(${hue},100%,70%,${(1-prog)*.35})`;
    ctx.lineWidth=.8*(1-prog);
    ctx.stroke();
  }
}

const NS=1800;
const sx3=new Float32Array(NS);
const sy3=new Float32Array(NS);
const sz3=new Float32Array(NS);
const shue=new Float32Array(NS);

function spawnStarParticle(i){
  sx3[i]=(Math.random()-.5)*1400;
  sy3[i]=(Math.random()-.5)*1000;
  sz3[i]=100+Math.random()*1100;
  shue[i]=180+Math.random()*180;
}

for(let i=0;i<NS;i++)spawnStarParticle(i);

function drawStars(){
  const held=mouse.down?Math.min((performance.now()-mouse.downTime)/600,1):0;
  const spd=3.5+held*8;
  const mx3d=(mouse.x-cx)*.6;
  const my3d=(mouse.y-cy)*.6;

for(let i=0;i<NS;i++){
    sz3[i]-=spd;
    sx3[i]+=(mx3d-sx3[i])*.0008;
    sy3[i]+=(my3d-sy3[i])*.0008;

if(sz3[i]<1){
      spawnStarParticle(i);
      continue;
    }

const p=proj(sx3[i],sy3[i],sz3[i]);
    if(p.sc<=0||p.x<-10||p.x>W+10||p.y<-10||p.y>H+10)continue;

const size=Math.max(.25,p.sc*1.6);
    const alpha=Math.min(1,(1-sz3[i]/1200)*1.4);
    const h=(shue[i]+mouse.colorShift)%360;

ctx.beginPath();
    ctx.arc(p.x,p.y,size,0,TAU);
    ctx.fillStyle=`hsla(${h},90%,85%,${alpha*.68})`;
    ctx.fill();
  }
}

class Ring3D{
  constructor(radius,tx,ty,spd,hue,segs=120,dashed=false){
    this.radius=radius;
    this.tx=tx;
    this.ty=ty;
    this.spd=spd;
    this.hue=hue;
    this.segs=segs;
    this.dashed=dashed;
    this.angle=Math.random()*TAU;
    this.parts=[];

const np=Math.floor(radius*.35);
    for(let i=0;i<np;i++){
      this.parts.push({
        off:Math.random()*TAU,
        spd:(Math.random()-.5)*.018,
        sz:1+Math.random()*1.8
      });
    }
  }

point(a){
    let x=Math.cos(a)*this.radius;
    let y=Math.sin(a)*this.radius;
    let z=0;

let rx=rotX(y,z,this.tx);
    y=rx.y;z=rx.z;

let ry=rotY(x,z,this.ty);
    x=ry.x;z=ry.z;

let rmx=rotX(y,z,mouse.ny*.35);
    y=rmx.y;z=rmx.z;

let rmy=rotY(x,z,mouse.nx*.35);
    x=rmy.x;z=rmy.z;

const rz=rotZ(x,y,this.angle);
    return{x:rz.x,y:rz.y,z};
  }

draw(){
    this.angle+=this.spd;
    const hue=(this.hue+mouse.colorShift)%360;
    const segs=this.dashed?48:this.segs;
    const step=TAU/segs;
    const pts=[];

for(let i=0;i<=segs;i++){
      const p3=this.point(i*step);
      pts.push({...proj(p3.x,p3.y,p3.z),z:p3.z});
    }

if(!this.dashed){
      for(let i=0;i<segs;i++){
        const p0=pts[i];
        const p1=pts[i+1];
        if(p0.sc<=0||p1.sc<=0)continue;

ctx.beginPath();
        ctx.moveTo(pa.x,pa.y);
        ctx.lineTo(pb.x,pb.y);
        ctx.strokeStyle=`hsla(${hue},100%,70%,${.18+(1-depth)*.7})`;
        ctx.lineWidth=1.1;
        ctx.stroke();
      }
    }

this.parts.forEach(p=>{
      p.off+=p.spd;
      const p3=this.point(p.off);
      const p2=proj(p3.x,p3.y,p3.z);
      if(p2.sc<=0)return;

const depth=clamp((p3.z+400)/800,0,1);
      glx.beginPath();
      glx.arc(p2.x,p2.y,Math.max(.3,p.sz*p2.sc*.7),0,TAU);
      glx.fillStyle=`hsla(${hue+40},100%,85%,${.4+(1-depth)*.6})`;
      glx.fill();
    });
  }
}

const rings=[
  new Ring3D(180, Math.PI*.18, 0, .006, 190, 120, false),
  new Ring3D(240, Math.PI*.32, Math.PI*.1, -.005, 220, 120, false),
  new Ring3D(140, Math.PI*.5, Math.PI*.25, .009, 155, 80, true),
  new Ring3D(290,-Math.PI*.12,Math.PI*.2,.004,275,120,false),
  new Ring3D(100,Math.PI*.45,-Math.PI*.15,-.011,320,70,true)
];

function updateRingSizes(){
  const base=Math.min(W,H);
  const radii=[.28,.38,.22,.46,.16];
  rings.forEach((ring,i)=>{
    ring.radius=base*radii[i];
  });
}

function drawSphere(t){
  const R=Math.min(W,H)*.11;
  const hue=(190+mouse.colorShift)%360;

[
    {r:R*4.5,a:.025},
    {r:R*2.8,a:.06},
    {r:R*1.8,a:.12},
    {r:R*1.1,a:.25}
  ].forEach(g=>{
    const gr=ctx.createRadialGradient(cx,cy,0,cx,cy,g.r);
    gr.addColorStop(0,`hsla(${hue},100%,80%,${g.a})`);
    gr.addColorStop(.5,`hsla(${hue},100%,60%,${g.a*.4})`);
    gr.addColorStop(1,"transparent");
    ctx.fillStyle=gr;
    ctx.beginPath();
    ctx.arc(cx,cy,g.r,0,TAU);
    ctx.fill();
  });

for(let li=1;li<8;li++){
    const phi=li/8*Math.PI-Math.PI/2;
    const yr=Math.sin(phi)*R;
    const xr=Math.cos(phi)*R;

ctx.beginPath();
    for(let i=0;i<=80;i++){
      const a=i/80*TAU+t*.4;
      const p=proj(Math.cos(a)*xr,yr,Math.sin(a)*xr);
      if(i===0)ctx.moveTo(p.x,p.y);
      else ctx.lineTo(p.x,p.y);
    }
    ctx.strokeStyle=`hsla(${hue},100%,70%,.18)`;
    ctx.lineWidth=.65;
    ctx.stroke();
  }

for(let lo=0;lo<12;lo++){
    const th=lo/12*TAU+t*.4;

ctx.beginPath();
    for(let i=0;i<=60;i++){
      const phi=i/60*Math.PI-Math.PI/2;
      const xr=Math.cos(phi)*R;
      const yr=Math.sin(phi)*R;
      const p=proj(Math.cos(th)*xr,yr,Math.sin(th)*xr);
      if(i===0)ctx.moveTo(p.x,p.y);
      else ctx.lineTo(p.x,p.y);
    }
    ctx.strokeStyle=`hsla(${hue},100%,65%,.14)`;
    ctx.lineWidth=.6;
    ctx.stroke();
  }

const core=ctx.createRadialGradient(cx-R*.25,cy-R*.25,R*.05,cx,cy,R);
  core.addColorStop(0,"rgba(255,255,255,.95)");
  core.addColorStop(.3,`hsla(${hue+10},100%,85%,.85)`);
  core.addColorStop(.7,`hsla(${hue},100%,60%,.42)`);
  core.addColorStop(1,"transparent");
  ctx.fillStyle=core;
  ctx.beginPath();
  ctx.arc(cx,cy,R,0,TAU);
  ctx.fill();
}

function drawGayStar(t){
  const base=Math.min(W,H);
  const pulse=1+Math.sin(t*3.2)*.055;
  const outer=base*.078*pulse;
  const inner=outer*.43;
  const hueShift=mouse.colorShift;
  const rotation=-Math.PI/2+t*.18+mouse.nx*.18;

ctx.save();
  ctx.translate(cx,cy);

const aura=ctx.createRadialGradient(0,0,0,0,0,outer*3.2);
  aura.addColorStop(0,"rgba(255,255,255,.24)");
  aura.addColorStop(.2,`hsla(${315+hueShift},100%,70%,.18)`);
  aura.addColorStop(.48,`hsla(${190+hueShift},100%,60%,.1)`);
  aura.addColorStop(1,"transparent");
  ctx.fillStyle=aura;
  ctx.beginPath();
  ctx.arc(0,0,outer*3.2,0,TAU);
  ctx.fill();

const rainbow=ctx.createConicGradient(rotation,0,0);
  rainbow.addColorStop(0/6,"#ff2d55");
  rainbow.addColorStop(1/6,"#ff9f0a");
  rainbow.addColorStop(2/6,"#ffd60a");
  rainbow.addColorStop(3/6,"#30d158");
  rainbow.addColorStop(4/6,"#64d2ff");
  rainbow.addColorStop(5/6,"#5e5ce6");
  rainbow.addColorStop(1,"#ff2dff");

starPath(ctx,0,0,outer,inner,8,rotation);
  ctx.fillStyle=rainbow;
  ctx.shadowColor=`hsla(${315+hueShift},100%,70%,.9)`;
  ctx.shadowBlur=28;
  ctx.fill();

ctx.shadowBlur=0;
  ctx.lineWidth=1.5;
  ctx.strokeStyle="rgba(255,255,255,.95)";
  ctx.stroke();

ctx.globalCompositeOperation="screen";
  starPath(ctx,0,0,outer*.68,inner*.58,8,-rotation*.82);
  ctx.strokeStyle=`hsla(${190+hueShift},100%,86%,.7)`;
  ctx.lineWidth=1;
  ctx.stroke();

ctx.rotate(Math.sin(t*.9)*.015);
  ctx.textAlign="center";
  ctx.textBaseline="middle";
  ctx.font=`900 ${Math.max(12,outer*.2)}px Arial Black,Impact,sans-serif`;
  ctx.letterSpacing="1px";
  ctx.fillStyle="rgba(255,255,255,.96)";
  ctx.shadowColor="rgba(255,255,255,.9)";
  ctx.shadowBlur=10;
  ctx.fillText("GAY",0,-outer*.10);

ctx.font=`900 ${Math.max(10,outer*.17)}px Arial Black,Impact,sans-serif`;
  ctx.fillStyle="rgba(255,255,255,.92)";
  ctx.fillText("STAR",0,outer*.14);

ctx.restore();

glx.save();
  glx.translate(cx,cy);
  glx.rotate(rotation);
  glx.globalCompositeOperation="screen";

for(let i=0;i<8;i++){
    glx.rotate(TAU/8);
    const grad=glx.createLinearGradient(0,0,outer*2.5,0);
    grad.addColorStop(0,`hsla(${i*45+hueShift},100%,75%,.18)`);
    grad.addColorStop(1,"transparent");
    glx.fillStyle=grad;
    glx.fillRect(outer*.6,-1.2,outer*2.2,2.4);
  }

glx.restore();
}

function drawColumn(t){
  const R=Math.min(W,H)*.11;
  const bX=lerp(cx,mouse.x,.15);
  const bW=2+Math.sin(t*2.5)*.8;
  const pulse=.28+Math.sin(t*3)*.14;
  const hue=(190+mouse.colorShift)%360;

const gt=ctx.createLinearGradient(bX,cy-R,bX,0);
  gt.addColorStop(0,`hsla(${hue},100%,70%,${pulse})`);
  gt.addColorStop(1,"transparent");
  ctx.fillStyle=gt;
  ctx.fillRect(bX-bW,0,bW*2,cy-R);

const gb=ctx.createLinearGradient(bX,cy+R,bX,H);
  gb.addColorStop(0,`hsla(${hue},100%,70%,${pulse})`);
  gb.addColorStop(1,"transparent");
  ctx.fillStyle=gb;
  ctx.fillRect(bX-bW,cy+R,bW*2,H-cy-R);

if(Math.abs(mouse.x-cx)>10||Math.abs(mouse.y-cy)>10){
    const gH=ctx.createLinearGradient(cx,cy,mouse.x,mouse.y);
    gH.addColorStop(0,`hsla(${hue},100%,70%,${pulse*.6})`);
    gH.addColorStop(1,"transparent");
    ctx.strokeStyle=gH;
    ctx.lineWidth=1;
    ctx.setLineDash([4,8]);
    ctx.beginPath();
    ctx.moveTo(cx,cy);
    ctx.lineTo(mouse.x,mouse.y);
    ctx.stroke();
    ctx.setLineDash([]);
  }

const gg=glx.createLinearGradient(bX-18,cy,bX+18,cy);
  gg.addColorStop(0,"transparent");
  gg.addColorStop(.5,`hsla(${hue},100%,70%,${pulse*.15})`);
  gg.addColorStop(1,"transparent");
  glx.fillStyle=gg;
  glx.fillRect(bX-18,0,36,H);
}

function drawHUD(){
  ctx.save();
  ctx.font='700 9px "Courier New"';
  const hue=(180+mouse.colorShift)%360;
  ctx.fillStyle=`hsla(${hue},80%,70%,.34)`;

ctx.fillText("GS // SIMON INTELLIGENCE",24,26);
  ctx.fillText("STATUS: GAY STAR ONLINE",24,H-22);

const n=new Date();
  const p=v=>String(v).padStart(2,"0");

ctx.textAlign="right";
  ctx.fillText(
    `${n.getFullYear()}.${p(n.getMonth()+1)}.${p(n.getDate())}  ${p(n.getHours())}:${p(n.getMinutes())}:${p(n.getSeconds())}`,
    W-24,H-22
  );
  ctx.fillText("QUEER COSMIC LAYER v3",W-24,26);

ctx.fillStyle=`hsla(${hue},80%,70%,.2)`;
  ctx.fillText(`X:${mouse.x|0}  Y:${mouse.y|0}`,W-24,H-40);

ctx.restore();
}

function applyGravity(){
  if(!mouse.down)return;

const held=Math.min((performance.now()-mouse.downTime)/600,1);
  if(held<.05)return;

for(let i=0;i<NS;i++){
    const p=proj(sx3[i],sy3[i],sz3[i]);
    const dx=mouse.x-p.x;
    const dy=mouse.y-p.y;
    const d=Math.hypot(dx,dy)||1;
    const force=held*12/d;
    sx3[i]+=dx*force*.015;
    sy3[i]+=dy*force*.015;
  }
}

function loop(now){
  const dt=Math.min((now-lastFrame)/16.6667,2);
  lastFrame=now;
  gt2+=.012*dt;

tRX=mouse.ny*.38;
  tRY=mouse.nx*.38;
  scRX=lerp(scRX,tRX,.04);
  scRY=lerp(scRY,tRY,.04);
  camZ=lerp(camZ,mouse.targetZ,.06);

ctx.fillStyle="rgba(0,4,14,.18)";
  ctx.fillRect(0,0,W,H);

glx.clearRect(0,0,W,H);
  glx.globalCompositeOperation="screen";
  ctx.lineCap="round";

applyGravity();
  drawStars();
  drawColumn(gt2);
  rings.forEach(r=>r.draw());
  drawSphere(gt2);
  drawGayStar(gt2);
  drawBursts();
  drawStarFlashes();
  drawHUD();
  drawCursor(gt2);

ctx.save();
  ctx.globalCompositeOperation="screen";
  ctx.drawImage(c1,0,0,W,H);
  ctx.restore();

requestAnimationFrame(loop);
}

resize();
setTimeout(()=>requestAnimationFrame(loop),80);
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump