SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/downloads/6.html

<?php 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.0"/>
<title>SIMON — Clean 3D</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000}
canvas{display:block;position:fixed;inset:0}
</style>
</head>
<body>

<canvas id="c0"></canvas>
<canvas id="c1"></canvas>

let W, H, cx, cy;
function resize(){
  W = c0.width = c1.width  = innerWidth;
  H = c0.height= c1.height = innerHeight;
  cx = W/2; cy = H/2;
}
window.addEventListener('resize', resize);
resize();

// ═══════════════════════════════════════════
//  3D PROJECTION  (FOV perspective)
// ═══════════════════════════════════════════
const FOV = 480;
const CAM_Z = 0; // camera sits at z=0, scene extends forward

function proj(x, y, z){
  const dz  = z - CAM_Z + FOV;
  const sc  = (dz > 1) ? FOV / dz : 0;
  return { x: cx + x*sc, y: cy + y*sc, sc };
}

// 3D rotation helpers
function rotX(y,z,a){ return { y: y*Math.cos(a)-z*Math.sin(a), z: y*Math.sin(a)+z*Math.cos(a) }; }
function rotY(x,z,a){ return { x: x*Math.cos(a)+z*Math.sin(a), z:-x*Math.sin(a)+z*Math.cos(a) }; }
function rotZ(x,y,a){ return { x: x*Math.cos(a)-y*Math.sin(a), y: x*Math.sin(a)+y*Math.cos(a) }; }

// ═══════════════════════════════════════════
//  STAR FIELD  (true 3D tunnel)
// ═══════════════════════════════════════════
const NS = 1800;
const sx3= new Float32Array(NS);
const sy3= new Float32Array(NS);
const sz3= new Float32Array(NS);
const shue=new Float32Array(NS);

function spawnStar(i){
  sx3[i] = (Math.random()-.5)*1400;
  sy3[i] = (Math.random()-.5)*1000;
  sz3[i] = 200 + Math.random()*1200;
  shue[i]= 180 + Math.random()*60;
}
for(let i=0;i<NS;i++) spawnStar(i);

// ═══════════════════════════════════════════
//  3D RING CLASS
// ═══════════════════════════════════════════
class Ring3D {
  constructor(radius, tiltX, tiltY, spinSpeed, color, segments=120, dashes=false){
    this.radius    = radius;
    this.tiltX     = tiltX;
    this.tiltY     = tiltY;
    this.spinSpeed = spinSpeed;
    this.color     = color;
    this.segments  = segments;
    this.dashes    = dashes;
    this.angle     = Math.random()*Math.PI*2;
    this.particles = [];
    // place N particles evenly on the ring
    const np = Math.floor(radius*.4);
    for(let i=0;i<np;i++){
      this.particles.push({
        offset: Math.random()*Math.PI*2,
        speed: (Math.random()-.5)*.015,
        size:  1+Math.random()*1.5
      });
    }
  }

_point(a){
    // ring in XY plane, then tilt
    let x = Math.cos(a)*this.radius;
    let y = Math.sin(a)*this.radius;
    let z = 0;
    // tilt around X
    let ry = rotX(y,z,this.tiltX); y=ry.y; z=ry.z;
    // tilt around Y
    let rx = rotY(x,z,this.tiltY); x=rx.x; z=rx.z;
    // spin around Z over time
    let rz = rotZ(x,y,this.angle); x=rz.x; y=rz.y;
    return {x,y,z};
  }

draw(t){
    this.angle += this.spinSpeed;
    const [cr,cg,cb] = this.color;
    const segs = this.segments;
    const step = (Math.PI*2)/segs;

// collect projected points
    const pts = [];
    for(let i=0;i<=segs;i++){
      const a = i*step;
      const p3= this._point(a);
      const p2= proj(p3.x, p3.y, p3.z);
      pts.push({...p2, z:p3.z});
    }

// draw ring segments sorted by z (back to front)
    // For a ring, just draw as path with z-based alpha
    if(!this.dashes){
      for(let i=0;i<segs;i++){
        const p0=pts[i], p1=pts[i+1];
        if(p0.sc<=0||p1.sc<=0) continue;
        // depth-based brightness: back=dim, front=bright
        const d01 = Math.max(0, Math.min(1, (p0.z+400)/800));
        const alpha= .12 + (1-d01)*.6;
        const lw   = Math.max(.3, (1-d01*.5)*1.6);
        ctx.beginPath();
        ctx.moveTo(p0.x,p0.y);
        ctx.lineTo(p1.x,p1.y);
        ctx.strokeStyle=`rgba(${cr},${cg},${cb},${alpha})`;
        ctx.lineWidth=lw;
        ctx.stroke();
      }
    } else {
      // dashed tick marks
      const ticks=48;
      for(let i=0;i<ticks;i++){
        if(i%3===0) continue;
        const a0=(i/ticks)*Math.PI*2;
        const a1=a0+.04;
        const p3a=this._point(a0), p3b=this._point(a1);
        const pa=proj(p3a.x,p3a.y,p3a.z), pb=proj(p3b.x,p3b.y,p3b.z);
        const d01=Math.max(0,Math.min(1,(p3a.z+400)/800));
        const alpha=.2+(1-d01)*.7;
        ctx.beginPath();
        ctx.moveTo(pa.x,pa.y);
        ctx.lineTo(pb.x,pb.y);
        ctx.strokeStyle=`rgba(${cr},${cg},${cb},${alpha})`;
        ctx.lineWidth=1.2;
        ctx.stroke();
      }
    }

// ring particles
    this.particles.forEach(p=>{
      p.offset+=p.speed;
      const p3=this._point(p.offset);
      const p2=proj(p3.x,p3.y,p3.z);
      if(p2.sc<=0) return;
      const d01=Math.max(0,Math.min(1,(p3.z+400)/800));
      const alpha=.5+(1-d01)*.5;
      const sz=p.size*p2.sc*.8;
      glx.beginPath();
      glx.arc(p2.x,p2.y,Math.max(.3,sz),0,Math.PI*2);
      glx.fillStyle=`rgba(${cr},${cg},${cb},${alpha})`;
      glx.fill();
    });
  }
}

