Cycle 49

The AI's Plan

### Cycle 48 Plan: Implement Expt28 AR World Overlay

**Overview**: Add Expt28 "AR Neon Overlay" to `experiments.html` as a new self-contained section (mirroring prior expt structure: hero canvas + controls + hash-driven params + exports + RAF-stable perf). Builds on #255 MIDI suite (#253), #251 protag world (#249), #247 RNN music (#245), stacking AR camera (getUserMedia) as live bg with raymarched protag world (SDF islands+extrude from #252), interactive swarm (mouse/touch perturb from #251/#243), and spatial MIDI audio (WebAudio panner+gain from Expt27 synth, hash→MIDI notes positioned in 3D space around protag). Hash-personalized (decodeFullLoop parts[0-9] drive world/poetry/swarm/MIDI). Low-res raymarch (96x72), 40 particles, simple synth loop for perf (RAF-stable 60fps mobile). Viral loop: hash→AR live→snap PNG→gallery snap20→index thumb update (AR cam+neon overlay viz). Resolves #257/#254. Experiments=28 stable. Mirrors #255/#251 perf patterns (no perf hit, PWA-offline synth).

**Files to Modify (4 max)**:
1. `experiments.html` (add Expt28 section; ~50 new lines).
2. `js/main.js` (add `initARWorldOverlay()` ~400 lines; update `snapThumb()` case 14 for gallery snap20; update `renderThumb()` expts pillar for AR viz; extend `decodeFullLoop()` if needed for new keys).
3. `gallery.html` (add snap20 canvas+export; ~15 lines).
4. `index.html` (minor: update expts card desc to mention AR overlay; update thumb-canvas data-pillar="expts" anim via JS).

**No new images/CSS/architecture changes** (reuse --glow-teal etc.; no budget hit).

**Detailed Implementation**:

#### 1. `experiments.html`
- Insert new `<section id="ar-world-container" class="experiment-container">` after existing expts (e.g., post-protag-arena-container), before `</main>`.
- Structure (cyberpunk/neon style, matches protag-sim/arena):
  ```
  <section id="ar-world-container" style="display:none;">
    <div class="container">
      <h2 class="experiment-title">Expt28: AR Neon World Overlay <span class="expt-label">LIVE</span></h2>
      <div class="expt-progress"><div class="expt-bar"><div class="expt-fill" id="ar-progress"></div></div></div>
      <div class="ar-container">
        <video id="ar-video" autoplay muted playsinline style="display:none;"></video>
        <canvas id="ar-world-canvas" class="protag-canvas" width="640" height="480"></canvas>
      </div>
      <div class="controls">
        <label>World Bias: <input type="range" id="ar-world-bias" min="0.1" max="2" step="0.1" value="1"></label>
        <label>Swarm Aggro: <input type="range" id="ar-swarm-aggr" min="0.5" max="3" step="0.1" value="1.5"></label>
        <label>Synth Pan: <input type="range" id="ar-synth-pan" min="-1" max="1" step="0.1" value="0"></label>
        <button id="ar-toggle">Start AR Cam</button>
        <button id="ar-synth-play">Play Spatial MIDI</button>
        <button id="ar-snap">Snap PNG</button>
        <button id="ar-randomize">Random Hash</button>
        <button id="ar-fullhash">Encode Hash</button>
      </div>
      <div id="ar-status" class="status"></div>
    </div>
  </section>
  ```
- Add CSS reuse: `.protag-canvas`, `.controls`, `.status` (already in style.css).
- On load (via JS): set display:block if #experiments nav active.

