Spaces:

PeetPedro
/

quantclassic

Running

File size: 13,021 Bytes

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QUANTCLASSIC</title>
<meta name="description" content="A quantum radio for classical music. Every great public-domain theme plays at once, quietly — a superposition, all at once and none. Click one to measure it: its wavefunction collapses, it rings out clear, the rest hush.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{--bg:#0b0a12;--ink:#efe7d6;--dim:#8f86a6;--gold:#e6c874;--cyan:#66e0ff;--line:#241f38;
  --serif:'Cormorant Garamond',Georgia,serif;--mono:'JetBrains Mono',monospace}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--serif)}
#stage{position:fixed;inset:0;display:flex;flex-direction:column}
canvas#bg{position:absolute;inset:0;z-index:0;opacity:.5}
header{position:relative;z-index:2;text-align:center;padding:22px 16px 6px}
h1{font-family:var(--mono);font-weight:500;font-size:clamp(20px,4.5vw,30px);letter-spacing:.34em;color:var(--gold)}
.sub{font-style:italic;font-size:clamp(16px,3vw,21px);color:var(--dim);margin-top:2px}
#field{position:relative;z-index:2;flex:1;overflow:hidden}
.orb{position:absolute;transform:translate(-50%,-50%);width:var(--s);height:var(--s);border-radius:50%;
  display:grid;place-items:center;text-align:center;cursor:pointer;transition:width .5s cubic-bezier(.2,.8,.2,1),height .5s cubic-bezier(.2,.8,.2,1),opacity .5s;
  border:1px solid rgba(255,255,255,.08)}
