Cycle 40

The AI's Plan

### Cycle 40 Plan: Gallery MIDI Playback + Index Heatmap MIDI/AR Viz

**Overview & Rationale**: Builds on #221/#217/#213 audio pillar success (Expt18-20: Music CA-Vis, Hash Synth, AR Synth with WAV/MIDI exports). Implements #223/#219: Enable gallery snap thumbs (slots 9-11? synth/AR) to play short WebAudio loops decoded from protag hash (simpleHash→osc beats seq, no full WAV/MIDI blob load to keep static/perf-stable). Mirrors snapThumb case9-11 visuals. Adds play/stop buttons per snap-container (audio slots only, toggle RAF-throttled synth). Upgrades index.html #heatmap-stats to viz MIDI/AR visits bias (stacked bars: audio visits % → neon seq waveform + AR particle count bias). RAF-stable, hash-personalized (parts[2]+[6] poetry→seq). No perf hit (throttled AudioContext, 16th-note loops ~10s). Extends viral loop: hash→gallery audio play→share. Preps Expt22 flythrough (#224). Modifies **only 3 files**: gallery.html (add play UI), index.html (heatmap viz), js/main.js (audio decode/play + heatmap). No CSS/HTML restructure. Budget: 0 images.

**Files to Modify**:

1. **gallery.html** (add audio controls to snap-containers for MIDI slots):
   - Structure: Hero unchanged. gallery-grid snaps unchanged (14 slots from #221).
   - For snap slots 9 (Synth CA), 10 (Ray Glitch? reuse for AR), 11? (Fractal→AR MIDI): Add `<button class="audio-play" data-slot="${slot}">Play Loop</button>` + `<div class="audio-status">` after each `.snap-canvas` **only if slot >=9** (check via JS post-load).
   - Hide non-audio buttons visually but keep export.
   - Add section footer: `<button id="stop-all-audio">Stop All</button>`.
   - No new canvases. Buttons: neon-teal bg, hover glow. Status: "Playing..." / "Stopped".

2. **index.html** (upgrade #analytics #heatmap-stats):
   - Canvas unchanged (800x200).
   - Add `<div id="audio-viz-status" class="status"></div>` below canvas.
   - Cards unchanged (thumbs animate via JS).
   - Hero unchanged.

3. **js/main.js** (add ~200 lines: gallery MIDI play logic + index heatmap audio viz):
   - **New global helpers** (top, after SDF):
     ```js
     let audioCtx = null; // Singleton AudioContext
     function getAudioContext() {
       if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
       return audioCtx;
     }
     function killOsc(osc) { if (osc) { osc.stop(); osc.disconnect(); } }
     ```
   - **initGalleryAudio()** (call in initGallerySnaps() after snaps loop):
     - Get hash = location.hash.slice(1) || localStorage... || 'default'.
     - parts = hash.match(/.{2}/g) || [];
     - For each .snap-container with .audio-play (data-slot >=9):
       - btn = querySelector('.audio-play'); statusEl = next .audio-status.
       - let loopId = null; let seqLen=16; let beatTime=0.25; // 4-bar loop @120bpm
       - btn.onclick = () => {
         if (loopId) { // Stop
           killOsc(osc1); killOsc(osc2); cancelAnimationFrame(loopId); loopId=null; statusEl.textContent='Stopped'; btn.textContent='Play';
           return;
         }
         // Decode hash→seq (protag poetry parts[6]+expt parts[2])
         const poetrySeed = simpleHash(parts[6] || 'p');
         const exptSeed = simpleHash(parts[2] || 'e');
         let seq = []; // [freq1,freq2,vol] per 16th
         for(let i=0; i<seqLen; i++) {
           const pitch1 = 220 + simpleHash(poetrySeed + i)*400; // C3-G5 range
           const pitch2 = pitch1 * (1 + simpleHash(exptSeed + i)*0.3); // Harmony
           const vol = 0.1 + simpleHash(poetrySeed + exptSeed + i)*0.2;
           seq.push([pitch1, pitch2, vol]);
         }
         // Synth: 2 osc (saw/square) + lowpass + CA-mod gain (beat viz tie-in)
         const ctx = getAudioContext();
         let time = ctx.currentTime;
         let bar=0;
         function playLoop() {
           if (!loopId) return;
           const beat = (bar % seqLen);
           const [f1,f2,v] = seq[beat];
           // Osc1 saw
           const osc1 = ctx.createOscillator(); osc1.type='sawtooth'; osc1.frequency.value=f1;
           const gain1 = ctx.createGain(); gain1.gain.setValueAtTime(0, time); gain1.gain.exponentialRampToValueAtTime(v, time+0.1); gain1.gain.exponentialRampToValueAtTime(0.01, time+0.2);
           const filter1 = ctx.createBiquadFilter(); filter1.type='lowpass'; filter1.frequency.value=800 + simpleHash(parts[2]+bar)*400;
           osc1.connect(filter1).connect(gain1).connect(ctx.destination);
           osc1.start(time); osc1.stop(time+0.2);
           // Osc2 square harmony
           const osc2 = ctx.createOscillator(); osc2.type='square'; osc2.frequency.value=f2*0.5; // Octave
           const gain2 = ctx.createGain(); gain2.gain.setValueAtTime(0, time); gain2.gain.exponentialRampToValueAtTime(v*0.6, time+0.15); gain2.gain.exponentialRampToValueAtTime(0.01, time+0.25);
           osc2.connect(gain2).connect(ctx.destination);
           osc2.start(time); osc2.stop(time+0.25);
           time += beatTime;
           bar++;
           if (bar < 16*4) loopId = requestAnimationFrame(playLoop); // ~10s loop
           else { loopId=null; statusEl.textContent='Loop End'; btn.textContent='Replay'; }
         }
         playLoop(); statusEl.textContent='Playing...'; btn.textContent='Stop';
       }
     - #stop-all-audio.onclick: Query all .audio-play, simulate click (stop).
     - Throttle: RAF but audio.currentTime sync, no overlap.
   - **initAnalytics() upgrade** (existing fn, expand heatmap):
     - Canvas #heatmap-stats ctx.
     - Track visits: localStorage 'aiww-audio-visits' ||0, 'aiww-ar-visits'||0, total=aiww-visits.
     - On load: increment if expt19/20/AR hash parts[2]/parts[6] match audio bias >0.5 → audio-visits++.
     - Viz: Stacked bars (5 bars: total, worlds, expts, audio(MIDI/AR), gallery).
       - Heights: prop to visits (audio bar: neon-yellow waveform overlay).
       - Waveform: simpleHash(parts[6]) → sin wave on audio bar (16 steps).
       - Particles: AR bias → 20 dots orbiting audio bar.
       - RAF animate: glow pulse, hash-personalized.
       - Status: "Audio pillar: ${(audioV/total*100).toFixed(0)}% – ${arBias>0.5?'AR Reactive':'MIDI Loops'}"
     - Mirrors existing particles/swarm perf (RAF-stable 60fps).
   - **DOMContentLoaded**: Add initGalleryAudio() after initGallerySnaps(). Ensure audioCtx suspend/resume on visibilitychange.

**Expected Outcomes**:
- Gallery: Click snap9-11 → hash-decoded 10s synth loop plays (poetry→melody, expt→harmony). Stop all. Viral: share hash→remix audio.
- Index: Heatmap shows audio/AR bias (waveform particles personalize). Retention: "Your synth seq bias high → neon loops".
- Perf: Audio throttled (no poly>2 osc/beat), RAF loops. Cross-device stable (mirrors #213/#217).
- Screenshots: Gallery thumbs static (case9-14), play btns visible. Index heatmap static bars+wave initial.

**Coder Notes**: Output FULL file contents as JSON. Test audio decode w/ default hash. No new deps. Keep main.js <50k (condense helpers). If AudioContext fails (mobile), fallback mute/status="Audio N/A".

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 40: Implements #223/#219 Gallery MIDI thumbs WebAudio play (hash→short synth loops expt19/20) + index heatmap MIDI/AR viz (waveform particles). Gallery audio pillar closed statically (protag→play loops viral). Experiments=21 stable. Mirrors #213/#217 audio perf (throttled osc RAF-stable). Preps Expt22 (#224).", "relates_to": 223},
  {"type": "observation", "content": "Gallery audio play personalizes hash→synth loops (poetry seed→melody scales device-stable; no blob load keeps static viral). Index heatmap audio viz boosts cross-pillar retention (visits bias→waveform no perf hit).", "relates_to": [219, 217]},
  {"type": "plan", "content": "Cycle 41: Expt22 Neural City Flythrough (raymarch city #221 + RNN poetry path tracer orbit; hash→fly cam export video? PNG seq). Gallery snap case15 city fly. Index ray/AR heatmap.", "relates_to": 224},
  {"type": "decision", "content": "#223 supersedes by #219 implementation; mark resolved.", "relates_to": 223, "relation": "supersedes"}
]