SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/downloads/22.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GS · Cosmic Color Merge</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:#000; overflow:hidden; width:100vw; height:100vh; }

/* Dual-canvas bloom trick: blurred copy layered on top */
  #glow {
    position:fixed; inset:0; pointer-events:none;
    filter: blur(14px) brightness(1.4);
    opacity: 0.55;
    mix-blend-mode: screen;
  }
  #main { position:fixed; inset:0; }

#ui {
    position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
    display:flex; gap:10px; z-index:20;
  }
  button {
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.18);
    color:#fff; padding:7px 16px; border-radius:20px;
    cursor:pointer; font-size:12px; letter-spacing:1.5px;
    font-family:sans-serif; backdrop-filter:blur(8px);
    transition:all .2s;
  }
  button:hover { background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.4); }
  button.active { background:rgba(255,255,255,0.22); border-color:#fff; }

#hint {
    position:fixed; top:14px; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,0.28); font:11px/1 sans-serif;
    letter-spacing:2.5px; pointer-events:none; white-space:nowrap;
  }
</style>
</head>
<body>

<canvas id="glow"></canvas>

<canvas id="main"></canvas>

<div id="hint">DRAG · SCROLL · HOVER</div>
<div id="ui">
  <button id="bDream" class="active">DREAM</button>
  <button id="bVortex">VORTEX</button>
  <button id="bPulse">PULSE</button>
  <button id="bNova">NOVA</button>
</div>

function makeRenderer(id) {
  const r = new THREE.WebGLRenderer({ canvas: document.getElementById(id), antialias: true, alpha: false });
  r.setPixelRatio(Math.min(devicePixelRatio, 2));
  r.setSize(W, H);
  r.setClearColor(0x000000, 1);
  return r;
}
const rendMain = makeRenderer('main');
const rendGlow = makeRenderer('glow');

const scene  = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(68, W / H, 0.1, 200);
camera.position.set(0, 0, 6.5);

// ═══════════════════════════════════════════════════════════════
//  HSL → RGB helper
// ═══════════════════════════════════════════════════════════════
function hsl(h, s, l) {
  h = ((h % 360) + 360) % 360;
  s /= 100; l /= 100;
  const c = (1 - Math.abs(2*l - 1)) * s;
  const x = c * (1 - Math.abs((h/60) % 2 - 1));
  const m = l - c/2;
  let r=0,g=0,b=0;
  if      (h<60)  { r=c; g=x; b=0; }
  else if (h<120) { r=x; g=c; b=0; }
  else if (h<180) { r=0; g=c; b=x; }
  else if (h<240) { r=0; g=x; b=c; }
  else if (h<300) { r=x; g=0; b=c; }
  else            { r=c; g=0; b=x; }
  return new THREE.Color(r+m, g+m, b+m);
}

// ═══════════════════════════════════════════════════════════════
//  MODE config
// ═══════════════════════════════════════════════════════════════
const MODES = {
  DREAM:  { speed:0.22, ribbons:13, twist:1.1, radius:0.85, hueSpan:320 },
  VORTEX: { speed:0.55, ribbons:16, twist:2.2, radius:0.65, hueSpan:360 },
  PULSE:  { speed:0.18, ribbons:10, twist:0.7, radius:1.1,  hueSpan:280 },
  NOVA:   { speed:0.80, ribbons:18, twist:3.0, radius:0.5,  hueSpan:360 },
};
let modeName = 'DREAM';
let mode = MODES.DREAM;

// ═══════════════════════════════════════════════════════════════
//  RIBBON SYSTEM
// ═══════════════════════════════════════════════════════════════
const PTS = 160;
let ribbons = [];

function clearRibbons() {
  ribbons.forEach(r => { scene.remove(r.mesh); r.geo.dispose(); r.mat.dispose(); });
  ribbons = [];
}