.orb .c{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.85);text-transform:uppercase}
.orb .p{font-style:italic;font-size:13px;line-height:1.15;color:rgba(255,255,255,.7);padding:0 6px;margin-top:1px}
.orb.focus{box-shadow:0 0 50px var(--glow),0 0 12px #fff inset;border-color:rgba(255,255,255,.5);z-index:3}
.orb.focus .p{color:#fff}
.orb.dim{opacity:.28}
#now{position:relative;z-index:2;text-align:center;padding:6px 16px 4px;min-height:2.2em}
#now .l{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase}
#now .t{font-style:italic;font-size:clamp(19px,4vw,27px);color:var(--gold);transition:color .4s}
#now.super .t{color:var(--dim)}
footer{position:relative;z-index:2;display:flex;gap:12px;justify-content:center;align-items:center;padding:12px 16px 20px;flex-wrap:wrap}
button{font-family:var(--mono);font-size:12px;letter-spacing:.06em;cursor:pointer;color:var(--ink);background:rgba(40,36,64,.6);border:1px solid var(--line);border-radius:22px;padding:9px 18px;transition:.2s}
button:hover{border-color:var(--cyan);color:var(--cyan)}
button.on{background:rgba(102,224,255,.14);border-color:var(--cyan);color:var(--cyan)}
.hint{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:#544c6a;text-transform:uppercase;width:100%;text-align:center;margin-top:2px}.hint .f{color:#a08a4a}
#gate{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(120% 90% at 50% 35%,rgba(230,200,116,.06),transparent),rgba(11,10,18,.92)}
#gate.hide{display:none}
#gate .tag{font-size:clamp(20px,4vw,28px);font-style:italic;max-width:32rem;line-height:1.4;color:var(--ink)}
#gate .tag em{color:var(--gold)}
#gate .small{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.1em;margin-top:14px;line-height:1.7}
#gate button{font-family:var(--serif);font-style:italic;font-size:24px;color:#140f04;background:linear-gradient(180deg,var(--gold),#c8a24a);border:0;border-radius:30px;padding:12px 40px;margin-top:26px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
</style>
</head>
<body>
<div id="stage">
  <canvas id="bg"></canvas>
  <header>
    <h1>QUANTCLASSIC</h1>
    <div class="sub">a quantum radio · every great theme at once, and none</div>
  </header>
  <div id="field"></div>
  <div id="now" class="super"><div class="l">state</div><div class="t" id="now-t">superposition — all at once, and none</div></div>
  <footer>
    <button id="super-btn">▚ superpose all</button>
    <button id="shuffle-btn">⟳ quantshuffle</button>
    <div class="hint">🜂 measurement collapses the chord to one voice &middot; <span class="f">ahogy a dolgok vannak</span></div>
  </footer>
  <div id="gate">
    <p class="tag">Every great theme is playing right now — <em>Beethoven, Bach, Mozart, Vivaldi</em> — all at once, so quietly it is almost nothing. A <em>superposition</em> of the whole canon.</p>
    <p class="small">Click a voice to <em style="color:var(--cyan)">measure</em> it — its wavefunction collapses and it rings out alone.<br>All public domain. All synthesized live, no recordings.</p>
    <button id="gate-btn">▶ raise the baton</button>
  </div>
</div>

<script>
(function(){
"use strict";
// ── the canon (public domain), as playable themes ───────────────────────────
// notes: [midi, beats]. Each voice loops at its own tempo, so superposed they blur.
function mtof(m){ return 440*Math.pow(2,(m-69)/12); }
var THEMES=[
 {c:'Beethoven', p:'Symphony No. 5', hue:8,  wave:'triangle', bpm:132, gain:1.0,
  n:[[67,.25],[67,.25],[67,.25],[63,1.1],[65,.25],[65,.25],[65,.25],[62,1.1],[0,.4]]},
 {c:'Beethoven', p:'Ode to Joy', hue:44, wave:'triangle', bpm:118, gain:.9,
  n:[[64,.5],[64,.5],[65,.5],[67,.5],[67,.5],[65,.5],[64,.5],[62,.5],[60,.5],[60,.5],[62,.5],[64,.5],[64,.75],[62,.25],[62,1]]},
 {c:'Beethoven', p:'Für Elise', hue:300, wave:'sine', bpm:76, gain:.85,
  n:[[76,.25],[75,.25],[76,.25],[75,.25],[76,.25],[71,.25],[74,.25],[72,.25],[69,.6],[0,.3]]},
 {c:'Mozart', p:'Eine kleine Nachtmusik', hue:120, wave:'triangle', bpm:130, gain:.85,
  n:[[67,.25],[62,.25],[67,.25],[62,.25],[67,.25],[71,.25],[74,.5],[62,.25],[57,.25],[62,.25],[57,.25],[62,.25],[66,.25],[69,.5]]},
 {c:'Bach', p:'Toccata in D minor', hue:264, wave:'sawtooth', bpm:84, gain:.7,
  n:[[69,.5],[67,.25],[69,.75],[0,.25],[64,.5],[62,.5],[61,.5],[57,1.2],[0,.4]]},
 {c:'Pachelbel', p:'Canon in D', hue:190, wave:'sine', bpm:100, gain:.8,
  n:[[78,.5],[76,.5],[74,.5],[73,.5],[71,.5],[69,.5],[71,.5],[73,.5]]},
 {c:'Vivaldi', p:'Spring', hue:96, wave:'triangle', bpm:120, gain:.8,
  n:[[76,.4],[76,.4],[76,.4],[71,.8],[71,.8],[73,.4],[73,.4],[71,.9],[0,.3]]},
 {c:'Mozart', p:'Symphony No. 40', hue:220, wave:'sine', bpm:108, gain:.8,
  n:[[75,.25],[75,.25],[77,.5],[75,.25],[75,.25],[77,.5],[75,.5],[82,.5],[81,1],[0,.3]]}
];

var actx=null, master=null, voices=[], sched=null, started=false, focusIdx=-1, shuffleOn=false, shuffleT=null;

function buildAudio(){
  actx=new (window.AudioContext||window.webkitAudioContext)();
  master=actx.createGain(); master.gain.value=0.9;
  var lp=actx.createBiquadFilter(); lp.type='lowpass'; lp.frequency.value=5200;
  master.connect(lp); lp.connect(actx.destination);
  voices=THEMES.map(function(th){
    var g=actx.createGain(); g.gain.value=0.06*th.gain; g.connect(master);
    return { th:th, g:g, i:0, next:actx.currentTime+0.1 };
  });
}
function playNote(v, m, dur, when){
  if(m===0) return; // rest
  var o=actx.createOscillator(), e=actx.createGain();
  o.type=v.th.wave; o.frequency.value=mtof(m);
  var a=0.012, rel=Math.min(0.25,dur*0.4), peak=0.5;
  e.gain.setValueAtTime(0,when); e.gain.linearRampToValueAtTime(peak,when+a);
  e.gain.setValueAtTime(peak,when+Math.max(a,dur-rel)); e.gain.exponentialRampToValueAtTime(0.0006,when+dur);
  o.connect(e); e.connect(v.g); o.start(when); o.stop(when+dur+0.02);
}
function scheduler(){
  var ahead=actx.currentTime+0.12;
  voices.forEach(function(v){
    var spb=60/v.th.bpm;
    while(v.next < ahead){
      var note=v.th.n[v.i], dur=note[1]*spb;
      playNote(v, note[0], dur*0.96, v.next);
      v.next += dur; v.i=(v.i+1)%v.th.n.length;
    }
  });
}
function setMix(){
  voices.forEach(function(v,i){
    var target = focusIdx<0 ? 0.06*v.th.gain : (i===focusIdx ? 0.55 : 0.012);
    v.g.gain.setTargetAtTime(target, actx.currentTime, 0.25);
  });
}

// ── orbs ─────────────────────────────────────────────────────────────────────
var field=document.getElementById('field'), orbEls=[];
function layout(){
  var fw=field.clientWidth, fh=field.clientHeight, n=THEMES.length;
  var cx=fw/2, cy=fh/2, rad=Math.min(fw,fh)*0.36;
  THEMES.forEach(function(th,i){
    var ang=(i/n)*Math.PI*2 - Math.PI/2;
    var el=orbEls[i];
    var x=cx+Math.cos(ang)*rad, y=cy+Math.sin(ang)*rad;
    el.style.left=x+'px'; el.style.top=y+'px';
  });
}
THEMES.forEach(function(th,i){
  var el=document.createElement('div'); el.className='orb'; el.dataset.i=i;
  var base=Math.min(innerWidth,innerHeight)*0.16;
  el.style.setProperty('--s', Math.max(78,base)+'px');
  el.style.setProperty('--glow','hsl('+th.hue+',80%,55%)');
  el.style.background='radial-gradient(circle at 38% 32%, hsla('+th.hue+',85%,68%,.5), hsla('+th.hue+',80%,42%,.28) 60%, hsla('+th.hue+',60%,20%,.15))';
  el.innerHTML='<div><div class="c">'+th.c+'</div><div class="p">'+th.p+'</div></div>';
  el.addEventListener('click',function(){ if(!started)return; measure(i); });
  field.appendChild(el); orbEls.push(el);
});
addEventListener('resize', layout);

function measure(i){
  focusIdx=i; setMix();
  orbEls.forEach(function(el,k){
    var base=Math.min(innerWidth,innerHeight)*0.16;
    el.classList.toggle('focus', k===i); el.classList.toggle('dim', k!==i);
    el.style.setProperty('--s', (k===i? Math.max(120,base*1.5): Math.max(66,base*0.85))+'px');
  });
  var d=document.getElementById('now'); d.classList.remove('super');
  document.getElementById('now-t').textContent=THEMES[i].c+' — '+THEMES[i].p;
}
function superpose(){
  focusIdx=-1; setMix();
  orbEls.forEach(function(el){ var base=Math.min(innerWidth,innerHeight)*0.16;
    el.classList.remove('focus','dim'); el.style.setProperty('--s', Math.max(78,base)+'px'); });
  var d=document.getElementById('now'); d.classList.add('super');
  document.getElementById('now-t').textContent='superposition — all at once, and none';
}

function startAll(){
  if(started) return; started=true;
  buildAudio(); layout();
  sched=setInterval(scheduler, 25);
  document.getElementById('gate').classList.add('hide');
  superpose();
}
document.getElementById('gate-btn').addEventListener('click', startAll);
document.getElementById('super-btn').addEventListener('click', function(){ if(started){ if(shuffleOn)toggleShuffle(); superpose(); } });
document.getElementById('shuffle-btn').addEventListener('click', function(){ if(started) toggleShuffle(); });
function toggleShuffle(){
  shuffleOn=!shuffleOn; document.getElementById('shuffle-btn').classList.toggle('on',shuffleOn);
  if(shuffleOn){ measure(Math.floor(Math.random()*THEMES.length));
    shuffleT=setInterval(function(){ measure(Math.floor(Math.random()*THEMES.length)); }, 9000); }
  else { clearInterval(shuffleT); }
}

// ── quantum interference background (canvas, low-res) ────────────────────────
(function(){
  var c=document.getElementById('bg'), ctx=c.getContext('2d');
  var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
  var LW=100,LH=60, off=document.createElement('canvas'); off.width=LW;off.height=LH;
  var octx=off.getContext('2d'), img=octx.createImageData(LW,LH);
  function rs(){ c.width=innerWidth;c.height=innerHeight; } rs(); addEventListener('resize',rs);
  var t=0;
  function fr(){ t+=0.01; var d=img.data,p=0;
    for(var y=0;y<LH;y++)for(var x=0;x<LW;x++){
      var ux=(x/LW-0.5)*(LW/LH)*4, uy=(y/LH-0.5)*4, re=0,im=0;
      for(var i=0;i<4;i++){var a=1.2+i*1.5,kx=Math.cos(a)*(1.3+i*.5),ky=Math.sin(a)*(1.3+i*.5),w=.4+i*.15,ph=kx*ux+ky*uy-w*t;re+=Math.cos(ph);im+=Math.sin(ph);}
      re/=4;im/=4;var mag=Math.sqrt(re*re+im*im),phase=Math.atan2(im,re);
      var h=(0.55+(phase/6.283+0.5)*0.3)%1, r=Math.max(0,Math.abs(h*6-3)-1),g=Math.max(0,2-Math.abs(h*6-2)),b=Math.max(0,2-Math.abs(h*6-4)),br=mag*mag*0.32+0.01;
      d[p++]=Math.min(1,r)*br*255;d[p++]=Math.min(1,g)*br*255;d[p++]=Math.min(1,b)*br*255;d[p++]=255;
    }
    octx.putImageData(img,0,0); ctx.clearRect(0,0,c.width,c.height); ctx.imageSmoothingEnabled=true; ctx.drawImage(off,0,0,c.width,c.height);
    if(!reduce) requestAnimationFrame(fr);
  }
  fr();
})();

window.__qc={ start:startAll, measure:measure, superpose:superpose,
  state:function(){return{started:started,focus:focusIdx,voices:voices.length,ctx:actx?actx.state:'none'};} };
})();
</script>
</body>
</html>