From 2cda1a6178fe4482b13deac644d0460bd2ccbec8 Mon Sep 17 00:00:00 2001
From: w1n5t0n <w1n5t0n@lnfinitemonkeys.org>
Date: Fri, 3 Apr 2026 18:21:59 +0100
Subject: [PATCH] =?UTF-8?q?feat(playground):=20EOC=20NISPS=20Independent?=
 =?UTF-8?q?=20mode=20=E2=80=94=20separate=20FX=20joystick=20(meml-vqo)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 playground/a-immersive.html      |  6 +++
 playground/css/a-immersive.css   | 24 +++++++++++
 playground/js/a-app.js           | 50 ++++++++++++++++------
 playground/js/ui/eoc-joystick.js | 73 ++++++++++++++++++++++++++++++++
 4 files changed, 140 insertions(+), 13 deletions(-)
 create mode 100644 playground/js/ui/eoc-joystick.js

diff --git a/playground/a-immersive.html b/playground/a-immersive.html
index 79ad01f..efb4705 100644
--- a/playground/a-immersive.html
+++ b/playground/a-immersive.html
@@ -94,6 +94,12 @@
     <div id="gamepad-status" style="color: #ff6a00; font-size: 0.6rem; text-align: center; position: absolute; bottom: -16px; left: 0; right: 0; pointer-events: none;"></div>
   </div>
 
+  <!-- EOC Independent mode joystick (shown only in independent nispsMode) -->
+  <div id="eoc-joy-container" class="eoc-joy-container hidden">
+    <canvas id="eoc-joy-map" class="eoc-joy-map" width="120" height="120"></canvas>
+    <div class="eoc-joy-label">FX</div>
+  </div>
+
   <!-- Hand tracking PIP (replaces joystick position when active) -->
   <div class="hand-pip hidden" id="hand-pip">
     <video id="hand-video" playsinline autoplay muted></video>
diff --git a/playground/css/a-immersive.css b/playground/css/a-immersive.css
index 98ee391..e0f0d43 100644
--- a/playground/css/a-immersive.css
+++ b/playground/css/a-immersive.css
@@ -2437,3 +2437,27 @@ html, body {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
 }
+
+/* ---- EOC Independent mode joystick ---- */
+.eoc-joy-container {
+  position: fixed;
+  bottom: 80px;
+  right: 16px;
+  z-index: 100;
+}
+.eoc-joy-container.hidden { display: none; }
+.eoc-joy-map {
+  border: 1px solid rgba(78, 205, 196, 0.3);
+  border-radius: 8px;
+  touch-action: none;
+  cursor: crosshair;
+}
+.eoc-joy-label {
+  text-align: center;
+  font-size: 10px;
+  text-transform: uppercase;
+  color: #4ecdc4;
+  opacity: 0.6;
+  margin-top: 4px;
+  letter-spacing: 1px;
+}
diff --git a/playground/js/a-app.js b/playground/js/a-app.js
index 5453317..6ccf103 100644
--- a/playground/js/a-app.js
+++ b/playground/js/a-app.js
@@ -18,6 +18,7 @@ import { SYNTH_PRESETS, PRESET_TIERS } from './synth/presets.js';
 import { EOCChain } from './eoc/index.js';
 import { EOCChainUI, moduleFactory } from './ui/eoc-chain-ui.js';
 import { EngineSwitcher } from './ui/engine-switcher.js';
+import { EOCJoystick } from './ui/eoc-joystick.js';
 import { AdditiveEngine } from './synth/additive-engine.js';
 import { FMEngine } from './synth/fm-engine.js';
 
@@ -95,9 +96,10 @@ let outputMode = 'visual';
 let eocChain = null;
 let _eocInited = false; // guard: init once per AudioContext lifetime
 
-// EOC Linked mode — second IML driven by the same joystick, independent training
-let imlEoc = null;       // second IML for EOC params (Linked mode)
+// EOC Linked/Independent mode — second IML driven by joystick(s), independent training
+let imlEoc = null;       // second IML for EOC params (Linked/Independent mode)
 let eocTrainingTarget = 'synth'; // 'synth' | 'eoc' — which MLP RL feedback targets