function buildRibbons() {
  clearRibbons();
  const N = mode.ribbons;
  for (let ri = 0; ri < N; ri++) {
    const pos = new Float32Array(PTS * 2 * 3);
    const col = new Float32Array(PTS * 2 * 3);
    const idx = [];
    for (let i = 0; i < PTS - 1; i++) {
      const a=i*2, b=i*2+1, c=i*2+2, d=i*2+3;
      idx.push(a,b,c, b,d,c);
    }
    const geo = new THREE.BufferGeometry();
    geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
    geo.setAttribute('color',    new THREE.BufferAttribute(col, 3));
    geo.setIndex(idx);

const mat = new THREE.MeshBasicMaterial({
      vertexColors:true, side:THREE.DoubleSide,
      transparent:true, opacity:0.78,
      blending:THREE.AdditiveBlending, depthWrite:false
    });
    const mesh = new THREE.Mesh(geo, mat);
    scene.add(mesh);

// Each ribbon gets its own hue offset so they cover the full spectrum
    const hueStart = (ri / N) * 360;
    ribbons.push({ geo, mat, mesh, ri, N, hueStart });
  }
}

buildRibbons();

// ═══════════════════════════════════════════════════════════════
//  PARTICLES
// ═══════════════════════════════════════════════════════════════
let particleMesh;
function buildParticles() {
  if (particleMesh) { scene.remove(particleMesh); particleMesh.geometry.dispose(); }
  const PC = 3000;
  const geo = new THREE.BufferGeometry();
  const pp = new Float32Array(PC*3), pc = new Float32Array(PC*3);
  for (let i = 0; i < PC; i++) {
    const r = 2.2 + Math.random()*4.5;
    const t = Math.random()*Math.PI*2, f = Math.random()*Math.PI;
    pp[i*3]   = r*Math.sin(f)*Math.cos(t);
    pp[i*3+1] = r*Math.sin(f)*Math.sin(t);
    pp[i*3+2] = r*Math.cos(f);
    const c = hsl(Math.random()*360, 100, 65);
    pc[i*3]=c.r; pc[i*3+1]=c.g; pc[i*3+2]=c.b;
  }
  geo.setAttribute('position', new THREE.BufferAttribute(pp,3));
  geo.setAttribute('color',    new THREE.BufferAttribute(pc,3));
  particleMesh = new THREE.Points(geo, new THREE.PointsMaterial({
    size:0.038, vertexColors:true, transparent:true,
    opacity:0.5, blending:THREE.AdditiveBlending, depthWrite:false
  }));
  scene.add(particleMesh);
}
buildParticles();

// ═══════════════════════════════════════════════════════════════
//  ORBIT  (manual, no lib)
// ═══════════════════════════════════════════════════════════════
let drag=false, pMouse={x:0,y:0};
let sph={theta:0, phi:Math.PI/2, r:6.5};
let mx=0, my=0;

// Touch
let lt=null;
const mc = document.getElementById('main');
mc.addEventListener('touchstart',e=>{lt=e.touches[0]; drag=true;});
mc.addEventListener('touchend',  ()=>drag=false);
mc.addEventListener('touchmove', e=>{
  if(!drag)return;
  const t=e.touches[0];
  sph.theta-=(t.clientX-lt.clientX)*0.005;
  sph.phi=Math.max(.08,Math.min(Math.PI-.08,sph.phi-(t.clientY-lt.clientY)*0.005));
  lt=t; e.preventDefault();
},{passive:false});

function orbitStep() {
  const autoSpeed = modeName==='NOVA' ? 0.008 : modeName==='VORTEX' ? 0.005 : 0.003;
  if(!drag) sph.theta += autoSpeed;
  camera.position.set(
    sph.r*Math.sin(sph.phi)*Math.sin(sph.theta),
    sph.r*Math.cos(sph.phi),
    sph.r*Math.sin(sph.phi)*Math.cos(sph.theta)
  );
  camera.lookAt(0,0,0);
}

