' +''+p.cat+''; field.appendChild(b); cards.push(b); const row=document.createElement('a'); row.className='listrow'; row.href='#'; row.dataset.i=i; row.innerHTML='0'+(i+1)+''+p.t; listview.appendChild(row); }); /* ---------- spiral layout ---------- */ const GA=2.399963; function layout(){ const vw=innerWidth, vh=innerHeight; const maxR=Math.min(vw,vh)*(vw<760?0.34:0.40); const baseW=clamp(Math.min(vw,vh)*0.2,150,250); cards.forEach((c,i)=>{ const t=(i+0.5)/N; const r=maxR*Math.sqrt(t); const ang=i*GA; const x=Math.cos(ang)*r; const y=Math.sin(ang)*r*0.82; const sizeF=[1.18,0.86,1.05,0.78,1.12,0.9,1.0,0.82,1.1][i]||1; const w=baseW*sizeF; c.style.setProperty('--w', w.toFixed(0)+'px'); c.style.setProperty('--h', (w*0.76).toFixed(0)+'px'); c.style.setProperty('--x', x.toFixed(1)+'px'); c.style.setProperty('--y', y.toFixed(1)+'px'); if(c.dataset.r===undefined || !c.style.getPropertyValue('--r')){ c.style.setProperty('--r', rand(-uichemy_controller_bridge.card_tilt,uichemy_controller_bridge.card_tilt).toFixed(1)+'deg'); c.style.setProperty('--dur', rand(uichemy_controller_bridge.float_min,uichemy_controller_bridge.float_max).toFixed(2)+'s'); c.style.setProperty('--delay', rand(-4,0).toFixed(2)+'s'); } }); } layout(); addEventListener('resize', layout); /* ---------- field pan (parallax + drag) ---------- */ const stage=document.getElementById('stage'); let ox=0,oy=0, px=0,py=0, cx=0,cy=0; // offset + parallax targets/current let mx=0,my=0; let dragging=false, moved=false, sx=0,sy=0, sox=0,soy=0, pid=null; addEventListener('mousemove',e=>{ mx=e.clientX; my=e.clientY; }); stage.addEventListener('pointerdown',e=>{ if(document.body.classList.contains('mode-list')) return; dragging=true; moved=false; sx=e.clientX; sy=e.clientY; sox=ox; soy=oy; pid=e.pointerId; /* capture only once a real drag passes threshold, else a plain click is dispatched to the stage instead of the card and never opens it */ if(fine) cursor.classList.add('grab'); }); stage.addEventListener('pointermove',e=>{ if(!dragging) return; const dx=e.clientX-sx, dy=e.clientY-sy; if(!moved && Math.abs(dx)+Math.abs(dy)>6){ moved=true; hideHint(); try{ stage.setPointerCapture(pid); }catch(_){} } ox=sox+dx; oy=soy+dy; }); function endDrag(e){ dragging=false; if(fine) cursor.classList.remove('grab'); } stage.addEventListener('pointerup',endDrag); stage.addEventListener('pointercancel',endDrag); function raf(){ // parallax from mouse if(!reduce){ const tx=(mx-innerWidth/2)*uichemy_controller_bridge.parallax_strength, ty=(my-innerHeight/2)*uichemy_controller_bridge.parallax_strength; px+=(tx-px)*uichemy_controller_bridge.parallax_smoothing; py+=(ty-py)*uichemy_controller_bridge.parallax_smoothing; } cx+=(ox-cx)*(reduce?1:uichemy_controller_bridge.drag_smoothing); cy+=(oy-cy)*(reduce?1:uichemy_controller_bridge.drag_smoothing); field.style.transform='translate('+(cx+px).toFixed(1)+'px,'+(cy+py).toFixed(1)+'px)'; if(fine){ cursorX+=(mx-cursorX)*uichemy_controller_bridge.cursor_smoothing; cursorY+=(my-cursorY)*uichemy_controller_bridge.cursor_smoothing; cursor.style.transform='translate('+cursorX+'px,'+cursorY+'px) translate(-50%,-50%)'; } requestAnimationFrame(raf); } /* ---------- hover chip ---------- */ const chip=document.getElementById('chip'); const chipImg=document.getElementById('chipImg'); const chipName=document.getElementById('chipName'); function showChip(i){ chipImg.src=PROJECTS[i].img; chipName.textContent=PROJECTS[i].t; chip.classList.add('show'); } function hideChip(){ chip.classList.remove('show'); } function moveChip(){ chip.style.left=mx+'px'; chip.style.top=my+'px'; } addEventListener('mousemove',()=>{ if(chip.classList.contains('show')) moveChip(); }); /* ---------- card interactions ---------- */ const pent=[0,2,4,7,9,12,14,16,19]; // pentatonic steps cards.forEach((c,i)=>{ c.addEventListener('mouseenter',()=>{ if(fine){cursor.classList.add('grab');} showChip(i); moveChip(); blip(330*Math.pow(2,pent[i%pent.length]/12),0.07,'sine',0.05); }); c.addEventListener('mouseleave',()=>{ if(fine){cursor.classList.remove('grab');} hideChip(); }); c.addEventListener('click',e=>{ e.preventDefault(); if(moved) return; open(i); }); }); /* ---------- list interactions ---------- */ const rows=[...listview.querySelectorAll('.listrow')]; rows.forEach((row,i)=>{ row.addEventListener('mouseenter',()=>{ document.body.classList.add('hovering'); row.classList.add('hot'); showChip(i); moveChip(); blip(330*Math.pow(2,pent[i%pent.length]/12),0.07,'sine',0.05); }); row.addEventListener('mouseleave',()=>{ document.body.classList.remove('hovering'); row.classList.remove('hot'); hideChip(); }); row.addEventListener('click',e=>{ e.preventDefault(); open(i); }); }); /* ---------- mode toggle ---------- */ const toggle=document.getElementById('toggle'); function setMode(m){ document.body.classList.toggle('mode-list', m==='list'); document.body.classList.toggle('mode-spiral', m==='spiral'); toggle.querySelectorAll('button').forEach(b=>b.classList.toggle('is-on', b.dataset.mode===m)); hideChip(); blip(m==='list'?520:392,0.09,'triangle',0.05); } toggle.querySelectorAll('button').forEach(b=>b.addEventListener('click',()=>setMode(b.dataset.mode))); /* ---------- detail ---------- */ const detail=document.getElementById('detail'); let cur=0; const dEl={img:document.getElementById('detailImg'),cat:document.getElementById('detailCat'), title:document.getElementById('detailTitle'),desc:document.getElementById('detailDesc'),meta:document.getElementById('detailMeta')}; function open(i){ cur=i; const p=PROJECTS[i]; dEl.img.src=p.img; dEl.img.alt=p.t; dEl.cat.textContent=p.cat; dEl.title.textContent=p.t; dEl.desc.textContent=p.d; dEl.meta.innerHTML='

