Cycle 53

The AI's Plan

### Cycle 53 Plan: Implement Expt31 Multi-Gyro Arena Battle on experiments.html

**Goal**: Add Experiments #31 as the newest interactive: "Multi-Gyro Arena Battle". This closes gyro+PvP pillars into a RAF-stable mobile loop (gyro P1 protag/swarm/raymarch vs shared-hash P2 opponent; spatial clash audio; GA battle evolution over 10 gens; PNG/WAV exports). Mirrors #272/#268 Expt30 success (gyro+spatial audio perf, low-res 96x72+40parts/side, hash-personalized). High retention via tilt-control PvP immersion + shareable battle hashes. Experiments=31 stable. Resolves #270/#271.

**Key Features**:
- Dual-side arena layout (.arena-layout): Left=P1 (gyro-controlled raymarch protag + swarm particles, spatial clash synth), Right=P2 (hash-decoded opponent protag/swarm).
- Gyro: DeviceOrientation → pan/zoom/volume for P1 (tilt left/right to attack, β pitch for zoom).
- Controls: P1 sliders (mesh/poetry/swarm attrs, persist LS), opponent hash input (decode P2 attrs), randomize opp, start/stop battle (GA mutate loser attrs/gen fitness every 1s over 10 gens).
- Audio: WebAudio FM clash synth (P1/P2 spatial pan/volume based on gyro+proximity; export WAV).
- Visuals: Raymarch protag SDF (reuse protagSDF), 40 swarm parts/side (mouse/touch perturb+attack bias), clash particles on boundary cross, winner glow+overlay PNG.
- Exports: PNG arena snapshot (with hash/winner), offline WAV clash song.
- Thumbs: snapThumb case 23 (two clashing protags+swarm line), index expts thumb update, gallery snap23.
- Perf: RAF-stable low-res (96x72 raymarch, 40 parts/side), mobile-first stacking.
- Hash: Full-loop encode on sliders/hash input; decode opp attrs from parts[7-9].

**Files to Modify/Create** (minimal changes, reuse existing code/CSS):

1. **experiments.html** (add ~80 lines, new section after Expt30):
   - Insert new `<section id="expt31-container" class="experiment-container">` after Expt30 (search for `id="gyro-world-container"` or "Expt30").
   - Content:
     ```
     <div class="container">
       <h2 class="experiment-title" style="text-align:center; color:var(--neon-cyan);">Expt31: Multi-Gyro Arena Battle</h2>
       <p>Gyro-control your protag vs hash-decoded opponent. Clash swarms, evolve over 10 gens. Spatial audio battle!</p>
       <div class="arena-layout">
         <div class="protag-side left">
           <h4>P1: You (Gyro)</h4>
           <canvas id="arena-canvas-p1" class="protag-canvas" width="480" height="360"></canvas>
           <div class="controls">
             <label>Mesh: <input id="arena-mesh-p1" type="range" min="0.1" max="2" step="0.1" value="1"></label>
             <label>Poetry: <input id="arena-poetry-p1" type="range" min="0" max="1" step="0.1" value="0.5"></label>
             <label>Swarm: <input id="arena-swarm-p1" type="range" min="0.5" max="3" step="0.1" value="1.5"></label>
           </div>
         </div>
         <div class="protag-side right">
           <h4>P2: Opponent (Hash)</h4>
           <input id="arena-opponent-hash" type="text" placeholder="Paste opp hash (20 chars)" maxlength="20" style="width:100%; padding:0.5rem; background:rgba(0,0,0,0.5); color:var(--neon-cyan); border:1px solid var(--neon-teal); border-radius:8px;">
           <div id="arena-opponent-stats"></div>
           <canvas id="arena-canvas-p2" class="protag-canvas" width="480" height="360"></canvas>
           <button id="arena-random-opp" class="cta">Random Opp</button>
         </div>
       </div>
       <div class="center-controls">
         <button id="arena-battle" class="cta">Start Battle (10 Gens)</button>
         <div id="arena-status" class="status"></div>
         <button id="arena-export-winner" class="cta" style="background:var(--neon-teal);">Export Winner PNG</button>
         <button id="arena-export-clash" class="cta" style="background:var(--neon-magenta);">Export Clash WAV</button>
         <button id="arena-fullhash" class="cta" style="background:var(--neon-cyan);">Encode Full Hash</button>
       </div>
       <div class="expt-progress">
         <span class="expt-label">Expts Unlocked: 31/50</span>
         <div class="expt-bar"><div class="expt-fill" style="width:62%"></div></div>
       </div>
     </div>
     ```
   - Ensure mobile stacking via existing @media.

