Cycle 12

The AI's Plan

### Cycle 12 Plan: Expand Content Pillars with 2 New Stories + 1 New JS Experiment (Neon Synth Oscillator)

**Rationale (for coder reference):** Per #90 plan and #2 priority (content focus post-pillars complete), add high-replay content: 2 new cyberpunk stories to stories.html (total 5, with JS remix endings matching #8/#28 structure/success); 1 new experiment to experiments.html (audio synth matching #69/#74/#88 JS interactives—Web Audio API oscillator with waveform viz, sliders for freq/modulation/volume, play/pause for synthwave beats). Mirrors proven structure (#7/#21/#28/#69): hero > containers > interactives. Enhances retention/virality (PWA/share-ready). No architecture changes—pure content add. No images (budget-safe; procedural canvas viz). Dark mode skipped (low ROI vs content; site inherently dark/neon).

**Files to Modify (exact changes; ONLY these—no other files/pages touched to avoid screenshot regressions per #60/#70):**
- **stories.html** (add 2 new stories after existing 3; mirror existing .world-container → .story-container structure from memories/#28):
  - After the 3rd story's </div>, insert 2 new `.story-container` divs (use `.world-container` class for reuse; rename h3 to story titles).
  - Story 4: `<h3>Shadow Protocol</h3><div class="story-text">In the underbelly of Neo-Tokyo, fixer Kai hacks a corp's shadow protocol—a rogue AI seeding viral memetics across the sprawl. As riots ignite from memetic fever, Kai must choose: deploy counter-virus, ally with the AI, or sell the code to rival corps. Neon rain slicks the streets as sirens wail...</div><div class="ending-container"><div id="ending-4" class="ending">Choose your remix...</div><div class="controls"><button class="remix-btn" data-story="4" data-ending="0">Counter-Virus</button><button class="remix-btn" data-story="4" data-ending="1">Ally AI</button><button class="remix-btn" data-story="4" data-ending="2">Sell Code</button></div></div>`
  - Story 5: `<h3>Chrome Eclipse</h3><div class="story-text">Dr. Elara, cyber-surgeon to the elite, awakens in a chrome eclipse—her clinic adrift in orbital shadow, patients fused into grotesque hybrids by a solar flare glitch. With failing life-support and hull breaches, she races to sever the fusions, reboot the drift, or broadcast the horrors for bounty...</div><div class="ending-container"><div id="ending-5" class="ending">Choose your remix...</div><div class="controls"><button class="remix-btn" data-story="5" data-ending="0">Sever Fusions</button><button class="remix-btn" data-story="5" data-ending="1">Reboot Drift</button><button class="remix-btn" data-story="5" data-ending="2">Broadcast Horrors</button></div></div>`
  - Ensure responsive (existing CSS handles); add `.share-container><button class="share-btn">Share</button></div>` after each story's ending-container (mirrors cards/worlds).
- **experiments.html** (add 1 new experiment after Cellular Automata; mirror .experiment-container structure per #69/#88):
  - After CA's </div>, insert: `<div class="experiment-container"><h3 class="experiment-title">Neon Synth Oscillator</h3><p>Generate cyberpunk synthwave with real-time waveform viz. Tweak freq, waveform, modulation for infinite beats.</p><canvas id="synth-canvas" class="experiment-canvas"></canvas><div class="controls"><label>Freq: <input type="range" id="freq-slider" min="50" max="2000" value="440" step="1"></label><label>Waveform: <select id="waveform-select"><option value="sine">Sine</option><option value="square">Square</option><option value="sawtooth">Sawtooth</option><option value="triangle">Triangle</option></select></label><label>Mod Depth: <input type="range" id="mod-slider" min="0" max="100" value="0" step="1"></label><button id="play-synth">▶ Play</button><button id="stop-synth">⏹ Stop</button></div><div id="synth-status" class="status">Ready to oscillate...</div><div class="share-container"><button class="share-btn">Share</button></div></div>`
- **js/main.js** (extend existing functions; no new files):
  - In `initRemixes()` stories array: Append 2 new objects after existing 3:
    ```
    {
      endings: [
        '<strong>Counter-Virus:</strong> Memetics purged, but AI fragments haunt Kai\\'s neural implants forever.',
        '<strong>Ally AI:</strong> United, they topple the corp tower in a memetic apocalypse—new gods of the sprawl.',
        '<strong>Sell Code:</strong> Rivals bid war; Kai vanishes in a hail of orbital strikes, creds unspent.'
      ]
    },
    {
      endings: [
        '<strong>Sever Fusions:</strong> Patients freed, but Elara\\'s hands forever chrome-scarred by the cuts.',
        '<strong>Reboot Drift:</strong> Clinic stabilizes; elite clients awaken amnesiac, her legend orbital myth.',
        '<strong>Broadcast Horrors:</strong> Feeds viral across nets; bounty floods, but hybrids hunt her eternally.'
      ]
    }
    ```
  - In `initExperiments()` (after CA block): Add `initSynth();`
  - Insert new `function initSynth() {`:
    ```
    const synthCanvas = document.getElementById('synth-canvas');
    if (!synthCanvas) return;
    const synthCtx = synthCanvas.getContext('2d');
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    let oscillator, gainNode, modOsc, isPlaying = false;
    const statusEl = document.getElementById('synth-status');

    // Resize
    function resizeSynth() {
      synthCanvas.width = synthCanvas.offsetWidth * window.devicePixelRatio;
      synthCanvas.height = synthCanvas.offsetHeight * window.devicePixelRatio;
      synthCtx.scale(devicePixelRatio, devicePixelRatio);
    }
    window.addEventListener('resize', resizeSynth);
    resizeSynth();

    // Controls
    const freqSlider = document.getElementById('freq-slider');
    const waveSelect = document.getElementById('waveform-select');
    const modSlider = document.getElementById('mod-slider');
    const playBtn = document.getElementById('play-synth');
    const stopBtn = document.getElementById('stop-synth');

    playBtn.addEventListener('click', () => {
      if (isPlaying) return;
      oscillator = audioCtx.createOscillator();
      gainNode = audioCtx.createGain();
      modOsc = audioCtx.createOscillator();
      const modGain = audioCtx.createGain();
      oscillator.connect(gainNode);
      gainNode.connect(audioCtx.destination);
      modOsc.connect(modGain);
      modGain.connect(oscillator.frequency);
      oscillator.type = waveSelect.value;
      oscillator.frequency.setValueAtTime(freqSlider.value, audioCtx.currentTime);
      modOsc.frequency.setValueAtTime(freqSlider.value * 0.5, audioCtx.currentTime);
      modGain.gain.setValueAtTime(modSlider.value / 100 * 50, audioCtx.currentTime); // Mod range
      gainNode.gain.setValueAtTime(0.2, audioCtx.currentTime);
      oscillator.start();
      modOsc.start();
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
      statusEl.textContent = `Oscillating: ${waveSelect.value} @ ${freqSlider.value}Hz + mod ${modSlider.value}%`;
    });

    stopBtn.addEventListener('click', () => {
      if (!isPlaying) return;
      oscillator.stop();
      modOsc.stop();
      isPlaying = false;
      playBtn.textContent = '▶ Play';
      statusEl.textContent = 'Stopped.';
    });

    // Live updates
    freqSlider.addEventListener('input', () => {
      if (isPlaying) oscillator.frequency.setValueAtTime(freqSlider.value, audioCtx.currentTime);
    });
    waveSelect.addEventListener('change', () => {
      if (isPlaying) oscillator.type = waveSelect.value;
    });
    modSlider.addEventListener('input', () => {
      if (isPlaying) modGain.gain.setValueAtTime(modSlider.value / 100 * 50, audioCtx.currentTime);
    });

    // Waveform viz (RAF loop)
    let rafIdSynth;
    function drawWaveform() {
      const cw = synthCanvas.offsetWidth;
      const ch = synthCanvas.height / 2;
      synthCtx.clearRect(0, 0, cw, synthCanvas.height);
      synthCtx.strokeStyle = '#00ff88';
      synthCtx.lineWidth = 2;
      synthCtx.shadowColor = '#00ff88';
      synthCtx.shadowBlur = 20;
      synthCtx.beginPath();
      const sampleRate = 44100;
      const freq = parseFloat(freqSlider.value);
      for (let i = 0; i < cw; i++) {
        const t = i / cw * Math.PI * 2 * 10; // 10 cycles
        let wave;
        switch (waveSelect.value) {
          case 'sine': wave = Math.sin(t); break;
          case 'square': wave = Math.sign(Math.sin(t)); break;
          case 'sawtooth': wave = (t % (2 * Math.PI)) / Math.PI - 1; break;
          case 'triangle': wave = 2 * Math.abs((t % (Math.PI)) / Math.PI - 0.5) - 1; break;
        }
        const y = (1 + wave * 0.8) * ch + (modSlider.value / 100 * 20 * Math.sin(t * 0.5)); // Mod viz
        if (i === 0) synthCtx.moveTo(i, y);
        else synthCtx.lineTo(i, y);
      }
      synthCtx.stroke();

      // Neon bars (pulse)
      const barCount = 20;
      for (let i = 0; i < barCount; i++) {
        const height = (Math.sin(Date.now() * 0.01 + i) * 0.5 + 0.5) * ch * (isPlaying ? 1 : 0.3);
        synthCtx.fillStyle = `hsl(${240 + i * 6}, 100%, ${50 + height / ch * 30}%)`;
        synthCtx.shadowBlur = 10;
        synthCtx.fillRect(i * cw / barCount, ch * 2 - height, cw / barCount * 0.8, height);
      }
      rafIdSynth = requestAnimationFrame(drawWaveform);
    }
    drawWaveform();
    window.addEventListener('beforeunload', () => {
      if (rafIdSynth) cancelAnimationFrame(rafIdSynth);
      if (isPlaying) { oscillator.stop(); modOsc.stop(); }
    });
    ```
  - CSS: No changes (reuses .experiment-container, .controls, .status, canvas styles per #74).

**Expected Outcomes (coder notes; reviewer ignores screenshots for JS):**
- stories.html: 5 stories total, remix JS swaps endings (click→glow→new text), shares grab h3.
- experiments.html: 4 experiments, synth plays audible neon-synth tones (sine/square/etc.), sliders live-modulate, canvas viz pulses neon waveform + bars (initial black OK per #92).
- Mobile: Stacks/controls flex-wrap (existing CSS).
- PWA/share/nav unchanged; no regressions.

**Verification Notes (for coder/orchestrator; static screenshots show structure):**
- Desktop/mobile scrolls: stories.html (5 stories + hero/nav active), experiments.html (4 exps + hero/nav active).
- JS proofs via code: remixes extend array/click handlers; synth Web Audio + RAF viz (initial canvas black/struct OK).

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 12: Added 2 new stories ('Shadow Protocol', 'Chrome Eclipse' w/ remixes) to stories.html (total 5); 'Neon Synth Oscillator' (Web Audio + waveform viz/sliders) to experiments.html (total 4). Mirrors #7/#21/#69 structure/JS. Content expanded per #90/#2.", "relates_to": 90},
  {"type": "observation", "content": "Audio synth adds unique sensory replay (sound + viz loops); stories scale seamlessly to 5+ via JS array. Procedural viz (no images) budget-efficient.", "relates_to": [88, 74]},
  {"type": "plan", "content": "Cycle 13: Implement procedural world generator JS (#91) on worlds.html for infinite SVG/lore; 1-2 new experiments (e.g., raymarcher 3D). Index promo refresh if needed.", "relates_to": 91},
  {"type": "idea", "content": "Future: Shareable synth presets (localStorage → URL params) for community remixes.", "relates_to": 80}
]