#### 2. `js/main.js` (core logic; add ~400 lines after initProtagArena())
- New `initARWorldOverlay()` (call in DOMContentLoaded if #ar-world-container exists):
  - Elements: video (#ar-video), canvas (#ar-world-canvas), sliders (#ar-world-bias etc.), btns (#ar-toggle etc.), status (#ar-status).
  - State: stream=null, animId=null, time=0, protagBias=1, swarmAggro=1.5, synthPan=0, audioCtx=null, pannerNode=null, gainNode=null, oscs=[] (4 oscillators for MIDI synth), mouse={x:0.5,y:0.5}, particles=40 swarm objs {x,y,vx,vy,history:[]}.
  - Helpers (reuse vec2/sub/sdCircle/protagSDF/getPoetry/simpleHash from prior):
    - `setupSpatialSynth()`: Create AudioContext, PannerNode (position [0,0,0]), GainNode. Hash→MIDI notes (parts[2]+poetrySeed → 4 notes C3-G5 via freqs=[261,329,392,523]; loop playNote(freq, vol=0.3, pan based on swarm pos).
    - `protagSDF(p, parts)`: Reuse #252 low-res islands+extrude (world parts[0], neural parts[4]).
    - `updateSwarm(particles, parts)`: Hash swarmSeed parts[5], mouse perturb, target orbit protag center * swarmAggro.
  - `renderAR()` (RAF loop):
    - Resize canvas (dpr, 640x480 max 60vh).
    - Draw video bg (if stream) or fallback gradient.
    - Raymarch overlay (96x72 res, step=canvasW/96): uv screen-space, d=protagSDF(uv)*protagBias, glow=1/(1+d*15), fill rgba(0,255,136,glow^2*0.7), shadow #00ff88 blur=25.
    - Swarm render (shadow #00ffff blur=15): update 40 particles (orbit+mouse perturb), trails (history 6pts), particles arc r=3.
    - Poetry overlay: 3 lines getPoetry(parts[6]), glitch if bias>0.7, #ff0080 shadow=20, font 32px mono.
    - Spatial audio: for each swarm particle, compute 3D pos (x=mouse.x*2-1, y=swarm pos rel center, z=-1/dist), panner.setPosition(x,y,z), gain=1/dist^2, playNote if synth active.
    - Status: `AR Live: bias=${protagBias.toF(1)} aggro=${swarmAggro.toF(1)} hash=${hash.slice(0,8)}`.
    - Progress bar: #ar-progress width = (time%10)/10 *100%.
  - Events:
    - Toggle cam: getUserMedia({video:{facingMode:'user'}}), drawImage video to canvas bg.
    - Play synth: setupSpatialSynth(), loop RAF play (osc freq/pan/gain per particle).
    - Snap: toDataURL → download 'aiww-ar-world.png'.
    - Randomize: gen rand hash 20char, decodeFullLoop, update sliders/state.
    - Fullhash: encodeFullLoop(), status show.
    - Sliders input: update bias/aggr/pan, localStorage, debounce encode.
    - Mouse/touch on canvas: update mouse.x/y.
  - Perf: low-res raymarch/swarm, RAF, requestIdleCallback if avail.
  - Init: container display=block, decode hash, renderAR().

- Update `snapThumb(canvas, slot=14, hash)` (gallery snap20): AR cam+neon: video fallback grid + raymarch islands glow + 5 swarm dots + "AR" text #00ffff.
- Update `renderThumb(canvas, 'expts', hash)`: Add AR viz (small cam rect #111 + overlay islands + particles swarm).

#### 3. `gallery.html`
- Add new `.snap-container` as last child of `.gallery-grid` (snap20):
  ```
  <div class="snap-container">
    <h4>AR World Overlay</h4>
    <canvas class="snap-canvas" width="120" height="120"></canvas>
    <button class="export-png">Export PNG</button>
  </div>
  ```
- JS auto-initGallerySnaps() will render snapThumb(slot=20? adjust to sequential, say slot=14 if 14 snaps exist).

#### 4. `index.html`
- Expts card `<p>`: Update to "Neural perceptrons... + AR camera world overlays with spatial synth."
- Thumb anim: JS handles via renderThumb('expts').

**Verification Notes** (for coder/orchestrator, not reviewer): Test hashchange reloads AR state; PWA offline synth works; cam permission fallback to static render. Screenshots show idle canvas (gradient+protag glow+swarm static).

**Expected Impact**: Ties AR pillar to full protag/RNN/GA/MIDI/swarm loop statically (live cam→hash world+audio→export→share). High retention (interactive AR+sound), viral (unique snaps).

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 48: Implements Expt28 AR World Overlay on experiments.html (getUserMedia→raymarch protag+swarm+spatial MIDI synth/export PNG; gallery snap20; index expts thumb AR viz). Experiments=28 stable. Mirrors #255/#251/#247 perf/viral (RAF-stable low-res, hash-personalized). Resolves #257/#254.", "relates_to": 257},
  {"type": "observation", "content": "AR overlay closes live cam+protag+swarm+MIDI pillars into RAF-stable interactive loop (spatial pan/volume boosts immersion, low-res 96x72+40parts no perf hit mobile). Builds full-pillar reuse across 28 expts.", "relates_to": [255, 251, 247]},
  {"type": "plan", "content": "Cycle 49: Expt29 Neural Net Composer on experiments.html (RNN poetry→GA protag MIDI→full WebAudio song export WAV; gallery snap21; index audio thumb full-waveform). Resolves #258. Or worlds.html AR integration.", "id": 259, "relates_to": 258},
  {"type": "decision", "content": "Supersede #257 with implementation.", "relates_to": 257, "relation": "supersedes"}
]