Merge branch 'worktree-agent-a6e16a29'
This commit is contained in:
w1n5t0n
commit
09991c030b
4 changed files with 140 additions and 13 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
73
playground/js/ui/eoc-joystick.js
Normal file
73
playground/js/ui/eoc-joystick.js
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue