m5p3nc3r/analogue_synth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add audio nodes to the patch bay

Browse Source 
Also make the patch bay responsive.
This commit is contained in:
Matt Spencer
2026-03-26 08:47:47 +00:00
parent c3cb7aa84b
commit c8ef3df460
13 changed files with 1055 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
www/bootstrap.js vendored
View File

@@ -1,8 +1,9 @@
/**
* bootstrap.js — ES module entry point.
*
* Imports the wasm-pack-generated glue, initialises the WASM binary, then
* wires up Rust-exported types to the canvas elements in index.html.
* Initialises the WASM module, wires canvas elements to Rust-exported types,
* keeps canvas drawing buffers in sync with their CSS size, and provides a
* draggable resize handle for the patch bay panel.
*/
import init, {
@@ -13,35 +14,98 @@ import init, {
SynthParams,
} from "./pkg/synth_visualiser.js";
// ── Canvas buffer sizing ──────────────────────────────────────────────────────
// A <canvas> has two independent sizes:
// - CSS display size (width/height CSS properties) — how large it appears
// - Drawing buffer (width/height HTML attributes) — actual pixel resolution
//
// We must keep them in sync; if the buffer is smaller than the display size the
// browser stretches it and everything looks blurry / oversized.
function fitCanvas(canvas) {
const w = Math.round(canvas.clientWidth);
const h = Math.round(canvas.clientHeight);
if (w > 0 && h > 0 && (canvas.width !== w || canvas.height !== h)) {
canvas.width = w;
canvas.height = h;
}
}
// ── Resize handle ─────────────────────────────────────────────────────────────
function initResizeHandle() {
const handle = document.getElementById("resize-handle");
const panel = document.getElementById("patchbay-panel");
let dragging = false;
let startY = 0;
let startH = 0;
handle.addEventListener("pointerdown", e => {
dragging = true;
startY = e.clientY;
startH = panel.offsetHeight;
handle.setPointerCapture(e.pointerId);
handle.classList.add("active");
});
handle.addEventListener("pointermove", e => {
if (!dragging) return;
// Dragging up (negative dy) increases the panel height
const dy = e.clientY - startY;
const h = Math.max(80, startH - dy);
panel.style.height = h + "px";
});
handle.addEventListener("pointerup", () => { dragging = false; handle.classList.remove("active"); });
handle.addEventListener("pointercancel",() => { dragging = false; handle.classList.remove("active"); });
}
// ── Bootstrap ─────────────────────────────────────────────────────────────────
const loader = document.getElementById("loader");
const status = document.getElementById("status");
const srLabel = document.getElementById("sample-rate");
const frameTime = document.getElementById("frame-time");
async function bootstrap() {
initResizeHandle();
try {
await init();
const engine = new AudioEngine();
await engine.attach();
const analyser = engine.analyser_node();
const analyser = engine.analyser_node();
const oscilloscope = new OscilloscopeView("oscilloscope-canvas", analyser);
const spectrum = new SpectrumView("spectrum-canvas", analyser);
const patchbay = new PatchBay("patchbay-canvas");
// Register module jacks (x, y coordinates relative to the canvas)
patchbay.register_jack("vco", "out", 50, 60, true);
patchbay.register_jack("filter", "in", 150, 60, false);
patchbay.register_jack("filter", "out", 250, 60, true);
patchbay.register_jack("vca", "in", 350, 60, false);
patchbay.register_jack("lfo", "cv-out", 450, 60, true);
patchbay.register_jack("filter", "cv-in", 550, 60, false);
// Fit all canvas buffers to their current CSS layout size before we
// ask Rust for canvas.width() to position the default modules.
const pbCanvas = document.getElementById("patchbay-canvas");
const oscCanvas = document.getElementById("oscilloscope-canvas");
const specCanvas = document.getElementById("spectrum-canvas");
const allCanvases = [oscCanvas, specCanvas, pbCanvas];
const pbCanvas = document.getElementById("patchbay-canvas");
pbCanvas.addEventListener("pointerdown", e => patchbay.on_pointer_down(e.offsetX, e.offsetY));
pbCanvas.addEventListener("pointermove", e => patchbay.on_pointer_move(e.offsetX, e.offsetY));
pbCanvas.addEventListener("pointerup", e => patchbay.on_pointer_up(e.offsetX, e.offsetY));
allCanvases.forEach(fitCanvas);
// Seed a default patch using the now-correct canvas width.
const cw = pbCanvas.width || pbCanvas.clientWidth || 800;
patchbay.add_module("vco", cw * 0.12, 80);
patchbay.add_module("adsr", cw * 0.32, 80);
patchbay.add_module("svf", cw * 0.55, 80);
patchbay.add_module("vca", cw * 0.76, 80);
// Keep canvas buffers in sync whenever the panel is resized.
const ro = new ResizeObserver(() => allCanvases.forEach(fitCanvas));
allCanvases.forEach(c => ro.observe(c));
// Patch bay pointer events
pbCanvas.addEventListener("pointerdown", e => patchbay.on_pointer_down(e.offsetX, e.offsetY));
pbCanvas.addEventListener("pointermove", e => patchbay.on_pointer_move(e.offsetX, e.offsetY));
pbCanvas.addEventListener("pointerup", e => patchbay.on_pointer_up(e.offsetX, e.offsetY));
pbCanvas.addEventListener("dblclick", e => patchbay.on_double_click(e.offsetX, e.offsetY));
const params = new SynthParams();
engine.set_params(params.to_json());

141
www/index.html
View File

@@ -6,62 +6,132 @@
<title>Synth Visualiser</title>
<style>
:root {
--bg: #0d0d0d;
--panel: #1a1a1a;
--accent: #00e5ff;
--text: #e0e0e0;
--bg: #0d0d0d;
--panel: #1a1a1a;
--accent: #00e5ff;
--text: #e0e0e0;
--border: #2a2a2a;
--handle: #222;
--handle-hover:#2e2e2e;
--patchbay-h: 340px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
overflow: hidden;
}
body {
background: var(--bg);
color: var(--text);
font-family: "JetBrains Mono", "Fira Code", monospace;
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
header {
padding: 0.75rem 1.5rem;
border-bottom: 1px solid #333;
font-size: 0.9rem;
padding: 0.6rem 1.5rem;
border-bottom: 1px solid var(--border);
font-size: 0.85rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
flex-shrink: 0;
}
main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
/* Top two panels side-by-side */
.panels-top {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 180px;
gap: 1px;
background: #333;
background: var(--border);
min-height: 60px;
overflow: hidden;
}
/* Draggable divider between top panels and patch bay */
.resize-handle {
flex-shrink: 0;
height: 6px;
background: var(--handle);
cursor: ns-resize;
border-top: 1px solid #333;
border-bottom: 1px solid #111;
user-select: none;
touch-action: none;
}
.resize-handle:hover,
.resize-handle.active {
background: var(--handle-hover);
}
/* Widen the grab area without making the visual gap bigger */
.resize-handle::before {
content: "";
display: block;
height: 12px;
margin-top: -3px;
}
/* Patch bay panel — height controlled by JS drag */
.panel--patchbay {
flex-shrink: 0;
height: var(--patchbay-h);
min-height: 80px;
max-height: calc(100vh - 120px);
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--panel);
}
.panel {
background: var(--panel);
display: flex;
flex-direction: column;
overflow: hidden;
}
.panel__label {
padding: 0.4rem 0.75rem;
font-size: 0.7rem;
padding: 0.35rem 0.75rem;
font-size: 0.65rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #666;
border-bottom: 1px solid #2a2a2a;
color: #555;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.panel canvas { flex: 1; width: 100%; height: 100%; display: block; }
.panel--patchbay { grid-column: 1 / -1; }
/* Canvas fills remaining space; buffer sizing is done in JS */
.panel canvas {
flex: 1;
width: 100%;
height: 100%;
display: block;
}
footer {
padding: 0.5rem 1.5rem;
font-size: 0.7rem;
flex-shrink: 0;
padding: 0.4rem 1.5rem;
font-size: 0.65rem;
color: #444;
border-top: 1px solid #222;
border-top: 1px solid #1e1e1e;
display: flex;
gap: 1.5rem;
}
#status { color: var(--accent); }
#loader {
position: fixed; inset: 0;
background: var(--bg);
@@ -78,15 +148,20 @@
<header>Analogue Synth Visualiser</header>
<main>
<section class="panel">
<div class="panel__label">Oscilloscope</div>
<canvas id="oscilloscope-canvas"></canvas>
</section>
<section class="panel">
<div class="panel__label">Spectrum</div>
<canvas id="spectrum-canvas"></canvas>
</section>
<section class="panel panel--patchbay">
<div class="panels-top">
<section class="panel">
<div class="panel__label">Oscilloscope</div>
<canvas id="oscilloscope-canvas"></canvas>
</section>
<section class="panel">
<div class="panel__label">Spectrum</div>
<canvas id="spectrum-canvas"></canvas>
</section>
</div>
<div class="resize-handle" id="resize-handle" title="Drag to resize patch bay"></div>
<section class="panel panel--patchbay" id="patchbay-panel">
<div class="panel__label">Patch Bay</div>
<canvas id="patchbay-canvas"></canvas>
</section>
@@ -98,12 +173,6 @@
<span id="frame-time"></span>
</footer>
<!--
Run first:
wasm-pack build crates/synth-visualiser --target web --out-dir ../../www/pkg
Then serve:
python3 -m http.server --directory www 8080
-->
<script type="module" src="./bootstrap.js"></script>
</body>
</html>