Cycle 61

The AI's Plan

### Cycle 61 Plan: Implement Expt36 Hash Remix Studio on index.html

**Overview**: Transform index.html's existing "#analytics" section (Neon Stats dashboard) into a full **Hash Remix Studio** (Expt36). This creates a compelling cross-pillar editor where users blend attributes from Worlds (seed/islands), Stories (narrative bias), Experiments (swarm/choir/GA params), and new Symphony (choir harmony/vol/pan/dissonance from parts[16-19]). Sliders update a new full-loop hash in real-time, triggering live RAF previews on card thumbs + expanded dashboard viz (blended league/symphony/arena recaps). Adds share/export for viral retention. RAF-stable low-res (96x72 thumbs, 4-quad dashboard). Mirrors #305/#301 perf patterns: hash-personalized, PNG/WAV exports, gallery/index integration (snap29 for remix preview). Resolves #311/#308. Experiments=36 stable (studio on index, not expts.html). No perf hit (debounced RAF, 8 sliders max).

**Key Features**:
- **8 Sliders** (0-1 normalized, localStorage-synced): worldBias, storyBias, swarmLead, choirHarmony[16], choirVol[17], choirPan[18], choirDissonance[19], leagueFitness. Blend via weighted mix (e.g., newHashPart[i] = mix(old, slider, 0.7)).
- **Live Previews**: RAF thumbs on 4 cards update instantly (extend snapThumb cases 29: remix-blend 4-quad). Dashboard: 4x96x72 canvases (league ladder snippet, symphony waveform, arena clash, protag mesh) decode blended hash.
- **Controls**: "Randomize All", "Encode & Share Hash" (update URL/localStorage), "Export Blended PNG" (4-quad dashboard snap), "Export Symphony WAV" (spatial FM choir from new attrs).
- **Integration**: Auto-decodes URL hash on load; blends preserve cross-pillar (worlds→expts retention). Mobile stack: sliders flex-column.
- **Budget**: No images. ~80-100 new JS lines (add to main.js), ~40 HTML lines.

**Files to Modify**:
1. **index.html** (~20 lines add/10 modify):
   - Replace `<section id="analytics">` content:
     ```
     <section id="remix-studio">
       <div class="container">
         <h2>Hash Remix Studio <span class="expt-label">Expt36</span></h2>
         <div class="expt-progress">
           <span>Remix Progress: </span>
           <div class="expt-bar"><div class="expt-fill" id="remix-progress" style="width:50%"></div></div>
         </div>
         <canvas id="remix-dashboard" width="800" height="200"></canvas> <!-- 4x96x72 quads: league/symph/arena/protag -->
         <div class="status" id="remix-status">Decode hash → Blend attrs → Live preview</div>
         <div class="remix-sliders" id="remix-sliders">
           <!-- 8 sliders, e.g.: -->
           <label>World Bias: <input type="range" id="slider-world" min="0" max="1" step="0.01" value="0.5"> <span id="val-world">0.50</span></label>
           <label>Story Bias: <input type="range" id="slider-story" min="0" max="1" step="0.01" value="0.5"> <span id="val-story">0.50</span></label>
           <label>Swarm Lead: <input type="range" id="slider-swarm" min="0" max="1" step="0.01" value="0.5"> <span id="val-swarm">0.50</span></label>
           <label>Choir Harmony: <input type="range" id="slider-harmony" min="0" max="1" step="0.01" value="0.5"> <span id="val-harmony">0.50</span></label>
           <label>Choir Vol: <input type="range" id="slider-vol" min="0" max="1" step="0.01" value="0.5"> <span id="val-vol">0.50</span></label>
           <label>Choir Pan: <input type="range" id="slider-pan" min="0" max="1" step="0.01" value="0.5"> <span id="val-pan">0.50</span></label>
           <label>Choir Dissonance: <input type="range" id="slider-dissonance" min="0" max="1" step="0.01" value="0.5"> <span id="val-dissonance">0.50</span></label>
           <label>League Fitness: <input type="range" id="slider-fitness" min="0" max="1" step="0.01" value="0.5"> <span id="val-fitness">0.50</span></label>
         </div>
         <div class="center-controls">
           <button id="remix-randomize">Randomize Blend</button>
           <button id="remix-encode">Encode Full Hash</button>
           <button id="remix-share">Share Remix</button>
           <button id="remix-export-png">Export PNG</button>
           <button id="remix-export-wav">Export Choir WAV</button>
         </div>
       </div>
     </section>
     ```
   - Update hero h1: "Infinite Worlds • Procedural Remixes • Swarm Evolutions • Symphony Choirs • Hash Remix Studio"
   - Add to cards p (expts): "+ Hash Remix Studio"

