SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/downloads/19.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>SIMON Orb City — Ships Fly Everywhere</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<style>
  html,body{margin:0;height:100%;background:#000;overflow:hidden}
  canvas{display:block}
</style>
</head>
<body>
<canvas id="c"></canvas>

Controls:
  - Click/tap: spawn a burst of ships at cursor
*/

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

let W=0,H=0,DPR=1;
function resize(){
  DPR = Math.max(1, Math.min(2, devicePixelRatio || 1));
  W = Math.floor(innerWidth);
  H = Math.floor(innerHeight);
  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);
}
addEventListener('resize', resize);
resize();

function rand(a,b){ return a + Math.random()*(b-a); }
function clamp(v,a,b){ return Math.max(a, Math.min(b,v)); }
function lerp(a,b,t){ return a + (b-a)*t; }

const scene = {
  orbX: 0, orbY: 0, orbR: 0,
  beamX: 0,
  horizonY: 0
};

function layout(){
  scene.orbX = W*0.5;
  scene.orbY = H*0.36;
  scene.orbR = Math.min(W,H)*0.26;
  scene.beamX = W*0.5;
  scene.horizonY = H*0.74;
}
layout();
addEventListener('resize', layout);

// ---------- Stars ----------
const stars = [];
function initStars(n=240){
  stars.length = 0;
  for(let i=0;i<n;i++){
    stars.push({
      x: Math.random()*W,
      y: Math.random()*H,
      r: Math.random()*1.6 + 0.3,
      a: Math.random()*0.65 + 0.1,
      tw: Math.random()*2 + 0.5
    });
  }
}
initStars();
addEventListener('resize', ()=>initStars(240));

// ---------- Ships ----------
const ships = [];
const MAX_SHIPS = 120;

function spawnShip(x=rand(0,W), y=rand(0,H), big=false){
  if(ships.length >= MAX_SHIPS) return;

const scale = big ? rand(1.2,2.0) : rand(0.55,1.35);

// Parametric “lane”: ships follow looping sinus paths with slight drift
  const baseSpeed = rand(0.45, 1.9) * (big ? 0.65 : 1.0);
  const lane = {
    // centerline around which ship weaves
    cx: rand(W*0.15, W*0.85),
    cy: rand(H*0.12, H*0.62),
    // amplitudes
    ax: rand(W*0.12, W*0.42),
    ay: rand(H*0.05, H*0.22),
    // frequencies
    fx: rand(0.18, 0.55),
    fy: rand(0.12, 0.42),
    // phase
    ph: rand(0, Math.PI*2),
    // drift down/up slowly so “all over”
    drift: rand(-0.06, 0.10)
  };

ships.push({
    x, y,
    vx: 0, vy: 0,
    t: rand(0, Math.PI*2),
    speed: baseSpeed,
    s: scale,
    hue: rand(195, 215),            // electric-blue range
    glow: rand(0.35, 0.85),
    lane,
    wob: rand(0, Math.PI*2),
    z: rand(0.2, 1.0)               // pseudo-depth; bigger z = closer
  });
}

function burstShips(x,y,count=10){
  for(let i=0;i<count;i++) spawnShip(x+rand(-18,18), y+rand(-18,18), Math.random()<0.22);
}

for(let i=0;i<42;i++) spawnShip(rand(0,W), rand(H*0.10, H*0.70), Math.random()<0.25);

addEventListener('pointerdown', (e)=>{
  burstShips(e.clientX, e.clientY, 14);
});

// ---------- Drawing helpers ----------
function drawBackground(){
  ctx.clearRect(0,0,W,H);

// deep space gradient
  const g = ctx.createLinearGradient(0,0,0,H);
  g.addColorStop(0, "#040713");
  g.addColorStop(0.55, "#061d3a");
  g.addColorStop(1, "#021022");
  ctx.fillStyle = g;
  ctx.fillRect(0,0,W,H);

// nebula haze
  const n = ctx.createRadialGradient(W*0.72, H*0.24, 0, W*0.72, H*0.24, Math.max(W,H)*0.7);
  n.addColorStop(0, "rgba(0,170,255,0.10)");
  n.addColorStop(0.35, "rgba(60,80,255,0.08)");
  n.addColorStop(1, "rgba(0,0,0,0)");
  ctx.fillStyle = n;
  ctx.fillRect(0,0,W,H);

// stars
  const t = performance.now()*0.001;
  ctx.save();
  for(const s of stars){
    const tw = 0.5 + 0.5*Math.sin(t*s.tw + s.x*0.01);
    ctx.globalAlpha = s.a * tw;
    ctx.fillStyle = "rgba(255,255,255,1)";
    ctx.fillRect(s.x, s.y, s.r, s.r);
  }
  ctx.restore();
}