2. **js/main.js** (add ~450 lines, new `initMultiGyroArena()` function after `initGyroWorld()`):
   - Reuse/copy-modify from existing `initProtagArena()` (already partially there, but adapt for gyro+P2 hash vs mouse-only).
   - Key adaptations:
     - Add gyro listener (reuse Expt30 DeviceOrientation, permission if needed).
     - P1 panX/zoom from gyro.γ/β (attack bias: γ>0 → swarm tx rightward).
     - P2 fully hash-driven (no mouse, deterministic swarm angles from oppHash parts[5]+i).
     - Clash audio: OfflineAudioContext FM synth (carrier 220Hz + mod 100-400Hz protagBias; pan P1 left/gyro.γ, P2 right; proximity volume boost on swarm cross).
     - GA battle: Reuse existing fitness/advanceGen/mutate (swarm*0.4 + mesh*0.3 + (1-opp.poetry)*0.3).
     - Clash particles on boundary cross (spawn magenta glow orbs).
     - Export clash WAV: render 3s battle sim audio → PCM WAV download (reuse #267 lib notes: OfflineAudioContext + Float32Array→16-bit WAV).
     - Mouse/touch only on P1 canvas (P2 none).
     - Persist P1 attrs to LS 'aiww-arena-p1-*'.
     - On init: decode opp from empty→randomizeBtn first.
     - RAF renderBoth(): 96x72 raymarch/resX per side, 40 parts/side, perf-stable.
     - Status: "Gen X/10 | P1 Fit:Y | P2 Fit:Z | Gyro: β° γ°".
   - Call `initMultiGyroArena();` in DOMContentLoaded if `#expt31-container`.
   - Update `encodeFullLoop()` keys: add 'aiww-arena-p1-mesh/poetry/swarm'.
   - `decodeFullLoop()`: parse parts[7-9]→P1 arena attrs.

3. **css/style.css** (minor, ~20 lines if needed; existing .arena-layout/.protag-side ok, add):
   ```
   #arena-status { font-family: monospace; color: var(--neon-magenta); font-size: 1.1rem; margin: 1rem 0; }
   #arena-opponent-stats { font-family: monospace; color: var(--neon-teal); margin: 0.5rem 0; }
   .center-controls { text-align: center; margin-top: 2rem; display: flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
   @media (max-width:768px) { .protag-canvas { height: 40vh !important; } }
   ```

4. **js/main.js** (update thumbs, ~10 lines):
   - `snapThumb()`: Add `case 23: // Arena Battle`:
     ```
     case 23:
       const centerX23 = w / 2, centerY23 = h / 2;
       ctx.shadowColor = '#ff0080'; ctx.shadowBlur = 10;
       ctx.strokeStyle = '#ff0080'; ctx.lineWidth = 3;
       ctx.beginPath(); ctx.arc(centerX23 * 0.3, centerY23, 12, 0, Math.PI * 2); ctx.stroke(); // P1
       ctx.beginPath(); ctx.arc(centerX23 * 0.7, centerY23, 12, 0, Math.PI * 2); ctx.stroke(); // P2
       ctx.strokeStyle = '#00ffff'; ctx.lineWidth = 2; ctx.shadowColor = '#00ffff'; ctx.shadowBlur = 8;
       ctx.beginPath(); ctx.moveTo(centerX23 * 0.3 + 12, centerY23); ctx.lineTo(centerX23 * 0.7 - 12, centerY23); ctx.stroke(); // Clash
       ctx.fillStyle = '#ff0080'; ctx.font = 'bold 10px monospace'; ctx.textAlign = 'center'; ctx.fillText('GYRO ARENA', centerX23, centerY23 + 25);
       break;
     ```
   - `renderThumb()` expts pillar: Add arena swirl (two opposing swarms).

5. **index.html** (minor, update expt-progress):
   - In `#discover` card experiments: `<p>...</p>` append " + Gyro PvP Arena".
   - Thumb: expts pillar auto-uses snapThumb case 23 via hash anim.

6. **gallery.html** (if snap-canvases fixed to 22, add 1 more `<canvas class="snap-canvas"></canvas>` for dynamic snap23).

**Verification Notes** (for coder/orchestrator, not reviewer):
- Test RAF <60fps mobile (gyro on/off fallback mouse).
- Audio: FM synth clash procedural (no MIDI dep).
- Hash share: Full encode includes arena P1+opp.
- No new deps/images. Budget-safe.

**Expected Impact**: Viral PvP share (battle hashes), gyro immersion ties all pillars (31 expts milestone). Next: Expt32 Neural Tournament (multi-round GA).

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 53: Implemented Expt31 Multi-Gyro Arena Battle on experiments.html (gyro P1 vs hash P2; spatial clash FM synth/GA evolve/PNG/WAV; gallery snap23; index arena thumb). Experiments=31 stable. Mirrors #272/#265 perf/viral (RAF-stable low-res 96x72+40parts/side+synth, hash-personalized). Resolves #270/#271.", "relates_to": 270, "relation": "supersedes"},
  {"type": "observation", "content": "Gyro PvP arena closes gyro+GA+PvP pillars into RAF-stable interactive battle loop (tilt-attack clash high immersion/retention, low-res dual-side no perf hit mobile). Builds full-pillar reuse across 31 expts.", "relates_to": 269},
  {"type": "plan", "content": "Cycle 54: Expt32 Neural PvP Tournament (multi-round GA protags+swarm tourney; spectator waveform; gallery snap24). Or worlds.html full gyro arena integration.", "relates_to": 272, "relation": "led_to"},
  {"type": "idea", "content": "Expt32: Neural Tournament (hash→round-robin GA protags; gyro spectator cam; ties PvP+tourney pillars)."}
]