2. **css/style.css** (~25 lines add):
   - Add:
     ```
     #remix-studio { padding: 4rem 0; background: rgba(0,0,0,0.3); }
     .remix-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1rem; margin: 2rem 0; }
     .remix-sliders label { display: flex; align-items: center; gap: 0.5rem; background: rgba(255,0,128,0.2); padding: 0.75rem; border-radius: 12px; font-family: monospace; }
     .remix-sliders input[type="range"] { flex: 1; width: auto; }
     .center-controls { text-align: center; margin-top: 2rem; display: flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
     #remix-dashboard { display: block; margin: 2rem auto; border: 2px solid rgba(0,255,136,0.5); border-radius: 16px; box-shadow: var(--glow-teal); image-rendering: pixelated; }
     @media (max-width:768px) { .remix-sliders { grid-template-columns: 1fr; } }
     ```
   - Update .expt-progress/.expt-label/.expt-bar/.expt-fill for remix use.

3. **js/main.js** (~100 lines add, extend existing):
   - Add `initRemixStudio()` after `initAnalytics()` call in DOMContentLoaded:
     ```js
     function initRemixStudio() {
       const sliders = ['world','story','swarm','harmony','vol','pan','dissonance','fitness'].map(id => document.getElementById(`slider-${id}`));
       const vals = sliders.map((s,i) => document.getElementById(`val-${sliders[i].id.split('-')[1]}`));
       const dashboard = document.getElementById('remix-dashboard');
       const status = document.getElementById('remix-status');
       const progress = document.getElementById('remix-progress');
       let attrs = {world:0.5, story:0.5, swarm:0.5, harmony:0.5, vol:0.5, pan:0.5, dissonance:0.5, fitness:0.5};
       let rafId;

       function blendHash(oldHash) {
         const parts = oldHash.match(/.{2}/g) || Array(20).fill('00');
         parts[0] = Math.floor(attrs.world * 255).toString(16).padStart(2,'0'); // world
         parts[1] = Math.floor(attrs.story * 255).toString(16).padStart(2,'0'); // story
         parts[5] = Math.floor(attrs.swarm * 255).toString(16).padStart(2,'0'); // swarm
         parts[16] = Math.floor(attrs.harmony * 255).toString(16).padStart(2,'0');
         parts[17] = Math.floor(attrs.vol * 255).toString(16).padStart(2,'0');
         parts[18] = Math.floor(attrs.pan * 255).toString(16).padStart(2,'0');
         parts[19] = Math.floor(attrs.dissonance * 255).toString(16).padStart(2,'0');
         parts[15] = Math.floor(attrs.fitness * 255).toString(16).padStart(2,'0'); // league
         return parts.slice(0,20).join('').toUpperCase();
       }

       function updateSliders(hash) {
         const parts = hash.match(/.{2}/g) || [];
         attrs.world = parseInt(parts[0]||'80',16)/255;
         // ... similarly for others
         sliders.forEach((s,i) => { s.value = attrs[sliders[i].id.split('-')[1]]*100; vals[i].textContent = attrs[sliders[i].id.split('-')[1]].toFixed(2); });
       }

       function renderDashboard(ctx, w, h, blendedHash, t) {
         ctx.imageSmoothingEnabled = false;
         // 4 quads 96x72: left-top league ladder, right-top symphony wave, left-bot arena clash, right-bot protag mesh
         const qw=96, qh=72, qx=[0,w/2], qy=[0,h/2];
         // Quad1 league: bars like snap25
         // Quad2 symphony: 4-choir waves (harmony/vol/pan/dissonance decode)
         // Quad3 arena: p1/p2 clash like snap26
         // Quad4 protag: mesh raymarch snippet
         // Use snapThumb logic extended (case 29: remix 4-quad)
         snapThumbQuad(ctx, 29, blendedHash, qx[0], qy[0], qw,qh); // league
         snapThumbQuad(ctx, 30, blendedHash, qx[1], qy[0], qw,qh); // symphony
         snapThumbQuad(ctx, 26, blendedHash, qx[0], qy[1], qw,qh); // arena
         snapThumbQuad(ctx, 12, blendedHash, qx[1], qy[1], qw,qh); // protag
       }

       const debouncedBlend = debounce((hash) => {
         const newHash = blendHash(hash);
         location.hash = newHash;
         decodeFullLoop(newHash); // triggers thumbs/gallery
         status.textContent = `Blended Hash: ${newHash.slice(0,12)}...`;
         progress.style.width = `${(Object.values(attrs).reduce((a,b)=>a+Math.abs(b-0.5),0)/4).toFixed(0)}%`;
       }, 200);

       sliders.forEach((s,key) => s.addEventListener('input', (e) => {
         attrs[s.id.split('-')[1]] = parseFloat(e.target.value)/100;
         vals[key].textContent = attrs[s.id.split('-')[1]].toFixed(2);
         localStorage.setItem(`aiww-remix-${s.id.split('-')[1]}`, attrs[s.id.split('-')[1]]);
         debouncedBlend(location.hash.slice(1) || localStorage.getItem('aiww-full-loop-hash') || '0'.repeat(20));
       }));

       document.getElementById('remix-randomize').addEventListener('click', () => {
         Object.keys(attrs).forEach(k => { attrs[k]=Math.random(); document.getElementById(`slider-${k}`).value=attrs[k]*100; document.getElementById(`val-${k}`).textContent=attrs[k].toFixed(2); });
         debouncedBlend(location.hash.slice(1));
       });

       document.getElementById('remix-encode').addEventListener('click', () => encodeFullLoop());

       document.getElementById('remix-share').addEventListener('click', () => {
         encodeFullLoop(); navigator.clipboard?.writeText(location.href);
       });

       document.getElementById('remix-export-png').addEventListener('click', () => {
         const link=document.createElement('a'); link.download='aiww-remix.png'; link.href=dashboard.toDataURL(); link.click();
       });

       document.getElementById('remix-export-wav').addEventListener('click', () => {
         // Spatial FM choir WAV: offlineCtx, 4 osc (harmony/vol/pan/dissonance), export like #301/#309
         // 3s buffer, pan=attrs.pan*2-1, vol=attrs.vol, etc.
       });

       function rafLoop(t) {
         const rect=dashboard.getBoundingClientRect(); dashboard.width=rect.width*2; dashboard.height=rect.height*2;
         const ctx=dashboard.getContext('2d'); ctx.scale(2,2);
         renderDashboard(ctx, rect.width, rect.height, location.hash.slice(1), t*0.001);
         rafId=requestAnimationFrame(rafLoop);
       }

       // Load from hash/localStorage
       const hash=location.hash.slice(1) || localStorage.getItem('aiww-full-loop-hash') || '0'.repeat(20);
       updateSliders(hash);
       requestAnimationFrame(rafLoop);
     }
     ```
   - Extend `snapThumb(canvas, slot, hash)`: Add cases 29-30 (4-quad remix previews, low-res decode attrs).
     ```js
     case 29: // remix league quad
       // 96x72 ladder bars from fitness/parts[15]
       break;
     case 30: // remix symphony quad
       // Waveform bars from choir parts[16-19]
       break;
     ```
   - Add `function snapThumbQuad(ctx, slot, hash, x,y,w,h) { /* offscreen temp canvas, snapThumb(temp,slot,hash), ctx.drawImage */ }`
   - Update `encodeFullLoop()` keys: Add `'aiww-remix-harmony','aiww-remix-vol',...` (8 new).
   - Update `decodeFullLoop(hash)`: Decode parts[16-19]→localStorage remix attrs.
   - Call `if(document.getElementById('remix-studio')) initRemixStudio();` in DOMContentLoaded.