// ═══════════════════════════════════════════
//  ENERGY SPHERE  (central core)
// ═══════════════════════════════════════════
function drawSphere(t){
  const R = Math.min(W,H)*.11;

// layered glow — back to front
  const glows = [
    {r:R*4.5, a:.025, h:190},
    {r:R*2.8, a:.06,  h:195},
    {r:R*1.8, a:.12,  h:200},
    {r:R*1.1, a:.25,  h:210},
  ];
  glows.forEach(g=>{
    const gr = ctx.createRadialGradient(cx,cy,0,cx,cy,g.r);
    gr.addColorStop(0,   `hsla(${g.h},100%,80%,${g.a})`);
    gr.addColorStop(.5,  `hsla(${g.h},100%,60%,${g.a*.4})`);
    gr.addColorStop(1,   'transparent');
    ctx.fillStyle=gr;
    ctx.beginPath(); ctx.arc(cx,cy,g.r,0,Math.PI*2); ctx.fill();
  });

// sphere surface — arc grid lines in 3D
  const lat=8, lon=12;
  ctx.lineCap='round';

// latitude lines
  for(let li=1;li<lat;li++){
    const phi = (li/lat)*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)*Math.PI*2 + t*.4;
      const x3 = Math.cos(a)*xr;
      const z3 = Math.sin(a)*xr;
      const y3 = yr;
      const p  = proj(cx+x3, cy+y3, z3);
      const alpha = Math.max(0,(p.x>=0&&p.x<=W&&p.y>=0&&p.y<=H)?1:0);
      const d01 = Math.max(0,Math.min(1,(z3+R)/(R*2)));
      const a2  = (.05+(1-d01)*.3)*alpha;
      i===0?ctx.moveTo(p.x,p.y):ctx.lineTo(p.x,p.y);
    }
    ctx.strokeStyle=`rgba(0,220,255,.2)`;
    ctx.lineWidth=.7;
    ctx.stroke();
  }

// longitude lines
  for(let lo=0;lo<lon;lo++){
    const theta0 = (lo/lon)*Math.PI*2 + 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 x3  = Math.cos(theta0)*xr;
      const z3  = Math.sin(theta0)*xr;
      const y3  = yr;
      const p   = proj(cx+x3, cy+y3, z3);
      i===0?ctx.moveTo(p.x,p.y):ctx.lineTo(p.x,p.y);
    }
    ctx.strokeStyle=`rgba(0,200,255,.15)`;
    ctx.lineWidth=.6;
    ctx.stroke();
  }

// bright solid core
  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, 'rgba(100,240,255,.85)');
  core.addColorStop(.7, 'rgba(0,160,255,.4)');
  core.addColorStop(1,  'transparent');
  ctx.fillStyle=core;
  ctx.beginPath(); ctx.arc(cx,cy,R,0,Math.PI*2); ctx.fill();

// specular highlight
  const spec=ctx.createRadialGradient(cx-R*.35,cy-R*.38,0,cx-R*.2,cy-R*.2,R*.55);
  spec.addColorStop(0,'rgba(255,255,255,.7)');
  spec.addColorStop(1,'transparent');
  ctx.fillStyle=spec;
  ctx.beginPath(); ctx.arc(cx,cy,R,0,Math.PI*2); ctx.fill();
}

