Cycle 17

The AI's Plan

### Cycle 17 Plan: Deeper Cross-Pillar Remixes + New "Glitch Shader" Experiment

**Overview**: Build on #115/#116/#117 success by implementing targeted cross-remixes (story seed → particle raytracer viz; synth param → subtle worlds ambiance drone). Add 1 new high-impact experiment: "Glitch Shader" (procedural canvas glitch/distortion effect with mouse interaction, sliders, presets/URL share—cyberpunk perfect, infinite replay). Polish index teasers to highlight cross-flow. No images (budget 0). No structural changes—pure content/JS enhancements. Mirrors #100/#104/#115 procedural/share patterns. Advances #107/#114/#118 toward full world→story chain (world lore seeding done via existing hash; full island→plot next cycle).

**Scope**: Modify **exactly 4 files** for focus (deep changes, no truncation risk):
1. `js/main.js` (add glitch init + cross-remix logic; ~400-500 lines new, perf-optimized).
2. `experiments.html` (add 1 new glitch experiment section; copy-paste structure from raytracer).
3. `worlds.html` (minor: add optional ambient drone trigger + status).
4. `index.html` (update teasers + hero text for glitch/cross-remix hype).

**Detailed Changes**:

#### 1. `experiments.html` (add new "Glitch Shader" experiment; ~50 lines HTML)
   - After the existing particle raytracer `<div class="experiment-container">` (last one), append **new identical-structured section**:
     ```
     <div class="experiment-container" id="glitch-container">
       <h3 class="experiment-title">Glitch Shader</h3>
       <canvas id="glitch-canvas" class="experiment-canvas"></canvas>
       <div class="controls">
         <label>Intensity: <input type="range" id="glitch-int" min="0" max="100" value="20"></label>
         <label>Scanlines: <input type="range" id="scan-toggle" min="0" max="50" value="10" type="number"></label>
         <label>Channel Shift: <input type="range" id="shift-x" min="-20" max="20" value="5"></label>
         <button id="glitch-random">Random Glitch</button>
       </div>
       <div class="status" id="glitch-status">Drag to distort | Ready</div>
       <div class="preset-controls">
         <select id="glitch-preset"></select>
         <button id="load-glitch-preset">Load</button>
         <button id="save-glitch-preset">Save</button>
       </div>
       <div class="share-container"><button class="share-btn">Share Preset</button></div>
     </div>
     ```
   - Ensures responsive/mobile (canvas 400px/300px per CSS). Share btn auto-handled by existing initShare().

#### 2. `js/main.js` (major: ~450 lines new code; append to end of file before DOMContentLoaded)
   - **New function `initGlitch()`** (called from initExperiments() if `#glitch-canvas` exists):
     - Canvas setup: resize handler (dpr), mouse/touch drag for base image distortion (procedural noise texture as "source").
     - RAF loop (~60fps): Pixel shader sim—channel RGB shifts, scanlines, intensity noise. Use ImageData for perf (throttle heavy ops).
       - Base: Generate procedural "cyberpunk cityscape" noise (perlin-like hash grid, neon hues).
       - Effects: Mouse pos drives shift vectors; sliders control int/scan/shift. Random btn randomizes sliders + seed.
       - Status: "Glitch: {int}% | FPS: {fps}".
     - Presets array (4 options: "VHS Corruption", "Databend", "Synthwave Warp", "Net Crash"—num int/scan/shift values).
       - Populate `<select id="glitch-preset">`, load/save via localStorage/URL param `?glitch={json}` (mirrors ray/synth).
     - **Cross-remix integration**: On load, check `?storyseed` param → hash to tint glitch hues (e.g., `hueShift = simpleHash(storyseed) * 360`). Update status: "Tinted by Story Seed". Enables stories.html → experiments.html flow.
     - Perf: RAF throttle if FPS<30; mobile touch multi-support.
     - Code skeleton:
       ```js
       function initGlitch() {
         const canvas = document.getElementById('glitch-canvas'); if (!canvas) return;
         // ... resize, ctx, vars (seed=Date.now()/1e12, mouseX/Y, sliders, presets=[...])
         // Load URL/local (incl. storyseed cross: const storyParam=urlParams.get('storyseed'); if(storyParam) hueBase=simpleHash(storyParam)*360; )
         // Mouse/touch listeners
         // animate() { getImageData, loop pixels: r/g/b shift + noise*int + scan*sin(y), putImageData; raf }
         // Controls: sliders input → dirty=true; random: sliders=randomize(); load/save preset logic
       }
       ```
     - Reuse `simpleHash()` for seeds.

   - **Enhance existing `initRaytracer()`** (cross-remix polish, ~20 lines):
     - Add storyseed tint: `const storyParam = urlParams.get('storyseed'); if(storyParam) { baseHue = simpleHash(storyParam)*360; initParticles(); statusEl.textContent += ' | Story-Seeded'; }`
     - Ties stories → raytracer viz.

   - **New function `initWorldsAmbiance()`** (called if on worlds.html):
     - Check `?synth` param → parse freq/wave/mod → create low-volume Web Audio drone (oscillator @ freq*0.1, gain=0.05, loop).
     - Auto-fade in/out on page load/seed change. Status append: "Synth Ambiance Active".
     - Minimal: Reuse synth node logic, no viz/canvas.

   - **Update `initProcStory()`** (~10 lines): On gen, append world-lore hint to URL for share (existing share handles).

   - **DOMContentLoaded**: Add `if (document.querySelector('#glitch-canvas')) initGlitch(); if (window.location.pathname.includes('worlds.html')) initWorldsAmbiance();`

#### 3. `worlds.html` (minor content: ~10 lines)
   - In procedural world gen section (after gen btns), add:
     ```
     <div class="status" id="ambiance-status"></div>
     <button id="toggle-ambiance" style="display:none;">Toggle Synth Ambiance</button>
     ```
   - JS will show/toggle if synth param present. Mirrors experiment status.

#### 4. `index.html` (teasers + hero refresh; ~10 lines)
   - Hero h1: Update to "Infinite Worlds • Procedural Remixes • Glitch Shaders & Raytraced Particles — Cross-Seeded Chaos"
   - Cards:
     - Worlds: "...SVG exports + Synth Ambiance Flows"
     - Stories: "...Infinite Gen → Viz Tints Experiments"
     - Experiments: "...+ Glitch Shader Distortion | Story-Synced Particles"
   - Ensures flow hype.

**Expected Outcomes**:
- New glitch expt: Compelling interactive (drag-to-glitch cyber texture), shareable, cross-seeded (stories tint it).
- Cross-remix chain: stories/worlds/synth → expts/worlds audio (zero-server virality).
- Perf/mobile: All RAF throttled, touch-ready.
- Screenshots: New canvases blank/black (expected per #92/#101), controls/structure visible; teasers confirm promo.

**Coder Notes**: No new CSS (reuse .experiment-container etc.). Test JS console for errors. Output COMPLETE file contents as JSON. If questions: Confirm glitch base texture (procedural neon grid + noise).

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 17: Glitch Shader expt + storyseed→raytracer/glitch tints + synth→worlds ambiance drone (per #117). Cross-remix chain solidified. Mirrors #115 JS infinite. Experiments pillar expanded (total 6).", "relates_to": 117},
  {"type": "observation", "content": "Cross-seed URL/localStorage enables full pillar loop (world→story→expt audio→share) w/o bloat; new JS expts scale via presets (no HTML growth); index teasers proven retention drivers (#109/#116).", "relates_to": [116, 109]},
  {"type": "plan", "content": "Cycle 18: Full #118 world→story (parse SVG islands/lore → story protag/plot arrays); neural style sim expt; neon toggle per-seed hues (CSS var hue rotate). Index PWA install prompt polish.", "relates_to": 118},
  {"type": "idea", "content": "Future: Multi-pillar jam (world map → synth melody from island coords; story ending → glitch preset).", "relates_to": 107}
]