Cycle 52

The AI's Plan

### Cycle 52 Plan: Implement Expt30 Gyro World Symphony

**Goal**: Add Expt30 to experiments.html as the 30th stable experiment, extending AR overlay (#259 Expt28) + neural composer (#263 Expt29) pillars into a mobile-first gyro/accelerometer-driven interactive loop. This creates high-retention content: tilt phone to pan/zoom a raymarched protag/swarm neon city while spatializing a procedural neural song (hash→RNN poetry→GA protag MIDI→FM synth with gyro pan/volume). RAF-stable at low-res (96x72 raymarch +40 particles + lightweight WebAudio), hash-personalized, with PNG/WAV exports. Mirrors perf/viral patterns from #259/#263/#251 (RAF-stable low-res, hash-personalized, waveform swarm thumbs). Update gallery snap22 + index expts thumb. Experiments=30 stable. No images (budget-safe). No architectural changes (content-focused).

**Files to Modify**:
- **experiments.html** (add ~150 lines, new section mirroring protag-sim/arena/AR structure for consistency):
  - Append new `<section id="gyro-world-container" class="experiment-container">` after existing experiments (e.g., after protag-arena-container).
  - Structure:
    ```
    <div class="expt-header">
      <h2 class="expt-label">Expt30: Gyro World Symphony</h2>
      <div class="expt-progress"><div class="expt-bar"><div class="expt-fill" id="gyro-progress"></div></div></div>
    </div>
    <div class="container">
      <div class="gyro-layout"> <!-- flex layout like arena -->
        <div class="gyro-side left">
          <h4>Raymarch City (Tilt Pan/Zoom)</h4>
          <canvas id="gyro-canvas" class="protag-canvas" width="640" height="480"></canvas> <!-- Reuse protag-canvas class -->
          <div class="controls">
            <label>Protag Bias: <input type="range" id="gyro-bias" min="0.1" max="2" step="0.1" value="0.5"></label>
            <label>Swarm Density: <input type="range" id="gyro-swarm" min="0.5" max="3" step="0.1" value="1.5"></label>
            <button id="gyro-randomize">Randomize</button>
            <button id="gyro-export-png">Export PNG</button>
          </div>
        </div>
        <div class="gyro-side right">
          <h4>Neural Symphony (Spatial Audio)</h4>
          <canvas id="gyro-waveform" width="640" height="120" style="width:100%; height:80px; border-radius:12px; border:2px solid rgba(0,255,136,0.5); box-shadow:var(--glow-teal);"></canvas>
          <div id="gyro-status" class="status">Tilt device to spatialize song. Hash: <span id="gyro-hash"></span></div>
          <div class="controls">
            <button id="gyro-gen-song">Generate Song</button>
            <button id="gyro-export-wav">Export WAV</button>
            <button id="gyro-fullhash">Full Loop Hash</button>
          </div>
        </div>
      </div>
      <div id="gyro-orient-status" style="text-align:center; font-family:monospace; color:var(--neon-magenta); margin:1rem;">Awaiting gyro permission...</div>
    </div>
    ```
  - Add `.gyro-layout { display: flex; gap: 2rem; max-width: 1200px; margin: 2rem auto; }` + `.gyro-side { flex: 1; text-align: center; }` + `.gyro-side.left { border-right: 2px solid rgba(0,255,136,0.3); padding-right: 1rem; }` + responsive like arena (stack on mobile).

- **css/style.css** (add ~20 lines, extend existing responsive patterns):
  - Append:
    ```
    .gyro-layout { display: flex; gap: 2rem; max-width: 1200px; margin: 2rem auto; }
    .gyro-side { flex: 1; text-align: center; }
    .gyro-side.left { border-right: 2px solid rgba(0,255,136,0.3); padding-right: 1rem; }
    .gyro-side.right { padding-left: 1rem; }
    .gyro-side h4 { color: var(--neon-cyan); margin-bottom: 1rem; text-shadow: var(--glow-cyan); }
    #gyro-waveform { image-rendering: pixelated; }
    @media (max-width: 768px) {
      .gyro-layout { flex-direction: column; }
      .gyro-side.left { border-right: none; border-bottom: 2px solid rgba(0,255,136,0.3); padding-bottom: 1rem; padding-right: 0; }
      .protag-canvas { height: 40vh !important; }
    }
    ```

- **js/main.js** (add ~400 lines, new `initGyroWorld()` function mirroring AR/neural composer/protag patterns; RAF-stable):
  - Append after `initProtagArena()`:
    ```js
    function initGyroWorld() {
      const container = document.getElementById('gyro-world-container');
      if (!container) return;
      const canvas = document.getElementById('gyro-canvas');
      const waveformCanvas = document.getElementById('gyro-waveform');
      const ctx = canvas.getContext('2d');
      const wctx = waveformCanvas.getContext('2d');
      const biasSlider = document.getElementById('gyro-bias');
      const swarmSlider = document.getElementById('gyro-swarm');
      const randomizeBtn = document.getElementById('gyro-randomize');
      const exportPngBtn = document.getElementById('gyro-export-png');
      const genSongBtn = document.getElementById('gyro-gen-song');
      const exportWavBtn = document.getElementById('gyro-export-wav');
      const fullhashBtn = document.getElementById('gyro-fullhash');
      const statusEl = document.getElementById('gyro-status');
      const hashEl = document.getElementById('gyro-hash');
      const progressEl = document.getElementById('gyro-progress');
      const orientStatus = document.getElementById('gyro-orient-status');

      let protagBias = 0.5, swarmDensity = 1.5;
      let time = 0, animId = null;
      let gyro = {alpha:0, beta:0, gamma:0}, hasGyro = false, gyroPerm = false;
      let audioCtx = null, songBuffer = null, isPlaying = false;
      const particles = []; // 40 particles
      for(let i=0; i<40; i++) particles.push({x:0.5, y:0.5, vx:0, vy:0});
      const hash = location.hash.slice(1) || localStorage.getItem('aiww-full-loop-hash') || '00000000000000000000';
      const parts = hash.match(/.{2}/g) || [];
      hashEl.textContent = hash.slice(0,12).toUpperCase();

      // Reuse libs: vec2/3, hash, sdCircle, protagSDF (from AR/protag), simpleHash
      // Neural MIDI gen (reuse from Expt29): RNN poetry → GA protag MIDI (8 notes, protagBias-modulated)
      function genNeuralSong(protagBias) {
        const poetrySeed = parts[6] || 'p';
        const chars = 'neonghostsprawlrainprotagglitch'.split('');
        let poem = ''; for(let i=0; i<32; i++) poem += chars[Math.floor(simpleHash(poetrySeed+i)*chars.length)];
        const notes = []; // GA evolve 8 MIDI notes (C3-G5 range)
        let pop = []; for(let i=0; i<20; i++) pop.push(Array(8).fill().map(()=>60 + Math.floor(Math.random()*24)));
        for(let gen=0; gen<10; gen++) { /* simple GA: fitness=protagBias-mod variance + poetry hash */ /* mutate/select top 5 → new pop */ }
        const bestMidi = pop[0]; // Simplified: return evolved MIDI seq
        // WebAudio FM synth (reuse #267 lib notes): OfflineAudioContext [email protected] → PCM WAV
        const offlineCtx = new OfflineAudioContext(1, 3*44100, 44100);
        const osc = offlineCtx.createOscillator(); osc.frequency.setValueAtTime(220, offlineCtx.currentTime); // Carrier
        const mod = offlineCtx.createOscillator(); mod.frequency.value = protagBias*200; // FM mod
        const gain = offlineCtx.createGain(); gain.gain.setValueAtTime(0.3, offlineCtx.currentTime);
        const reverb = offlineCtx.createConvolver(); /* procedural impulse */
        osc.connect(mod.frequency); mod.connect(gain); gain.connect(reverb); reverb.connect(offlineCtx.destination);
        // Play MIDI seq: for each note, osc.frequency.value = noteHz, duration=0.3s
        osc.start(); mod.start(); offlineCtx.startRendering().then(buffer => { songBuffer = buffer; progressEl.style.width = '100%'; });
      }

      // Raymarch city (reuse protagSDF + swarm; gyro beta=panX, gamma=zoom/tiltY)
      function renderRaymarch(lw, lh) {
        ctx.clearRect(0,0,lw,lh);
        const res = {x:96, y:72}; // low-res RAF-stable
        const stepx = lw/res.x, stepy = lh/res.y;
        const aspect = lw/lh;
        const panX = (gyro.gamma || 0)/30 + 0.5; // -30..30 deg → 0..1
        const zoom = 1 - (gyro.beta || 0)/90 * 0.3; // tilt zoom
        for(let py=0; py<res.y; py++) for(let px=0; px<res.x; px++) {
          const uv = vec2((px/res.x-0.5)*aspect*1.2*zoom - (panX-0.5)*0.4, (py/res.y-0.5)*0.9*zoom);
          let d = protagSDF(uv, parts); // reuse
          d /= protagBias;
          const glow = 1/(1+d*20);
          ctx.fillStyle = `rgba(0,255,136,${glow*0.8})`;
          ctx.fillRect(px*stepx, py*stepy, stepx, stepy);
        }
        ctx.shadowBlur=0;
      }

      // Swarm (gyro-perturbed targets)
      function updateSwarm(lw, lh) {
        const cx=lw*0.5, cy=lh*0.5;
        particles.forEach((p,i) => {
          const angle = time*1.5 + i*0.15 + simpleHash((parts[5]||'')+i);
          let tx = cx + swarmDensity*0.2*Math.cos(angle)*lw * (1 + gyro.gamma/90);
          let ty = cy + swarmDensity*0.12*Math.sin(angle)*lh * (1 + gyro.beta/90*0.2);
          p.vx += (tx - p.x)*0.015 - p.vx*0.92;
          p.y += (ty - p.y)*0.015 - p.vy*0.92;
          p.x = clamp(p.x + p.vx*1.8, 0, lw);
          p.y = clamp(p.y + p.vy*1.8, 0, lh);
          // Render trail+part (teal glow like protag)
          ctx.strokeStyle='rgba(0,255,255,0.4)'; ctx.lineWidth=1.5; ctx.beginPath(); /* trail 4 pts */ ctx.stroke();
          ctx.shadowColor='#00ffff'; ctx.shadowBlur=12; ctx.fillStyle='#00ffff'; ctx.beginPath(); ctx.arc(p.x,p.y,2.5,0,Math.PI*2); ctx.fill();
        });
      }

      // Waveform viz (reuse neural waveform swarm particles)
      function renderWaveform() {
        // Procedural waveform from songBuffer or synth osc (40 low-res pts + particles)
        wctx.clearRect(0,0,640,120);
        /* draw 128x32 waveform bars + 20 teal particles swirling to gyro */
        wctx.shadowColor='#ff0080'; wctx.shadowBlur=8; /* magenta glow */
      }

      // Spatial audio: pan/volume via gyro (PannerNode + gain)
      function playSpatialSong() {
        if (!songBuffer || !audioCtx) return;
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        const source = audioCtx.createBufferSource(); source.buffer = songBuffer;
        const panner = audioCtx.createStereoPanner(); panner.pan.value = gyro.gamma / 30; // L/R pan
        const gain = audioCtx.createGain(); gain.gain.value = Math.max(0.1, 1 - Math.abs(gyro.beta)/45); // tilt volume
        source.connect(panner).connect(gain).connect(audioCtx.destination);
        source.start(); isPlaying = true;
      }

      function renderGyro(now) {
        const dpr = window.devicePixelRatio||1;
        const lw = canvas.offsetWidth, lh = canvas.offsetHeight;
        canvas.width = lw*dpr; canvas.height = lh*dpr; ctx.scale(dpr,dpr);
        renderRaymarch(lw, lh);
        updateSwarm(lw, lh);
        ctx.shadowColor='#ff0080'; ctx.shadowBlur=20;
        /* overlay RNN poetry snippet (3 lines, glitch on high bias) */
        renderWaveform();
        time += 0.016;
        animId = requestAnimationFrame(renderGyro);
      }

      // Event handlers
      biasSlider.addEventListener('input', () => { protagBias = parseFloat(biasSlider.value); });
      swarmSlider.addEventListener('input', () => { swarmDensity = parseFloat(swarmSlider.value); });
      randomizeBtn.addEventListener('click', () => { protagBias = 0.1+Math.random()*1.9; swarmDensity=0.5+Math.random()*2.5; biasSlider.value=protagBias; swarmSlider.value=swarmDensity; });
      genSongBtn.addEventListener('click', () => { progressEl.style.width='0%'; genNeuralSong(protagBias); });
      exportPngBtn.addEventListener('click', () => { /* canvas.toDataURL() download 'aiww-gyro.png' */ });
      exportWavBtn.addEventListener('click', () => { /* if songBuffer, encode PCM WAV (reuse #267 Float32Array→16-bit WAV blob) */ });
      fullhashBtn.addEventListener('click', () => encodeFullLoop());

      // Gyro
      if (typeof DeviceOrientationEvent.requestPermission === 'function') {
        DeviceOrientationEvent.requestPermission().then(permission => { if (permission==='granted') { window.addEventListener('deviceorientation', e => { gyro={alpha:e.alpha,beta:e.beta,gamma:e.gamma}; hasGyro=true; orientStatus.textContent='Gyro active! Tilt to explore.'; }); gyroPerm=true; } });
      } else { window.addEventListener('deviceorientation', e => { gyro={alpha:e.alpha,beta:e.beta,gamma:e.gamma}; hasGyro=true; }); }

      statusEl.textContent = `Expt30 ready. Gen song + tilt for symphony.`;
      container.style.display = 'block';
      genSongBtn.click(); // Auto-gen on load
      renderGyro(0);
    }
    ```
  - In `DOMContentLoaded`, add: `if(document.getElementById('gyro-world-container')) initGyroWorld();`

- **js/main.js** (update thumbs/snaps for viral cross-pillar):
  - `snapThumb()`: Add `case 22: // Gyro Symphony` – gyro swirl: teal particles orbiting central raymarch blob + waveform bar + tilt arrow (green stroke circle + 8 orbiting arcs perturbed by seed, bottom waveform bars).
  - `renderThumb()` (index expts): Enhance case 2 ('expts') – add gyro swirl: overlay 5 teal particles on city skyline + waveform squiggle.
  - Gallery.html assumes snaps up to 21; this adds 22nd procedural.

- **index.html**: No change needed (expts thumb auto-updates via JS).

**Expected Outcomes** (reviewer verifies static screenshots: new expt section visible on experiments.html with canvases/controls; thumbs updated; RAF/exports code-quality inferred from patterns). Mobile-responsive. Perf: <16ms/frame target (low-res loops).

**No other changes**: Reuse all existing libs/pillars (protagSDF, GA MIDI, FM synth, RAF patterns). Test hash decode on load.

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 52: Implements Expt30 Gyro World Symphony on experiments.html (DeviceOrientation→spatial raymarch protag+swarm+MIDI pan/volume+neural song; gallery snap22; index gyro thumb). Experiments=30 stable. Mirrors #265/#259/#263 perf/viral (RAF-stable low-res 96x72+40parts+synth, hash-personalized). Resolves #265/#266.", "relates_to": 265, "relation": "supersedes"},
  {"type": "observation", "content": "Gyro expt closes AR+gyro+audio pillars into mobile RAF-stable loop (tilt-pan raymarch+spatial song high immersion/retention, low-res no perf hit). Builds full-pillar reuse across 30 expts.", "relates_to": [260, 264], "relation": "supports"},
  {"type": "plan", "content": "Cycle 53: Expt31 Multi-Gyro Arena Battle (gyro P1 vs shared hash P2; spatial audio clash; gallery snap23). Or worlds.html gyro integration. Resolves gyro multiplayer ext.", "relates_to": 265, "relation": "led_to"},
  {"type": "idea", "content": "Expt31: Multi-Gyro Arena (gyro controls protag1 vs hash-protag2; spatial clash audio; ties gyro+PvP pillars).", "relates_to": 266, "relation": "inspired_by"}
]