// ═══════════════════════════════════════════
//  VERTICAL ENERGY COLUMN
// ═══════════════════════════════════════════
function drawColumn(t){
  const R   = Math.min(W,H)*.11;
  const bW  = 2 + Math.sin(t*2.5)*.8;
  const pulse = .3 + Math.sin(t*3)*.15;

// top beam
  const gt=ctx.createLinearGradient(cx,cy-R,cx,0);
  gt.addColorStop(0,  `rgba(0,220,255,${pulse})`);
  gt.addColorStop(.6, `rgba(0,150,255,${pulse*.3})`);
  gt.addColorStop(1,  'transparent');
  ctx.fillStyle=gt;
  ctx.fillRect(cx-bW,0,bW*2,cy-R);

// bottom beam
  const gb=ctx.createLinearGradient(cx,cy+R,cx,H);
  gb.addColorStop(0,  `rgba(0,220,255,${pulse})`);
  gb.addColorStop(.6, `rgba(0,150,255,${pulse*.3})`);
  gb.addColorStop(1,  'transparent');
  ctx.fillStyle=gb;
  ctx.fillRect(cx-bW,cy+R,bW*2,H-(cy+R));

// column glow on gl layer
  glx.globalCompositeOperation='screen';
  const gg=glx.createLinearGradient(cx-20,cy,cx+20,cy);
  gg.addColorStop(0,'transparent');
  gg.addColorStop(.5,`rgba(0,200,255,${pulse*.18})`);
  gg.addColorStop(1,'transparent');
  glx.fillStyle=gg;
  glx.fillRect(cx-20,0,40,H);
}

// ═══════════════════════════════════════════
//  RINGS SETUP
// ═══════════════════════════════════════════
const R   = ()=>Math.min(W,H);
const rings=[
  new Ring3D(R()*.28,  Math.PI*.18, 0,          .006,  [0,200,255], 120),
  new Ring3D(R()*.38,  Math.PI*.32, Math.PI*.1, -.005, [0,150,255], 120),
  new Ring3D(R()*.22,  Math.PI*.5,  Math.PI*.25, .009, [0,240,200], 120, true),
  new Ring3D(R()*.46, -Math.PI*.12, Math.PI*.2,  .004, [80,180,255],120),
  new Ring3D(R()*.16,  Math.PI*.45,-Math.PI*.15,-.011, [0,255,220], 80, true),
];

// ═══════════════════════════════════════════
//  SCAN LINES (UI feel)
// ═══════════════════════════════════════════
function drawScanLines(){
  ctx.fillStyle='rgba(0,0,0,0)';
  for(let y=0;y<H;y+=4){
    ctx.fillStyle=`rgba(0,0,0,0.04)`;
    ctx.fillRect(0,y,W,1);
  }
}

// ═══════════════════════════════════════════
//  CORNER HUD
// ═══════════════════════════════════════════
function drawHUD(t){
  ctx.font='700 10px "Courier New"';
  ctx.letterSpacing='3px';
  ctx.fillStyle='rgba(0,200,255,.3)';
  ctx.fillText('GS // SIMON',24,28);
  ctx.fillText('STATUS: ONLINE',24,H-24);
  ctx.textAlign='right';
  const now=new Date();
  const pad=v=>String(v).padStart(2,'0');
  ctx.fillText(`${now.getFullYear()}.${pad(now.getMonth()+1)}.${pad(now.getDate())}  ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`,W-24,H-24);
  ctx.fillText('COGNITIVE LAYER v2',W-24,28);
  ctx.textAlign='left';
}

// ═══════════════════════════════════════════
//  MAIN LOOP
// ═══════════════════════════════════════════
let t=0;
function loop(){
  t+=0.012;

// ── trail fade ──
  ctx.fillStyle='rgba(0,4,14,0.18)';
  ctx.fillRect(0,0,W,H);

// ── glow layer clear ──
  glx.clearRect(0,0,W,H);
  glx.globalCompositeOperation='screen';

// ── draw scene ──
  drawStars(3.5 + Math.sin(t*.2)*.8);
  drawColumn(t);
  rings.forEach(r=>r.draw(t));
  drawSphere(t);
  drawHUD(t);

// ── composite glow onto main ──
  ctx.save();
  ctx.globalCompositeOperation='screen';
  ctx.drawImage(c1,0,0);
  ctx.restore();

requestAnimationFrame(loop);
}

// delayed start so ring radii use final W/H
setTimeout(()=>{
  rings.forEach((r,i)=>{
    const radii=[.28,.38,.22,.46,.16];
    r.radius=Math.min(W,H)*radii[i];
  });
  loop();
},80);
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump