diff --git a/playground/a-immersive.html b/playground/a-immersive.html
index 4ccddb1..cf89b52 100644
--- a/playground/a-immersive.html
+++ b/playground/a-immersive.html
@@ -94,6 +94,12 @@
+
+
+
diff --git a/playground/css/a-immersive.css b/playground/css/a-immersive.css
index f3be6c1..398a329 100644
--- a/playground/css/a-immersive.css
+++ b/playground/css/a-immersive.css
@@ -2512,3 +2512,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 a4ec0ad..edb3294 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;
@@ -1075,19 +1077,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
@@ -1108,8 +1131,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();
}
}
@@ -2383,10 +2406,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;
@@ -2432,7 +2456,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++) {
@@ -3565,10 +3589,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() {
@@ -3581,10 +3605,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);
+ }
+}