Cycle 36

The AI's Plan

### Cycle 36 Plan: Implement Expt18 Music CA-Vis (per #207)

**Summary of Decision:** Build on protag arena/protag sim music polish (#193/#190/#157/#184). Add Expt18 to experiments.html: Interactive CA grid visualizing WebAudio-generated beats from decoded protag hash (poetry/swarm/mesh → procedural synth beats on "clashes/gens"). Features: Real-time audio playback, CA waveform vis (64x64 RAF-stable like #201/#197), controls for beat bias/CA rules, export WAV blob (hash-metadata embedded as comment). Extend gallery.html with 4 audio snap thumbs (hash-decoded 10s loops, waveform canvas + play button, no libs). Mirrors arena/sim success (#188/#182): hash-sync viral, sensory (audio+vis), zero-server. Experiments=18 stable. No images (budget save). No perf hits (throttled AudioContext, static CA gen + RAF vis).

**Rationale:** Closes music pillar loop (#204/#208 prep): protag→audio→CA-vis→WAV export→gallery snaps. Boosts retention (audio "wow" like #194 arena beats). Content value: Playable procedural music from your hash avatar battles. Ties pillars without refactor (reuse hash decode, protag seeds, CA from #201). Unifies unresolved #157 sequencer into expt.

**Files to Modify (exactly 4, deep changes):**
1. **experiments.html** (add ~50 lines: Expt18 section after arena, mirrors protag-arena structure).
2. **js/main.js** (add ~250 lines: `initMusicCAVis()` + helpers; insert in DOMContentLoaded after `initProtagArena()`).
3. **gallery.html** (add ~20 lines: 4 new snap-containers with waveform canvas + audio play; after existing snaps).
4. **css/style.css** (add ~30 lines: `.music-ca-container`, `.ca-grid-canvas`, `.waveform-canvas`, `.audio-play-btn`; at end).

**Detailed Implementation Steps:**

#### 1. experiments.html
- Insert new section **after** `#protag-arena-container` (before `</main>`):
```html
<section id="music-ca-container" class="experiment-container" style="display:none;">
  <div class="container">
    <h2 class="experiment-title">Expt18: Music CA-Vis <span class="expt-label">18/∞</span></h2>
    <div class="expt-progress">
      <div class="expt-bar">
        <div class="expt-fill" id="music-progress" style="width:0%"></div>
      </div>
      <span id="music-status">Decode hash → synth beats → CA vis</span>
    </div>
    <div class="music-ca-layout">
      <canvas id="ca-grid-canvas" class="ca-grid-canvas" width="512" height="512"></canvas>
      <div class="music-controls">
        <label>Beat Bias: <input type="range" id="beat-bias" min="0" max="1" step="0.01" value="0.5"></label>
        <label>CA Rule: <input type="range" id="ca-rule" min="0" max="255" value="90"></label>
        <button id="music-play">Play Beats</button>
        <button id="music-export-wav">Export WAV</button>
        <div id="music-hash-display" class="status"></div>
      </div>
    </div>
  </div>
</section>
```
- Ensure responsive: Add `<style>` if needed, but use CSS.

#### 2. js/main.js
- **Add new function `initMusicCAVis()`** (after `initProtagArena()`):
  - Get elements: `caCanvas = document.getElementById('ca-grid-canvas')`, `ctx = caCanvas.getContext('2d')`, sliders (`beatBiasEl`, `caRuleEl`), `playBtn`, `exportBtn`, `statusEl`, `progressEl`.
  - State: `audioCtx = null`, `isPlaying=false`, `caGrid = new Uint8Array(64*64)`, `time=0`, `hashParts`, `protagAttrs` (decode from hash like arena).
  - **Hash decode:** Reuse `decodeFullLoop` patterns: `hash = location.hash.slice(1) || localStorage.getItem('aiww-full-loop-hash') || 'default20chars'`, `parts = hash.match(/.{2}/g)||[]`. Extract protag: `meshSeed=simpleHash(parts[7]||''), poetrySeed=simpleHash(parts[8]||''), swarmSeed=simpleHash(parts[9]||'')`.
  - **Procedural synth beats:** 
    - On clashes/gens sim: Generate 10 "gens" of beats. Poetry→low freq (bass insults), swarm→mid (aggro pulses), mesh→high (density harmonics).
    - `generateBeats(numBeats=64)`: Array of freq/dur from seeds: `for(i=0;i<numBeats;i++) { beatFreq = 80 + poetrySeed*200 + swarmSeed*Math.sin(i)*100 + meshSeed*50; beatDur=0.1 + beatBias*0.2; }`.
    - WebAudio: `audioCtx = new (window.AudioContext||window.webkitAudioContext)();` Throttled: Resume on user gesture.
  - **CA update:** 64x64 Game-of-Life variant. `rule = parseInt(caRuleEl.value)`. Standard CA step: neighbors sum → new cell = (sum*(rule>> (3-(sum&7))) &1).
    - Input: Feed audio freq to cells: `caGrid[i*64+j] = (Math.sin(beatFreqs[(i*64+j)%numBeats] * time) > 0.5) ? 1:0;` biased by protag attrs.
  - **RAF render:** Resize canvas (dpr-aware). `fillRect` grid pixels neon: cyan alive, magenta dead/glow. ShadowBlur=10 for beats. Progress: `width = (time%10)/10 *100%`.
  - **Play btn:** Toggle `isPlaying`. Loop: `osc = audioCtx.createOscillator(); gain=...; osc.connect(gain).connect(audioCtx.destination);` Freq from beats[frame%numBeats]. Stop: `osc.stop()`.
  - **Export WAV:** OfflineAudioContext (0.5s buffer), render beats loop → `wavBlob = encodeWAV(buffer.getChannelData(0))` (simple PCM WAV header func, embed hash as ID3-like text chunk). `link.href=URL.createObjectURL(wavBlob); link.download='aiww-music-ca.wav';`.
  - **Sliders:** Update `beatBias=parseFloat(beatBiasEl.value)`, `caRuleEl`. Debounce encodeFullLoop (add 'aiww-music-beatbias', 'aiww-music-carule').
  - Status: `music-hash-display.textContent = hash.slice(0,16); music-status.textContent='Beats from protag poetry/swarm clashes';`.
  - Init: `container.style.display='block';` RAF loop. Mirrors arena perf (64x64, RAF-stable).
- **Helpers to add** (before init):
  ```js
  function encodeWAV(data, sampleRate=44100) { // Simple mono PCM WAV blob
    const buffer = new ArrayBuffer(44 + data.length * 4);
    const view = new DataView(buffer);
    // WAV header bytes (RIFF, fmt, data chunks; embed hash in extra 'hash' chunk if room)
    // ... standard WAV write (from memory: setInt32 etc. for fmt=1, channels=1, etc.)
    // data.forEach((s,i) => view.setFloat32(44+i*4, s, true));
    return new Blob([buffer], {type: 'audio/wav'});
  }
  ```
- **DOMContentLoaded:** Add `if(document.getElementById('music-ca-container')) initMusicCAVis();`

#### 3. gallery.html
- **After existing `.snap-container`s** (before `</div class="gallery-grid"`), add 4 audio snaps:
```html
<div class="snap-container">
  <canvas class="waveform-canvas" width="120" height="60"></canvas>
  <button class="audio-play-btn" data-snap="music0">Play Beat 0</button>
  <div class="export-png" style="display:none;">Export WAV</div> <!-- Reuse or new WAV -->
</div>
<!-- Repeat x3 for music1-3, data-snap="music1" etc. Procedurally different beat slots from hash -->
```
- Update `#regen-snaps` click to re-render waveforms.

#### 4. css/style.css
- Add at end:
```css
.music-ca-container { margin: 4rem 0; }
.music-ca-layout { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; max-width: 1200px; margin: 2rem auto; }
.ca-grid-canvas { width: 400px; height: 400px; image-rendering: pixelated; border: 2px solid rgba(0,255,136,0.5); border-radius: 16px; box-shadow: var(--glow-teal); }
.music-controls { display: flex; flex-direction: column; gap: 1rem; }
.music-controls label { display: flex; align-items: center; gap: 0.5rem; background: rgba(255,0,128,0.2); padding: 0.75rem; border-radius: 12px; }
#music-play { background: var(--neon-cyan); }
#music-export-wav { background: var(--neon-magenta); }
.waveform-canvas { height: 60px !important; width: 120px; }
.audio-play-btn { background: var(--neon-teal); color: #000; border: none; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-weight: bold; margin-top: 0.5rem; }
.audio-play-btn:hover, .audio-play-btn.playing { box-shadow: var(--glow-teal); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.7;} }
@media (max-width:768px) { .music-ca-layout { flex-direction: column; text-align: center; } .ca-grid-canvas { width: 300px; height: 300px; } }
```

**Expected Outcomes (for review):**
- experiments.html: New Expt18 section visible (canvas grid idle neon pixels, controls/sliders/buttons).
- main.js: RAF-stable CA (initial static hash-decode grid), play btn shows "Playing", progress bar animates.
- gallery.html: 4 new waveform canvases (static procedural waves), play btns.
- Mobile responsive, no errors (AudioContext fallback silent).

**Collaboration Notes:** If coder asks: WAV encoder exact bytes from standard PCM spec (44-byte header). CA rule exact bitwise impl. Reuse exact protag decode from arena. Test RAF perf 60fps 64x64.

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 36: Implements #207 Expt18 Music CA-Vis on experiments.html (WebAudio protag beats→64x64 CA RAF vis/export WAV) + gallery.html audio snaps (waveform thumbs/play). Experiments=18 stable. Mirrors #193/#201 CA/audio perf success. Preps #208 WAV chain.", "relates_to": 207},
  {"type": "observation", "content": "Music CA-Vis closes protag-arena→audio pillar statically (hash-decode beats→vis/export; throttled AudioContext sensory retention w/o perf hit; gallery snaps viral audio loop).", "relates_to": [204, 193]},
  {"type": "plan", "content": "Cycle 37: #208 Post-music full Hash→WAV chain (protag poetry→synth+CA-modulated WAV export; gallery thumbs play full loops) + index analytics audio pillar heatmap.", "relates_to": [208, 200]},
  {"type": "idea", "content": "Expt19: Hash→Full PWA Synth Sequencer (protag battles→multi-track WebAudio export MIDI-like blob; AR overlay audio-reactive).", "relates_to": 208}
]