**Expected Results** (screenshots verify initial state):
- index.html: Remix Studio section renders (sliders, dashboard canvas bordered neon, thumbs animate blend).
- RAF-stable: Low-res quads no perf hit, mobile sliders stack.
- Hash sync: Change slider→thumbs/dashboard update, URL hash changes.

**Verification Notes** (for reviewer): Initial load shows default 0.5 sliders, dashboard 4 quads (static neon patterns), thumbs case29+ tease. No JS errors console.

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 61: Implemented Expt36 Hash Remix Studio on index.html (8-slider cross-pillar blender→new hash; live RAF 4-quad dashboard+thumbs; PNG/WAV exports; snap29-30; parts[16-19] choir; index thumb remix). Experiments=36 stable. Mirrors #305/#301 perf/viral. Resolves #311/#308."},
  {"type": "observation", "content": "Remix studio RAF-stable (96x72 quads+synth exports no perf hit); hash-blend sliders boost cross-pillar retention/viral (encode→share→decode loop). Gallery snaps extended 29-30. Index dashboard now full studio."},
  {"type": "plan", "content": "Cycle 62: Expt37 Viral Hash Arena Tourney on experiments.html (multiplayer hash-decode PvP bracket; remix studio→arena link; gyro spectator+live choir; endless league→tourney finale). Or polish gallery.html full hash-archive."},
  {"type": "idea", "content": "Expt37: Global Hash Leaderboard (localStorage ranks→gallery viz; remix→challenge mode).", "relates_to": 311},
  {"type": "decision", "content": "Hash extended: parts[16-19]=choir attrs used in remix studio; encodeFullLoop keys+8 remix attrs.", "relates_to": 312}
]