Year

'+p.y+'

Role

'+p.role+'

Made with

'+p.tools+'

'; detail.classList.add('open'); detail.setAttribute('aria-hidden','false'); hideChip(); chord(); } function close(){ detail.classList.remove('open'); detail.setAttribute('aria-hidden','true'); } document.getElementById('detailClose').addEventListener('click',close); detail.querySelector('.detail__bg').addEventListener('click',close); document.getElementById('detailNext').addEventListener('click',()=>{ open((cur+1)%N); }); document.getElementById('detailPrev').addEventListener('click',()=>{ open((cur-1+N)%N); }); addEventListener('keydown',e=>{ if(e.key==='Escape'){ close(); closeMenu(); } if(detail.classList.contains('open')){ if(e.key==='ArrowRight') open((cur+1)%N); if(e.key==='ArrowLeft') open((cur-1+N)%N); } }); /* ---------- menu overlay ---------- */ const menuov=document.getElementById('menuov'); document.getElementById('menuBtn').addEventListener('click',()=>{ menuov.classList.add('open'); menuov.setAttribute('aria-hidden','false'); blip(300,0.12,'sine',0.05); }); function closeMenu(){ menuov.classList.remove('open'); menuov.setAttribute('aria-hidden','true'); } document.getElementById('menuClose').addEventListener('click',closeMenu); /* ---------- hint ---------- */ const hint=document.getElementById('hint'); let hintHidden=false; function hideHint(){ if(!hintHidden){ hintHidden=true; hint.classList.add('fade'); } } setTimeout(hideHint, uichemy_controller_bridge.hint_timeout); /* ---------- WEB AUDIO ---------- */ let actx=null, master=null, soundOn=false; function initAudio(on){ try{ const AC=window.AudioContext||window.webkitAudioContext; if(!actx){ actx=new AC(); master=actx.createGain(); master.gain.value=0; master.connect(actx.destination); } if(actx.state==='suspended') actx.resume(); }catch(e){ actx=null; } setSound(on); } function setSound(on){ soundOn=on; if(master) master.gain.setTargetAtTime(on?0.9:0.0, actx.currentTime, 0.02); const s=document.getElementById('sound'); s.classList.toggle('on',on); document.getElementById('soundLbl').textContent= on?'sound on':'sound off'; } function blip(freq,dur,type,g){ if(!actx||!soundOn) return; const o=actx.createOscillator(), gn=actx.createGain(); o.type=type||'sine'; o.frequency.value=freq; o.connect(gn); gn.connect(master); const t=actx.currentTime; gn.gain.setValueAtTime(0,t); gn.gain.linearRampToValueAtTime(g||0.05,t+0.006); gn.gain.exponentialRampToValueAtTime(0.0001,t+(dur||0.08)); o.start(t); o.stop(t+(dur||0.08)+0.02); } function chord(){ if(!actx||!soundOn) return; [0,4,7,11].forEach((s,k)=>setTimeout(()=>blip(261.6*Math.pow(2,s/12),0.5,'sine',0.04),k*55)); } document.getElementById('sound').addEventListener('click',()=>{ if(!actx) initAudio(true); else setSound(!soundOn); if(soundOn) chord(); }); /* ---------- cursor ---------- */ const cursor=document.getElementById('cursor'); let cursorX=innerWidth/2, cursorY=innerHeight/2; if(fine && !reduce){ cursor.style.display='block'; } document.querySelectorAll('.btn,.menu-btn,.toggle button,.sound,.listrow,.detail__nav button,.detail__close,.menuov__close,.logo,.menuov__mail,.menuov__socials a') .forEach(el=>{ el.addEventListener('mouseenter',()=>fine&&cursor.classList.add('grab')); el.addEventListener('mouseleave',()=>fine&&cursor.classList.remove('grab')); }); requestAnimationFrame(raf); })();