function drawOrb(){
  const {orbX, orbY, orbR} = scene;

// outer glow
  ctx.save();
  ctx.globalAlpha = 0.95;
  const glow = ctx.createRadialGradient(orbX, orbY, orbR*0.15, orbX, orbY, orbR*1.25);
  glow.addColorStop(0, "rgba(0,190,255,0.18)");
  glow.addColorStop(0.55, "rgba(0,120,255,0.12)");
  glow.addColorStop(1, "rgba(0,0,0,0)");
  ctx.fillStyle = glow;
  ctx.beginPath();
  ctx.arc(orbX, orbY, orbR*1.22, 0, Math.PI*2);
  ctx.fill();

// orb body
  const body = ctx.createRadialGradient(orbX-orbR*0.22, orbY-orbR*0.28, orbR*0.1, orbX, orbY, orbR);
  body.addColorStop(0, "rgba(30,80,150,0.30)");
  body.addColorStop(0.35, "rgba(0,30,70,0.85)");
  body.addColorStop(1, "rgba(0,10,25,0.98)");
  ctx.fillStyle = body;
  ctx.beginPath();
  ctx.arc(orbX, orbY, orbR, 0, Math.PI*2);
  ctx.fill();

// etched lines + swirls
  ctx.globalAlpha = 0.35;
  ctx.strokeStyle = "rgba(0,210,255,0.85)";
  ctx.lineWidth = 1;

// meridian + equator glow
  ctx.globalAlpha = 0.55;
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(orbX, orbY-orbR);
  ctx.lineTo(orbX, orbY+orbR);
  ctx.stroke();

ctx.beginPath();
  ctx.ellipse(orbX, orbY, orbR*1.02, orbR*0.34, 0, 0, Math.PI*2);
  ctx.stroke();

// swirls
  ctx.globalAlpha = 0.26;
  ctx.lineWidth = 1.2;
  for(let k=0;k<8;k++){
    const rr = orbR * rand(0.18, 0.95);
    const a0 = rand(0, Math.PI*2);
    ctx.beginPath();
    for(let i=0;i<120;i++){
      const t = i/119;
      const a = a0 + t*rand(2.4,4.8);
      const r = rr * (0.55 + 0.45*Math.sin(t*Math.PI));
      const x = orbX + Math.cos(a)*r;
      const y = orbY + Math.sin(a)*r*0.78;
      if(i===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
    }
    ctx.stroke();
  }

// rim outline
  ctx.globalAlpha = 0.35;
  ctx.lineWidth = 2;
  ctx.strokeStyle = "rgba(120,190,255,0.35)";
  ctx.beginPath();
  ctx.arc(orbX, orbY, orbR, 0, Math.PI*2);
  ctx.stroke();
  ctx.restore();
}

function drawBeam(){
  const x = scene.beamX;
  const topY = 0;
  const botY = H;

ctx.save();
  // main beam
  const g = ctx.createLinearGradient(x, 0, x, H);
  g.addColorStop(0, "rgba(0,200,255,0.0)");
  g.addColorStop(0.20, "rgba(0,200,255,0.55)");
  g.addColorStop(0.60, "rgba(0,200,255,0.35)");
  g.addColorStop(1, "rgba(0,200,255,0.0)");
  ctx.fillStyle = g;
  ctx.fillRect(x-2, topY, 4, botY-topY);

// soft bloom
  const b = ctx.createLinearGradient(x, 0, x, H);
  b.addColorStop(0, "rgba(0,200,255,0.0)");
  b.addColorStop(0.25, "rgba(0,200,255,0.18)");
  b.addColorStop(0.70, "rgba(0,200,255,0.14)");
  b.addColorStop(1, "rgba(0,200,255,0.0)");
  ctx.fillStyle = b;
  ctx.fillRect(x-18, topY, 36, botY-topY);

// beam “ground flare”
  ctx.globalAlpha = 0.9;
  const flare = ctx.createRadialGradient(x, scene.horizonY, 0, x, scene.horizonY, Math.min(W,H)*0.22);
  flare.addColorStop(0, "rgba(0,220,255,0.55)");
  flare.addColorStop(0.35, "rgba(0,140,255,0.18)");
  flare.addColorStop(1, "rgba(0,0,0,0)");
  ctx.fillStyle = flare;
  ctx.beginPath();
  ctx.arc(x, scene.horizonY, Math.min(W,H)*0.22, 0, Math.PI*2);
  ctx.fill();
  ctx.restore();
}

function drawCity(){
  const baseY = scene.horizonY;
  ctx.save();

// city haze
  const haze = ctx.createLinearGradient(0, baseY-120, 0, H);
  haze.addColorStop(0, "rgba(0,200,255,0.0)");
  haze.addColorStop(0.45, "rgba(0,120,255,0.10)");
  haze.addColorStop(1, "rgba(0,40,90,0.55)");
  ctx.fillStyle = haze;
  ctx.fillRect(0, baseY-160, W, H-(baseY-160));

// skyline silhouettes
  ctx.globalAlpha = 0.95;
  for(let i=0;i<140;i++){
    const px = (i/139)*W;
    const w = rand(6, 22);
    const h = rand(20, 160) * (0.55 + 0.45*Math.pow(Math.sin((px/W)*Math.PI), 1.8));
    const x = px + rand(-12, 12);
    const y = baseY - h;

// main tower
    const grad = ctx.createLinearGradient(0, y, 0, baseY);
    grad.addColorStop(0, "rgba(0,140,255,0.35)");
    grad.addColorStop(1, "rgba(0,20,45,0.95)");
    ctx.fillStyle = grad;
    ctx.fillRect(x, y, w, h);

// spire
    if(Math.random() < 0.35){
      ctx.fillStyle = "rgba(0,180,255,0.18)";
      ctx.fillRect(x + w*0.45, y - rand(10, 80), w*0.10, rand(10, 80));
    }
  }

// ground plane lines
  ctx.globalAlpha = 0.20;
  ctx.strokeStyle = "rgba(0,220,255,0.35)";
  ctx.lineWidth = 1;
  for(let i=0;i<26;i++){
    const y = lerp(baseY+14, H, i/25);
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(W, y);
    ctx.stroke();
  }
  for(let i=0;i<22;i++){
    const x = lerp(W*0.08, W*0.92, i/21);
    ctx.beginPath();
    ctx.moveTo(x, baseY+12);
    ctx.lineTo(W*0.5, H);
    ctx.stroke();
  }

ctx.restore();
}

function drawShipSprite(x,y,scale,rot,hue,glow,depth){
  ctx.save();
  ctx.translate(x,y);
  ctx.rotate(rot);

const w = 58*scale*(0.85+depth*0.35);
  const h = 16*scale*(0.85+depth*0.25);

// hull glow
  ctx.globalAlpha = 0.22 + glow*0.20;
  ctx.fillStyle = `hsla(${hue},100%,65%,1)`;
  ctx.beginPath();
  ctx.ellipse(0, 0, w*0.70, h*0.95, 0, 0, Math.PI*2);
  ctx.fill();

// hull body
  ctx.globalAlpha = 0.85;
  const body = ctx.createLinearGradient(-w, 0, w, 0);
  body.addColorStop(0, "rgba(0,0,0,0.55)");
  body.addColorStop(0.45, `hsla(${hue},100%,55%,0.35)`);
  body.addColorStop(1, "rgba(0,0,0,0.75)");
  ctx.fillStyle = body;
  ctx.beginPath();
  ctx.ellipse(0, 0, w, h, 0, 0, Math.PI*2);
  ctx.fill();

// rim line
  ctx.globalAlpha = 0.55;
  ctx.strokeStyle = `hsla(${hue},100%,70%,0.75)`;
  ctx.lineWidth = 1.25;
  ctx.beginPath();
  ctx.ellipse(0, 0, w, h, 0, 0, Math.PI*2);
  ctx.stroke();

// underside arc
  ctx.globalAlpha = 0.35;
  ctx.beginPath();
  ctx.ellipse(0, h*0.35, w*0.62, h*0.55, 0, 0, Math.PI*2);
  ctx.stroke();

// tiny window lights
  ctx.globalAlpha = 0.22;
  ctx.fillStyle = `hsla(${hue},100%,70%,0.9)`;
  const dots = 6 + Math.floor(depth*6);
  for(let i=0;i<dots;i++){
    const px = lerp(-w*0.55, w*0.55, i/(dots-1));
    ctx.fillRect(px, -h*0.08, 2, 1);
  }

// motion streak (behind)
  ctx.globalAlpha = 0.12 + glow*0.10;
  const streak = ctx.createLinearGradient(-w*2.2,0,-w*0.2,0);
  streak.addColorStop(0, "rgba(0,0,0,0)");
  streak.addColorStop(1, `hsla(${hue},100%,65%,0.9)`);
  ctx.fillStyle = streak;
  ctx.beginPath();
  ctx.ellipse(-w*1.35, 0, w*0.85, h*0.55, 0, 0, Math.PI*2);
  ctx.fill();

ctx.restore();
}

// ---------- Animation ----------
function stepShips(){
  const t = performance.now()*0.001;

for(const s of ships){
    s.t += 0.010 * s.speed;

// lane motion
    const L = s.lane;
    const px = L.cx + Math.sin(s.t*L.fx + L.ph) * L.ax;
    const py = L.cy + Math.cos(s.t*L.fy + L.ph*0.7) * L.ay + (Math.sin(s.t*0.35 + L.ph) * 18);

// drift so lanes move around “all over”
    L.cy += L.drift;
    if(L.cy < H*0.08) L.drift = Math.abs(L.drift);
    if(L.cy > H*0.70) L.drift = -Math.abs(L.drift);

// steering (smooth)
    const dx = px - s.x;
    const dy = py - s.y;
    s.vx = lerp(s.vx, dx*0.02, 0.14);
    s.vy = lerp(s.vy, dy*0.02, 0.14);

// limit
    s.vx = clamp(s.vx, -6.5, 6.5);
    s.vy = clamp(s.vy, -4.5, 4.5);

s.x += s.vx;
    s.y += s.vy;

// wrap edges for infinite fly-by
    if(s.x < -120) s.x = W+120;
    if(s.x > W+120) s.x = -120;
    if(s.y < -120) s.y = H+120;
    if(s.y > H+120) s.y = -120;

// wobble rotation
    s.wob += 0.02;
  }

// keep density up
  if(ships.length < 36){
    for(let i=0;i<10;i++) spawnShip(rand(0,W), rand(H*0.10, H*0.70), Math.random()<0.25);
  }
  if(ships.length > MAX_SHIPS) ships.splice(0, ships.length - MAX_SHIPS);
}

function drawShips(){
  // depth sort: far first
  ships.sort((a,b)=>a.z-b.z);

for(const s of ships){
    const rot = Math.atan2(s.vy, s.vx) * 0.25 + Math.sin(s.wob)*0.06;
    const scale = s.s * (0.65 + s.z*0.7);

// fade behind orb a bit (so it feels layered)
    const dx = s.x - scene.orbX;
    const dy = s.y - scene.orbY;
    const d = Math.hypot(dx,dy);
    const behindOrb = d < scene.orbR*0.98 && s.y < scene.orbY + scene.orbR*0.55;
    const alpha = behindOrb ? 0.38 : 1.0;

ctx.save();
    ctx.globalAlpha = alpha;
    drawShipSprite(s.x, s.y, scale, rot, s.hue, s.glow, s.z);
    ctx.restore();
  }
}

function tick(){
  drawBackground();
  drawBeam();
  drawOrb();
  stepShips();
  drawShips();
  drawCity();
  requestAnimationFrame(tick);
}
tick();
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump