Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299// demo-kit.mjs — shared browser helpers for pop/demos.html. Audio// playback, signal generators, mic capture, canvas plotting, a tiny// drum/bell synth, music-note math, and DOM builders. Demo modules// (pop/demos/*-demos.mjs) build on this; the real DSP they show off// lives in dance/synths/fx.mjs, lib/analysis.mjs, lib/meter.mjs and// lib/counterpoint.mjs.//// Browser-only — uses Web Audio + DOM. Not for Node.
// ── audio context ─────────────────────────────────────────────────────export const ac = new (window.AudioContext || window.webkitAudioContext)();export const SR = ac.sampleRate;let liveSources = [];
// Web Audio needs a user gesture before it'll make sound — call this// from any click handler (idempotent).export function resume() { return ac.resume(); }
// Play a mono Float32Array. Returns the source node; tracked so stopAll// can cut everything.export function play(f32, { sampleRate = SR, gain = 1 } = {}) { const b = ac.createBuffer(1, f32.length, sampleRate); b.getChannelData(0).set(f32); const src = ac.createBufferSource(); src.buffer = b; const g = ac.createGain(); g.gain.value = gain; src.connect(g).connect(ac.destination); src.start(); liveSources.push(src); src.onended = () => { liveSources = liveSources.filter((s) => s !== src); }; return src;}
export function stopAll() { for (const s of liveSources) { try { s.stop(); } catch {} } liveSources = [];}
// ── signal generators (Float32Array at SR) ────────────────────────────// type: "sine" | "saw" | "square" | "tri"export function osc(freq, durSec, { type = "saw", gain = 0.5 } = {}) { const n = Math.floor(durSec * SR); const out = new Float32Array(n); let phase = 0; const dt = freq / SR; for (let i = 0; i < n; i++) { let v; if (type === "sine") v = Math.sin(phase * 2 * Math.PI); else if (type === "square") v = phase < 0.5 ? 1 : -1; else if (type === "tri") v = Math.abs(phase * 2 - 1) * 2 - 1; else v = phase * 2 - 1; // saw out[i] = v * gain; phase += dt; if (phase >= 1) phase -= 1; } return out;}
// A short A–D amplitude envelope applied in place, so generated tones// don't click. attack/release in seconds.export function shape(buf, { attack = 0.01, release = 0.05 } = {}) { const a = Math.max(1, Math.floor(attack * SR)); const r = Math.max(1, Math.floor(release * SR)); for (let i = 0; i < buf.length; i++) { let g = 1; if (i < a) g = i / a; if (i > buf.length - r) g = Math.min(g, (buf.length - i) / r); buf[i] *= g; } return buf;}
export function noise(durSec, { gain = 0.5 } = {}) { const n = Math.floor(durSec * SR); const out = new Float32Array(n); for (let i = 0; i < n; i++) out[i] = (Math.random() * 2 - 1) * gain; return out;}
// Mix several equal-length-ish buffers into one (longest wins).export function mix(...bufs) { const n = Math.max(0, ...bufs.map((b) => b.length)); const out = new Float32Array(n); for (const b of bufs) for (let i = 0; i < b.length; i++) out[i] += b[i]; return out;}
// ── mic capture ───────────────────────────────────────────────────────// Records `durSec` of mono mic audio to a Float32Array at SR. onLevel,// if given, gets a 0..1 progress value while recording.export async function recordMic(durSec, onLevel) { await resume(); const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const src = ac.createMediaStreamSource(stream); const proc = ac.createScriptProcessor(4096, 1, 1); const sink = ac.createGain(); sink.gain.value = 0; // silent — don't echo the mic const need = Math.ceil(durSec * SR); const out = new Float32Array(need); let o = 0; return new Promise((resolve) => { proc.onaudioprocess = (e) => { const ch = e.inputBuffer.getChannelData(0); for (let i = 0; i < ch.length && o < need; i++) out[o++] = ch[i]; if (onLevel) onLevel(Math.min(1, o / need)); if (o >= need) { proc.onaudioprocess = null; src.disconnect(); proc.disconnect(); sink.disconnect(); stream.getTracks().forEach((t) => t.stop()); resolve(out); } }; src.connect(proc); proc.connect(sink); sink.connect(ac.destination); });}
// ── canvas plotting ───────────────────────────────────────────────────// plot(canvas, { layers, marks }) draws onto a cream panel.// layers: [{ data: Float32Array, color, mode, min, max }]// mode "wave" — bipolar, 0 at center, clamps ±(max||1)// mode "line" — maps [min,max] (default 0..1) to full height// mode "fill" — like line, filled to the baseline// marks: [{ at: 0..1, color, label }] — vertical markersexport function plot(canvas, { layers = [], marks = [] } = {}) { const dpr = window.devicePixelRatio || 1; const w = canvas.clientWidth || 600; const h = canvas.clientHeight || 140; canvas.width = w * dpr; canvas.height = h * dpr; const g = canvas.getContext("2d"); g.scale(dpr, dpr); g.fillStyle = "#1c1a17"; g.fillRect(0, 0, w, h); // center line g.strokeStyle = "rgba(255,255,255,0.12)"; g.beginPath(); g.moveTo(0, h / 2); g.lineTo(w, h / 2); g.stroke();
for (const L of layers) { const d = L.data; if (!d || d.length === 0) continue; const step = d.length / w; g.strokeStyle = L.color || "#e8c170"; g.fillStyle = L.color || "#e8c170"; g.lineWidth = 1.2; g.beginPath(); for (let x = 0; x < w; x++) { const v = d[Math.floor(x * step)] || 0; let y; if (L.mode === "line" || L.mode === "fill") { const lo = L.min ?? 0, hi = L.max ?? 1; y = h - ((v - lo) / (hi - lo)) * h; } else { const m = L.max || 1; y = h / 2 - (v / m) * (h / 2); } if (x === 0) g.moveTo(x, y); else g.lineTo(x, y); } g.stroke(); if (L.mode === "fill") { g.lineTo(w, h); g.lineTo(0, h); g.closePath(); g.globalAlpha = 0.25; g.fill(); g.globalAlpha = 1; } } for (const m of marks) { const x = (m.at || 0) * w; g.strokeStyle = m.color || "#ff5d4a"; g.lineWidth = 1.5; g.beginPath(); g.moveTo(x, 0); g.lineTo(x, h); g.stroke(); if (m.label) { g.fillStyle = m.color || "#ff5d4a"; g.font = "9px monospace"; g.fillText(m.label, x + 2, 10); } }}
// ── music note math ───────────────────────────────────────────────────const NOTE_BASE = { c: 0, d: 2, e: 4, f: 5, g: 7, a: 9, b: 11 };
// "A4" / "C#5" / "Eb3" -> MIDI number. Returns null on a bad name.export function noteToMidi(name) { const m = String(name).trim().match(/^([A-Ga-g])([#b]?)(-?\d+)$/); if (!m) return null; let semi = NOTE_BASE[m[1].toLowerCase()]; if (m[2] === "#") semi++; if (m[2] === "b") semi--; return semi + (parseInt(m[3], 10) + 1) * 12;}export function midiToFreq(midi) { return 440 * Math.pow(2, (midi - 69) / 12); }export function noteToFreq(name) { const m = noteToMidi(name); return m == null ? null : midiToFreq(m);}const NAMES = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];export function midiToName(midi) { const m = Math.round(midi); return NAMES[((m % 12) + 12) % 12] + (Math.floor(m / 12) - 1);}
// ── tiny synths (Float32Array at SR) ──────────────────────────────────// Struck-bell tone — a few inharmonic partials with exponential decay.export function bell(freq, durSec = 0.6, { gain = 0.5 } = {}) { const n = Math.floor(durSec * SR); const out = new Float32Array(n); const partials = [[1, 1], [2.01, 0.5], [3.01, 0.28], [4.7, 0.16]]; for (let i = 0; i < n; i++) { const t = i / SR; let v = 0; for (const [r, amp] of partials) v += Math.sin(2 * Math.PI * freq * r * t) * amp * Math.exp(-t * (3 + r)); out[i] = v * gain; } return out;}
// One-shot drum voice. kind: "kick" | "tom" | "hat" | "snare".export function drum(kind, durSec = 0.25, { gain = 0.7 } = {}) { const n = Math.floor(durSec * SR); const out = new Float32Array(n); for (let i = 0; i < n; i++) { const t = i / SR; if (kind === "hat") { out[i] = (Math.random() * 2 - 1) * Math.exp(-t * 90) * gain; } else if (kind === "snare") { const tone = Math.sin(2 * Math.PI * 190 * t) * Math.exp(-t * 24); const nz = (Math.random() * 2 - 1) * Math.exp(-t * 34); out[i] = (tone * 0.5 + nz * 0.7) * gain; } else { const f = kind === "tom" ? 180 : 110; const pitch = f * (1 + 5 * Math.exp(-t * 40)); // pitch drop out[i] = Math.sin(2 * Math.PI * pitch * t) * Math.exp(-t * (kind === "tom" ? 16 : 11)) * gain; } } return out;}
// ── DOM builders ──────────────────────────────────────────────────────export function el(tag, attrs = {}, ...kids) { const n = document.createElement(tag); for (const [k, v] of Object.entries(attrs)) { if (k === "class") n.className = v; else if (k === "style") n.style.cssText = v; else if (k === "html") n.innerHTML = v; else if (k.startsWith("on") && typeof v === "function") n.addEventListener(k.slice(2), v); else if (v != null) n.setAttribute(k, v); } for (const c of kids.flat()) { if (c == null || c === false) continue; n.append(c.nodeType ? c : document.createTextNode(String(c))); } return n;}
export function button(label, onclick) { return el("button", { class: "demo-btn", onclick }, label);}
// Labelled range slider. Returns a row element with live `.value`// (number) and `.display` updated; `oninput(value)` fires on drag.export function slider(label, { min = 0, max = 1, step = 0.01, value = 0, unit = "" } = {}, oninput) { const out = el("span", { class: "demo-num" }, value + unit); const input = el("input", { type: "range", min, max, step, value, oninput: (e) => { const v = parseFloat(e.target.value); row.value = v; out.textContent = (Math.round(v * 1000) / 1000) + unit; oninput && oninput(v); }, }); const row = el("label", { class: "demo-ctl" }, el("span", { class: "demo-lbl" }, label), input, out); row.value = value; row.set = (v) => { input.value = v; input.dispatchEvent(new Event("input")); }; return row;}
// Labelled <select>. options: [value,…] or [[value,label],…].export function picker(label, options, value, onchange) { const sel = el("select", { class: "demo-sel", onchange: (e) => { row.value = e.target.value; onchange && onchange(e.target.value); }, }); for (const o of options) { const [v, l] = Array.isArray(o) ? o : [o, o]; sel.append(el("option", { value: v, ...(v === value ? { selected: "" } : {}) }, l)); } const row = el("label", { class: "demo-ctl" }, el("span", { class: "demo-lbl" }, label), sel); row.value = value; return row;}
// A status line for a demo — el with `.say(text)`.export function status(initial = "") { const n = el("div", { class: "demo-status" }, initial); n.say = (t) => { n.textContent = t; }; return n;}