+let eocJoystick = null;  // EOCJoystick instance for Independent mode
 
 // ---- MIDI CC state ----
 let midiOutput = null;
@@ -1074,19 +1076,40 @@ async function init() {
     EOCChainUI.init(eocChain, eocDrawerBody);
   }
 
+  // EOC Independent mode joystick
+  const eocJoyCanvas = document.getElementById('eoc-joy-map');
+  if (eocJoyCanvas) {
+    eocJoystick = new EOCJoystick(eocJoyCanvas);
+    eocJoystick.onChange = (x, y) => {
+      if (!imlEoc || eocChain?.nispsMode !== 'independent') return;
+      imlEoc.setInput(0, x);
+      imlEoc.setInput(1, y);
+      imlEoc.process();
+      const eocOutputs = imlEoc.getOutputs();
+      for (let i = 0; i < eocOutputs.length; i++) {
+        eocChain.setParam(i, eocOutputs[i]);
+      }
+    };
+  }
+
   // Handle EOC structural changes — Shared mode resizes MLP; Linked mode manages second IML
   window.addEventListener('eoc:change', async (e) => {
     const reason = e.detail?.reason;
     console.log('[EOC] chain changed, reason:', reason, 'paramCount:', eocChain.paramCount, 'nispsMode:', eocChain.nispsMode);
 
     if (reason === 'nispsMode-changed') {
-      // Linked mode lifecycle
-      if (eocChain.nispsMode === 'linked') {
+      // Linked/Independent mode lifecycle — both need a second IML
+      if (eocChain.nispsMode === 'linked' || eocChain.nispsMode === 'independent') {
         await initEocIML();
       } else {
         destroyEocIML();
         eocTrainingTarget = 'synth';
       }
+      // Show/hide EOC joystick (only visible in independent mode)
+      const eocJoyContainer = document.getElementById('eoc-joy-container');
+      if (eocJoyContainer) {
+        eocJoyContainer.classList.toggle('hidden', eocChain.nispsMode !== 'independent');
+      }
     }
 
     // Shared mode: resize MLP and rebuild heatmap on mode switch or module change
@@ -1107,8 +1130,8 @@ async function init() {
       document.getElementById('heatmap-cells')?.parentElement
         ?.classList.toggle('shared-mode', eocChain.nispsMode === 'shared');
 
-      // Linked mode: recreate EOC IML when modules change
-      if (eocChain.nispsMode === 'linked' && imlEoc) {
+      // Linked/Independent mode: recreate EOC IML when modules change
+      if ((eocChain.nispsMode === 'linked' || eocChain.nispsMode === 'independent') && imlEoc) {
         await initEocIML();
       }
     }
@@ -2353,10 +2376,11 @@ function updateUndoButton() {
 
 /**
  * Return the IML instance that RL feedback should target.
- * In Linked mode the user may direct feedback to the EOC IML instead.
+ * In Linked/Independent mode the user may direct feedback to the EOC IML instead.
  */
 function _rlTarget() {
-  if (eocChain?.nispsMode === 'linked' && eocTrainingTarget === 'eoc' && imlEoc) {
+  const mode = eocChain?.nispsMode;
+  if ((mode === 'linked' || mode === 'independent') && eocTrainingTarget === 'eoc' && imlEoc) {
     return imlEoc;
   }
   return iml;
@@ -2402,7 +2426,7 @@ function onThumbsDown() {
     routeOutputs(outputs);
     updateHeatmap(outputs);
     syncRawParamsFromOutputs(outputs);
-  } else if (imlEoc && eocChain?.nispsMode === 'linked') {
+  } else if (imlEoc && (eocChain?.nispsMode === 'linked' || eocChain?.nispsMode === 'independent')) {
     imlEoc.process();
     const eocOutputs = imlEoc.getOutputs();
     for (let i = 0; i < eocOutputs.length; i++) {
@@ -3517,10 +3541,10 @@ function flash(id) {
   setTimeout(() => el.classList.remove('flash'), 250);
 }
 
-// ---- EOC Linked-mode IML helpers ----
+// ---- EOC Linked/Independent-mode IML helpers ----
 
 /**
- * Create (or recreate) the EOC IML instance for Linked mode.
+ * Create (or recreate) the EOC IML instance for Linked/Independent mode.
  * Uses a smaller network than the synth IML since EOC params are more independent.
  */
 async function initEocIML() {
@@ -3533,10 +3557,10 @@ async function initEocIML() {
     1000, 1.0, 0.00001,
   );
   imlEoc.randomiseWeights(spreadLevel);
-  console.log(`[EOC] Linked IML created — ${eocChain.paramCount} outputs`);
+  console.log(`[EOC] IML created (${eocChain.nispsMode}) — ${eocChain.paramCount} outputs`);
 }
 
-/** Destroy the EOC IML instance (e.g. when leaving Linked mode). */
+/** Destroy the EOC IML instance (e.g. when leaving Linked/Independent mode). */
 function destroyEocIML() {
   if (imlEoc) {
     imlEoc.destroy();
diff --git a/playground/js/ui/eoc-joystick.js b/playground/js/ui/eoc-joystick.js
new file mode 100644
index 0000000..c7844ba
--- /dev/null
+++ b/playground/js/ui/eoc-joystick.js
@@ -0,0 +1,73 @@
+// EOC Independent mode joystick — minimal 2D touch/mouse input
+// No zoom, no momentum, no input pipeline — just raw normalized X/Y
+
+export class EOCJoystick {
+  constructor(canvas) {
+    this._canvas = canvas;
+    this._ctx = canvas.getContext('2d');
+    this._x = 0.5;
+    this._y = 0.5;
+    this._dragging = false;
+    this._onChange = null;
+    this._bindEvents();
+    this._draw();
+  }
+
+  get x() { return this._x; }
+  get y() { return this._y; }
+  set onChange(fn) { this._onChange = fn; }
+
+  _bindEvents() {
+    this._canvas.addEventListener('pointerdown', e => {
+      e.preventDefault();
+      this._dragging = true;
+      this._canvas.setPointerCapture(e.pointerId);
+      this._update(e);
+    });
+    this._canvas.addEventListener('pointermove', e => {
+      if (this._dragging) this._update(e);
+    });
+    this._canvas.addEventListener('pointerup', e => {
+      this._dragging = false;
+      this._canvas.releasePointerCapture(e.pointerId);
+    });
+    this._canvas.addEventListener('pointercancel', e => {
+      this._dragging = false;
+    });
+  }
+
+  _update(e) {
+    const rect = this._canvas.getBoundingClientRect();
+    this._x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    this._y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+    this._draw();
+    this._onChange?.(this._x, this._y);
+  }
+
+  _draw() {
+    const ctx = this._ctx;
+    const w = this._canvas.width;
+    const h = this._canvas.height;
+    ctx.clearRect(0, 0, w, h);
+    // Background
+    ctx.fillStyle = 'rgba(255,255,255,0.05)';
+    ctx.fillRect(0, 0, w, h);
+    // Crosshairs
+    ctx.strokeStyle = 'rgba(255,255,255,0.15)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(w / 2, 0); ctx.lineTo(w / 2, h);
+    ctx.moveTo(0, h / 2); ctx.lineTo(w, h / 2);
+    ctx.stroke();
+    // Dot
+    ctx.fillStyle = this._dragging ? '#5ff5ea' : '#4ecdc4';
+    ctx.beginPath();
+    ctx.arc(this._x * w, this._y * h, 6, 0, Math.PI * 2);
+    ctx.fill();
+    // Position label
+    ctx.fillStyle = 'rgba(78,205,196,0.5)';
+    ctx.font = '9px monospace';
+    ctx.textAlign = 'right';
+    ctx.fillText(`${this._x.toFixed(2)}, ${this._y.toFixed(2)}`, w - 4, h - 4);
+  }
+}