// ═══════════════════════════════════════════════════════════════
//  UPDATE RIBBONS  — full-spectrum hue sweep with merged colors
// ═══════════════════════════════════════════════════════════════
function updateRibbons(t) {
  const { speed, twist, radius, hueSpan } = mode;
  const pulseSpeed = modeName==='PULSE' ? Math.abs(Math.sin(t*0.9))*1.8+0.2 : 1;
  const novaScale  = modeName==='NOVA'  ? 1+Math.sin(t*2)*0.3 : 1;

ribbons.forEach(({ geo, ri, N, hueStart }) => {
    const pos = geo.attributes.position.array;
    const col = geo.attributes.color.array;

const angleOff = (ri/N)*Math.PI*2;
    const spd      = speed * pulseSpeed * (0.8 + ri*0.03);
    const tw       = twist + Math.sin(ri)*0.2;
    const rad      = radius * novaScale * (0.8 + (ri%4)*0.15);
    const wid      = 0.055 + Math.abs(Math.sin(ri*0.7))*0.035;

for (let p = 0; p < PTS; p++) {
      const frac  = p / (PTS-1);

// Full spectrum sweep: hueStart → hueStart + hueSpan across the ribbon
      // This is the key "color merge" — each ribbon covers a different hue range
      // and with additive blending, overlaps create new merged tones
      const hue   = hueStart + frac * hueSpan;
      const sat   = 100;
      const lit   = 58 + Math.sin(frac*Math.PI)*10; // brighter in middle
      const col3  = hsl(hue, sat, lit);

const angle = angleOff + frac*Math.PI*4*tw + t*spd;
      const lift  = (frac-.5)*4.2;
      const sway  = Math.sin(t*0.7 + ri + frac*Math.PI*2.5) * 0.28;
      const breathe = modeName==='PULSE' ? Math.sin(t*1.1+ri*0.5)*0.25 : 0;
      const r     = rad + sway + breathe + mx*0.4*frac;

const cx = r*Math.cos(angle);
      const cy = lift + my*0.55*(frac-.5);
      const cz = r*Math.sin(angle);
      const nx = -Math.sin(angle), nz = Math.cos(angle);

// Edge fade (alpha envelope)
      const alp = Math.pow(Math.sin(frac*Math.PI), 0.7) * 0.92 + 0.08;

const cr = col3.r*alp, cg = col3.g*alp, cb3 = col3.b*alp;

const i0 = p*2*3, i1 = (p*2+1)*3;
      pos[i0]  = cx+nx*wid; pos[i0+1]=cy; pos[i0+2]=cz+nz*wid;
      pos[i1]  = cx-nx*wid; pos[i1+1]=cy; pos[i1+2]=cz-nz*wid;
      col[i0]  = cr; col[i0+1]=cg; col[i0+2]=cb3;
      col[i1]  = cr; col[i1+1]=cg; col[i1+2]=cb3;
    }
    geo.attributes.position.needsUpdate = true;
    geo.attributes.color.needsUpdate    = true;
  });

// Slowly rotate particle cloud
  if(particleMesh) {
    particleMesh.rotation.y = t * 0.035 * pulseSpeed;
    particleMesh.rotation.x = t * 0.018;
  }
}

// ═══════════════════════════════════════════════════════════════
//  MODE BUTTONS
// ═══════════════════════════════════════════════════════════════
['Dream','Vortex','Pulse','Nova'].forEach(name => {
  const btn = document.getElementById('b'+name);
  btn.addEventListener('click', () => {
    modeName = name.toUpperCase();
    mode = MODES[modeName];
    document.querySelectorAll('button').forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    buildRibbons();
    buildParticles();
  });
});

// ═══════════════════════════════════════════════════════════════
//  RESIZE
// ═══════════════════════════════════════════════════════════════
window.addEventListener('resize', () => {
  const w=innerWidth, h=innerHeight;
  [rendMain,rendGlow].forEach(r=>{ r.setSize(w,h); });
  camera.aspect = w/h;
  camera.updateProjectionMatrix();
});

// ═══════════════════════════════════════════════════════════════
//  RENDER LOOP — render scene to both canvases for bloom effect
// ═══════════════════════════════════════════════════════════════
const clock = new THREE.Clock();
(function loop() {
  requestAnimationFrame(loop);
  const t = clock.getElapsedTime();
  updateRibbons(t);
  orbitStep();
  rendMain.render(scene, camera);
  rendGlow.render(scene, camera);  // blurred via CSS = free bloom
})();
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump