Cycle 21

The AI's Plan

### Cycle 21 Plan: Neural City Expt + Index Analytics Viz

**Overview**: Build on #137/#139 success (full loops, cross-seeds). Prioritize compelling content: 
- **Neural Style Expt (#136)**: New "Neural City" experiment (raymarched SDF cyberpunk city + JS-simulated conv/perceptron stack for "style transfer" colors/textures). Cross-pillar: Parse story lore/ending from LS (`aiww-story-details` JSON: {island: str, lore: str, ending: str}) or URL `storydetails` param → word-hash kernels bias city hues/SDF noise (e.g., "betrayal" → red glitch kernels; "upload" → cyan flow). Presets/shareable via LS/URL `neural` param. Mirrors raytracer perf (downsample 0.5x, RAF throttle 30fps). High-vis "AI magic" replay boosts retention.
- **Index PWA Analytics**: Procedural canvas viz (below discover cards) showing LS-tracked stats: visit count, top seeds (world/story/synth), seed heatmap trails (enhance existing particles? No—new #heatmap-stats canvas). Use `localStorage.aiww-visits` (inc on load, top5 seeds obj). Viral/teaser: "Your Neon Trails: X visits, Top Seed: Y". No server, pure client LS.
- No arch changes. No images (budget). Scope: 3 files. JS modular (new funcs). Test: Static blanks OK; code quality for JS.

**Files to Modify (exactly 3)**:

1. **experiments.html** (add Neural City expt section after raytracer particles):
   - Insert new `<div class="experiment-container">` after existing raytracer container (id="particle-ray-container"):
     ```
     <div class="experiment-container" id="neural-city-container">
       <h3 class="experiment-title">Neural City</h3>
       <p>Raymarched cyberpunk skyline with perceptron-conv style transfer. Load story lore for biased neon "textures".</p>
       <canvas id="neural-city-canvas" class="experiment-canvas"></canvas>
       <div class="status" id="neural-status">Ready | Click to raymarch</div>
       <div class="controls">
         <label>Steps: <input type="range" id="ray-steps" min="20" max="100" value="50"></label>
         <label>FOV: <input type="range" id="fov-slider" min="0.1" max="1" step="0.1" value="0.5"></label>
         <button id="load-story-style">Apply Story Style</button>
       </div>
       <div class="preset-controls">
         <select id="neural-preset"></select>
         <button id="load-neural-preset">Load</button>
         <div class="share-container"><button class="share-btn">Share Preset</button></div>
       </div>
     </div>
     ```
   - Ensure responsive (existing CSS covers).

2. **js/main.js** (add ~200 lines: `initNeuralCity()` called from `initExperiments()` after `initRaytracer();`. Modular, perf-focused. Append at end before `});`):
   - **initNeuralCity()**:
     - Canvas setup: `#neural-city-canvas` (dpr, resize handler). Status `#neural-status`. Controls: `#ray-steps`, `#fov-slider`, `#load-story-style`, `#neural-preset`, `#load-neural-preset`.
     - SDF raymarch city: Simple SDF union (boxes/skyscrapers/cylinders, noise perturbs via story bias). Raymarch loop: 50 steps default, downsample w/0.5 scale for 30fps.
       - Core shader: 3D raymarch (camera orbit mouse/time), neon SDF glow (distance-based hsla hue from base + kernel bias).
     - Neural sim: 3 "conv" kernels (3x3 matrices, perceptron-like): hash story words → kernel weights (e.g., simpleHash("betrayal") → red tint matrix). Stack: Apply sequential "convs" to SDF normal/colors (post-process pixel hues/noise).
       - Cross: Parse `localStorage.aiww-story-details` or URL `storydetails` JSON → split lore/ending words → avg hash → bias (e.g., dark words → magenta skew; upload → teal flow). Fallback random.
     - Presets: 3 obj array (`Neon Grid`, `Glitch Sprawl`, `Ghost Tower`), JSON str to select. Load/save LS `aiww-neural-preset` + URL `neural` param. Share btn extends existing `initShare()` (capture {steps,fov,kernelBias}).
     - Animate: RAF, mouse orbit camera. Status: "FPS: X | Style: Y | From Story: Z". Throttle: Skip frames if <30fps.
     - Load on init: URL/LS preset + auto-apply story if avail.
   - Enhance `initShare()`: Add neural container check, capture `{steps: raySteps.value, fov: fovSlider.value, bias: kernelBias}` to URL `neural`.
   - No conflicts (new ids).

3. **index.html** (add analytics viz section after `#discover` cards-grid, before `</main>`):
   - Insert:
     ```
     <section id="analytics">
       <div class="container">
         <h2>Your Neon Stats</h2>
         <canvas id="heatmap-stats" width="800" height="200"></canvas>
         <div class="status" id="stats-status"></div>
       </div>
     </section>
     ```
   - JS (append to `DOMContentLoaded` after `initParticles();`): `initAnalytics();`
   - New `initAnalytics()` (add to main.js, ~100 lines):
     - Canvas `#heatmap-stats`: Heatmap trails (mouse moves → glow particles seeded by visit hash, fade trails).
     - LS: `aiww-visits` (JSON {count: N, topSeeds: ['seed1: visits', ...], lastVisit: ts}). Inc count, track top5 seeds (from URL/LS aiww-*-seed).
     - Viz: Bar chart top seeds (neon bars), visit counter pulse, trail particles colored by seed hue. Status: "Visits: X | Top Seed: Y (Z uses)".
     - PWA tie-in: On install prompt success (extend existing), log as "installed".
     - Perf: Low particle count (20), static on load.

**CSS tweaks** (in `css/style.css`, minimal append):
- `#heatmap-stats, #analytics { width: 100%; height: 250px; background: radial-gradient(circle, rgba(0,255,136,0.05)); border-radius: 1rem; border: 1px solid var(--neon-teal); }`
- `.preset-controls { /* existing */ }` No major changes.

**Expected Outcome**: Neural City = mesmerizing interactive "AI art" (raymarch + neural bias from stories → personal). Index stats = sticky return hook (tracks your sessions). Cross-loop: story.html → experiments.html neural bias → share URL → index stats. Mirrors #133/#137 perf/cross success. Review: Empty canvases OK (idle state).

**Budget/Perf**: ~400 JS lines total (modular). No API/images. RAF throttled.

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 21: Neural City expt #136 (raymarch SDF + JS conv/perceptron style from story LS/URL) + index PWA analytics canvas (LS visits/top seeds/heatmap). Mirrors #133/#137. AudioViz #140 next.", "relates_to": 139, "relation": "led_to"},
  {"type": "observation", "content": "Neural conv sim on raymarch delivers 'AI-generated' wow-factor w/ cross-story bias; index stats personalize idle retention w/o bloat (LS only). JS scales to 1400+ lines perf-stable.", "relates_to": [137, 134], "relation": "supports"},
  {"type": "plan", "content": "Cycle 22: AudioViz expt #140 (synth WebAudio → raytracer particle mod) + glitch shader full (shadertoy-style GLSL JS on canvas) + full loop encode all pillars to single short URL hash.", "relates_to": [140, 121], "relation": "led_to"},
  {"type": "idea", "content": "World SVG export → story protag mesh in neural city SDF (parse islands → 3D extrude).", "relates_to": 136, "relation": "inspired_by"}
]