// Cell: Line Graph + Beat Wave + Audio + All Controls // All controls are internal so nothing resets on preset change. // Name this cell: chart chart = { const { FADE_TIME, BASE_FREQ } = presets.constants; const { byValue, globalYRange } = presetData; // ── Resolve frequency item → layers ── function freqToLayers(freqItem) { const v = freqItem.value; if (Array.isArray(v)) return v; return [{ freq: v, gain: 1 }]; } function isMultiLayer(freqItem) { return Array.isArray(freqItem.value); } // ── Initial defaults ── const defaultFreqIdx = presets.frequencies.findIndex(f => f.selected); const initialFreqIdx = defaultFreqIdx >= 0 ? defaultFreqIdx : 0; const defaultTimbreIdx = presets.timbres.findIndex(t => t.selected); const initialTimbreIdx = defaultTimbreIdx >= 0 ? defaultTimbreIdx : 0; // ── Local state (all DOM-driven, no reactive re-renders) ── let r = presets.defaultValue; let mode = "div-q2"; let currentFreq = presets.frequencies[initialFreqIdx]; let currentLayers = freqToLayers(currentFreq); let currentTimbre = presets.timbres[initialTimbreIdx]; // Current computed data (mutated on preset/value change) let currentData, currentMaxPlotQ; function loadData() { const cached = byValue.get(r); const result = cached || funcs.computeData(r); currentData = result.data; currentMaxPlotQ = result.maxPlotQ; } loadData(); // ── Container ── const container = document.createElement("div"); // ── Shared styles ── const selectStyle = "font-family:'JetBrains Mono',monospace;font-size:0.82rem;padding:0.45rem 0.7rem;border:1px solid #e0dcd6;border-radius:3px;background:#fff;color:#1a1a1a;outline:none;"; const labelStyle = "font-size:0.65rem;text-transform:uppercase;letter-spacing:0.08em;color:#a0a0a0;font-family:'JetBrains Mono',monospace;"; const groupStyle = "display:flex;flex-direction:column;gap:0.3rem;"; // ══════════════════════════════════════════════════ // CONTROL ROW 1: Preset + Value // ══════════════════════════════════════════════════ const controlRow1 = document.createElement("div"); controlRow1.style.cssText = "display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:0.5rem;"; // Preset select const presetGroup = document.createElement("div"); presetGroup.style.cssText = groupStyle; const presetLabel = document.createElement("label"); presetLabel.textContent = "PRESET"; presetLabel.style.cssText = labelStyle; const presetSelect = document.createElement("select"); presetSelect.style.cssText = selectStyle + "min-width:200px;"; const customOpt = document.createElement("option"); customOpt.value = "custom"; customOpt.textContent = "Custom"; customOpt.disabled = true; customOpt.hidden = true; presetSelect.appendChild(customOpt); for (const group of presets.groups) { const optgroup = document.createElement("optgroup"); optgroup.label = group.label; for (const item of group.items) { const opt = document.createElement("option"); opt.value = String(item.value); opt.textContent = item.label; if (item.selected) opt.selected = true; optgroup.appendChild(opt); } presetSelect.appendChild(optgroup); } presetGroup.append(presetLabel, presetSelect); // Value input const valueGroup = document.createElement("div"); valueGroup.style.cssText = groupStyle; const valueLabel = document.createElement("label"); valueLabel.textContent = "VALUE"; valueLabel.style.cssText = labelStyle; const valueInput = document.createElement("input"); valueInput.type = "text"; valueInput.value = String(presets.defaultValue); valueInput.style.cssText = "font-family:'JetBrains Mono',monospace;font-size:0.82rem;padding:0.45rem 0.7rem;border:1px solid #e0dcd6;border-radius:3px;background:#fff;color:#1a1a1a;width:175px;outline:none;"; valueGroup.append(valueLabel, valueInput); controlRow1.append(presetGroup, valueGroup); container.appendChild(controlRow1); // ══════════════════════════════════════════════════ // CONTROL ROW 2: Mode + Frequency + Timbre + Scan // ══════════════════════════════════════════════════ const controlRow2 = document.createElement("div"); controlRow2.style.cssText = "display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1rem;"; // Mode select const modeGroup = document.createElement("div"); modeGroup.style.cssText = groupStyle; const modeLabel = document.createElement("label"); modeLabel.textContent = "Y-AXIS"; modeLabel.style.cssText = labelStyle; const modeSelect = document.createElement("select"); modeSelect.style.cssText = selectStyle; for (const [val, label] of [["accuracy", "Accuracy (no cost)"], ["div-q2", "Parsimony: ÷ q²"]]) { const opt = document.createElement("option"); opt.value = val; opt.textContent = label; if (val === "div-q2") opt.selected = true; modeSelect.appendChild(opt); } modeGroup.append(modeLabel, modeSelect); // Frequency select const freqGroup = document.createElement("div"); freqGroup.style.cssText = groupStyle; const freqLabel = document.createElement("label"); freqLabel.textContent = "FREQUENCY"; freqLabel.style.cssText = labelStyle; const freqSelect = document.createElement("select"); freqSelect.style.cssText = selectStyle; presets.frequencies.forEach((f, i) => { const opt = document.createElement("option"); opt.value = String(i); opt.textContent = f.label; if (i === initialFreqIdx) opt.selected = true; freqSelect.appendChild(opt); }); freqGroup.append(freqLabel, freqSelect); // Timbre select const timbreGroup = document.createElement("div"); timbreGroup.style.cssText = groupStyle; const timbreLabel = document.createElement("label"); timbreLabel.textContent = "TIMBRE"; timbreLabel.style.cssText = labelStyle; const timbreSelect = document.createElement("select"); timbreSelect.style.cssText = selectStyle; presets.timbres.forEach((t, i) => { const opt = document.createElement("option"); opt.value = String(i); opt.textContent = t.label; if (i === initialTimbreIdx) opt.selected = true; timbreSelect.appendChild(opt); }); timbreGroup.append(timbreLabel, timbreSelect); // Scan button const scanBtn = document.createElement("button"); scanBtn.textContent = "▶ Scan"; scanBtn.style.cssText = "font-family:'JetBrains Mono',monospace;font-size:0.72rem;font-weight:500;text-transform:uppercase;letter-spacing:0.08em;padding:0.45rem 1rem;border:1px solid #e0dcd6;border-radius:3px;background:#fff;color:#1a1a1a;cursor:pointer;white-space:nowrap;transition:all 0.15s;align-self:flex-end;"; controlRow2.append(modeGroup, freqGroup, timbreGroup, scanBtn); container.appendChild(controlRow2); // ══════════════════════════════════════════════════ // AUDIO // ══════════════════════════════════════════════════ let audioCtx = null, masterOut = null; let activeHoverGain = null, activeHoverOscs = [], activeHoverQ = null, activeHoverStartTime = 0; let scanning = false, scanTimeout = null; let waveformAnimId = null, waveformHovered = null; let waveformStartTime = null; function getAudioCtx() { if (!audioCtx) { audioCtx = new (window.AudioContext || window.webkitAudioContext)(); const comp = audioCtx.createDynamicsCompressor(); comp.threshold.value = -18; comp.knee.value = 12; comp.ratio.value = 8; comp.attack.value = 0.003; comp.release.value = 0.15; comp.connect(audioCtx.destination); masterOut = comp; } if (audioCtx.state === "suspended") audioCtx.resume(); return audioCtx; } function fadeOutHoverAudio() { if (activeHoverGain) { const now = getAudioCtx().currentTime; try { activeHoverGain.gain.cancelScheduledValues(now); activeHoverGain.gain.setValueAtTime(activeHoverGain.gain.value, now); activeHoverGain.gain.linearRampToValueAtTime(0, now + FADE_TIME); } catch (e) {} const oscs = activeHoverOscs; setTimeout(() => oscs.forEach(o => { try { o.stop(); } catch(e) {} }), FADE_TIME * 1000 + 30); } activeHoverGain = null; activeHoverOscs = []; activeHoverQ = null; } function rolloffScale(freq) { if (!currentTimbre.rolloff) return 1; return Math.min(1, currentTimbre.rolloff / freq); } function playHover(q, p) { if (activeHoverQ === q) return; const ctx = getAudioCtx(); if (ctx.state === "suspended") { ctx.resume(); return; } const fractionalError = p > 0 ? (r - p / q) / (p / q) : 0; const now = ctx.currentTime; fadeOutHoverAudio(); const multi = isMultiLayer(currentFreq); const gain = ctx.createGain(); gain.gain.setValueAtTime(0, now); gain.gain.linearRampToValueAtTime(multi ? 1 : 0.15, now + FADE_TIME); gain.connect(masterOut); const oscs = []; for (const layer of currentLayers) { const shadow = layer.freq * (1 + fractionalError); if (!isFinite(shadow) || shadow <= 0) continue; const layerGain = multi ? layer.gain : 1; for (const freq of [layer.freq, shadow]) { const oscGain = ctx.createGain(); oscGain.gain.value = layerGain * rolloffScale(freq); oscGain.connect(gain); const osc = ctx.createOscillator(); osc.type = currentTimbre.type; osc.frequency.value = freq; osc.connect(oscGain); osc.start(now); oscs.push(osc); } } activeHoverGain = gain; activeHoverOscs = oscs; activeHoverQ = q; activeHoverStartTime = now; } // ══════════════════════════════════════════════════ // PLOT DATA // ══════════════════════════════════════════════════ function getPlotData(m) { return currentData.map(d => { const raw = funcs.metricValue(d); const val = m === "div-q2" ? raw / Math.max(d.q * d.q, 1) : raw; return { ...d, metricVal: Math.max(val, 1e-15) }; }); } let plotData = getPlotData(mode); let convergents = plotData.filter(d => d.isConvergent); let bestPoint = plotData.reduce( (b, d) => !b || d.metricVal > b.metricVal || (d.metricVal === b.metricVal && d.q < b.q) ? d : b, null ); // ══════════════════════════════════════════════════ // CHART SVG // ══════════════════════════════════════════════════ const chartDiv = document.createElement("div"); chartDiv.className = "chart-container"; container.appendChild(chartDiv); const chartWidth = width; // Observable's reactive page width const height = 420; const margin = { top: 36, right: 12, bottom: 40, left: 32 }; const plotW = chartWidth - margin.left - margin.right; const plotH = height - margin.top - margin.bottom; const svg = d3.select(chartDiv).append("svg") .attr("width", chartWidth).attr("height", height) .attr("viewBox", `0 0 ${chartWidth} ${height}`) .style("max-width", "100%").style("height", "auto").style("overflow", "visible"); const g = svg.append("g").attr("class", "plot-area") .attr("transform", `translate(${margin.left},${margin.top})`); const yAxisLabel = svg.append("text").attr("class", "axis-label") .attr("x", 0).attr("y", margin.top - 14).attr("text-anchor", "start"); const soundHint = svg.append("text") .attr("x", chartWidth / 2).attr("y", margin.top + 20).attr("text-anchor", "middle") .attr("font-family", "JetBrains Mono, monospace").attr("font-size", "11px") .attr("fill", "#6b6b6b").attr("opacity", 0).attr("pointer-events", "none") .text("Click for sound"); // X scale & axis (redrawn on value change) let xScale = d3.scaleLog().domain([0.7, currentMaxPlotQ || 1000]).range([0, plotW]); const xAxisG = g.append("g").attr("transform", `translate(0,${plotH})`); const xAxisLabel = g.append("text").attr("class", "axis-label") .attr("x", plotW / 2).attr("y", plotH + 34).attr("text-anchor", "middle").text("denominator q"); let yAxisG = g.append("g"); const dataLayer = g.append("g").attr("class", "data-layer"); const labelLayer = g.append("g").attr("class", "label-layer"); // Hover elements const hoverHighlight = g.append("rect").attr("y", 0).attr("height", plotH) .attr("fill", "#c05030").attr("stroke", "#c05030").attr("stroke-width", 1) .attr("opacity", 0).attr("pointer-events", "none"); const hoverTextAttrs = el => el .attr("font-family", "JetBrains Mono, monospace").attr("font-weight", "700") .attr("stroke", "white").attr("stroke-width", 4).attr("stroke-linejoin", "round") .attr("paint-order", "stroke fill").attr("opacity", 0).attr("pointer-events", "none"); const hoverLabel = hoverTextAttrs( g.append("text").attr("text-anchor", "middle").attr("font-size", "9px").attr("fill", "#c05030") ); const hoverDot = g.append("circle").attr("r", 3.5).attr("fill", "#c05030") .attr("stroke", "#fff").attr("stroke-width", 1.5).attr("opacity", 0).attr("pointer-events", "none"); const xHoverLabel = hoverTextAttrs( xAxisG.append("text").attr("text-anchor", "middle").attr("font-size", "10px").attr("fill", "#1a1a1a") ); const yHoverLabel = hoverTextAttrs( g.append("text").attr("text-anchor", "end").attr("dx", "-0.5em") .attr("dominant-baseline", "middle").attr("font-size", "10px").attr("fill", "#1a1a1a") ); const fmtY = d3.format(".3s"); let yScale; // ── Redraw x-axis ── function redrawXAxis() { xScale = d3.scaleLog().domain([0.7, currentMaxPlotQ || 1000]).range([0, plotW]); xAxisG.selectAll("*").remove(); xAxisG.call(d3.axisBottom(xScale).ticks(10, "~s").tickSizeOuter(0)); xAxisG.select(".domain").remove(); xAxisG.selectAll(".tick").filter(function() { return d3.select(this).datum() < 1; }).remove(); } // ── Redraw chart data for current mode + data ── function redrawChart() { plotData = getPlotData(mode); convergents = plotData.filter(d => d.isConvergent); bestPoint = plotData.reduce( (b, d) => !b || d.metricVal > b.metricVal || (d.metricVal === b.metricVal && d.q < b.q) ? d : b, null ); yAxisLabel.text(mode === "div-q2" ? "Parsimony" : "Accuracy"); const yRange = mode === "div-q2" ? globalYRange.parsimony : globalYRange.accuracy; yScale = d3.scaleLog().domain([yRange.min * 0.5, yRange.max * 2]).range([plotH, 0]).clamp(true); yAxisG.selectAll("*").remove(); yAxisG.call(d3.axisLeft(yScale).ticks(6, "~s").tickSizeInner(-plotW)); yAxisG.selectAll(".tick line").attr("stroke", "#f0ece6"); yAxisG.select(".domain").attr("stroke", "#e0dcd6"); dataLayer.selectAll("*").remove(); for (let i = 1; i < plotData.length; i++) { const prev = plotData[i - 1], curr = plotData[i]; const coprime = funcs.gcd(curr.p, curr.q) === 1; dataLayer.append("line") .attr("x1", xScale(prev.q)).attr("y1", yScale(prev.metricVal)) .attr("x2", xScale(curr.q)).attr("y2", yScale(curr.metricVal)) .attr("stroke", "#a0a0a0").attr("stroke-width", 1).attr("opacity", 0.5) .attr("stroke-dasharray", coprime ? null : "2,2"); } labelLayer.selectAll("*").remove(); convergents.forEach(d => { labelLayer.append("circle") .attr("cx", xScale(d.q)).attr("cy", yScale(d.metricVal)).attr("r", 4) .attr("fill", d.q === bestPoint.q ? "#1a1a1a" : "#2860a8") .attr("stroke", "#fff").attr("stroke-width", 1.5); labelLayer.append("text") .attr("x", xScale(d.q)).attr("y", yScale(d.metricVal) - 9).attr("text-anchor", "middle") .attr("font-family", "JetBrains Mono, monospace").attr("font-size", "9px").attr("font-weight", 500) .attr("fill", d.q === bestPoint.q ? "#1a1a1a" : "#2860a8") .text(`${d.p}/${d.q}`); }); if (!bestPoint.isConvergent) { labelLayer.append("circle") .attr("cx", xScale(bestPoint.q)).attr("cy", yScale(bestPoint.metricVal)) .attr("r", 4).attr("fill", "#1a1a1a").attr("stroke", "#fff").attr("stroke-width", 1.5); labelLayer.append("text") .attr("x", xScale(bestPoint.q)).attr("y", yScale(bestPoint.metricVal) - 9) .attr("text-anchor", "middle") .attr("font-family", "JetBrains Mono, monospace").attr("font-size", "9px").attr("font-weight", 500) .attr("fill", "#1a1a1a").text(`${bestPoint.p}/${bestPoint.q}`); } } // ── Full redraw (value changed → new data + new x-axis) ── function fullRedraw() { loadData(); redrawXAxis(); redrawChart(); } redrawXAxis(); redrawChart(); // ── Interaction rect ── const interactRect = g.append("rect").attr("width", plotW).attr("height", plotH) .attr("fill", "transparent").attr("cursor", "crosshair") .on("mouseenter", () => { if (!audioCtx || audioCtx.state === "suspended") soundHint.transition().duration(300).attr("opacity", 1); }) .on("mousemove", function(event) { if (audioCtx && audioCtx.state === "running") soundHint.attr("opacity", 0); if (scanning) stopScan(); const [mx, my] = d3.pointer(event, this); const d = funcs.closestByEuclidean(plotData, xScale, yScale, mx, my); if (!d) return; const xL = xScale(Math.max(d.q - 0.5, xScale.domain()[0])); const xR = xScale(Math.min(d.q + 0.5, xScale.domain()[1])); hoverHighlight.attr("x", xL).attr("width", Math.max(0, xR - xL)).attr("opacity", 0.08); const px = xScale(d.q), py = yScale(d.metricVal); hoverLabel.attr("x", px).attr("y", py - 8).text(`${d.p}/${d.q}`).attr("opacity", 1); hoverDot.attr("cx", px).attr("cy", py).attr("opacity", 1); xHoverLabel.attr("x", px).attr("y", 13).attr("dominant-baseline", "middle").text(String(d.q)).attr("opacity", 1); yHoverLabel.attr("x", 0).attr("y", py) .text(fmtY(d.metricVal)).attr("opacity", 1); playHover(d.q, d.p); waveformHovered = { q: d.q, p: d.p }; }) .on("mouseleave", () => { soundHint.transition().duration(200).attr("opacity", 0); [hoverHighlight, hoverLabel, hoverDot, xHoverLabel, yHoverLabel].forEach(el => el.attr("opacity", 0)); fadeOutHoverAudio(); waveformHovered = null; }); // ══════════════════════════════════════════════════ // WAVEFORM // ══════════════════════════════════════════════════ const waveDiv = document.createElement("div"); waveDiv.style.marginTop = "4px"; container.appendChild(waveDiv); const waveH = 100, waveAmp = 38, waveMidY = waveH / 2, labelH = 18; const totalWaveH = waveH + labelH; const waveSvg = d3.select(waveDiv).append("svg") .attr("width", chartWidth).attr("height", totalWaveH) .attr("viewBox", `0 0 ${chartWidth} ${totalWaveH}`) .style("max-width", "100%").style("height", "auto"); const waveLabelG = waveSvg.append("text").attr("class", "axis-label wave-label") .attr("x", 0).attr("y", labelH - 4).attr("text-anchor", "start"); const wlPrefix = waveLabelG.append("tspan").attr("fill", "#a0a0a0"); const wlRational = waveLabelG.append("tspan").attr("fill", "#2860a8"); const wlMid = waveLabelG.append("tspan").attr("fill", "#a0a0a0"); const wlIrrational = waveLabelG.append("tspan").attr("fill", "#c05030"); const wlSuffix = waveLabelG.append("tspan").attr("fill", "#a0a0a0"); const clipId = "wave-clip-" + Math.random().toString(36).slice(2); waveSvg.append("defs").append("clipPath").attr("id", clipId) .append("rect").attr("width", plotW).attr("height", waveH); const waveG = waveSvg.append("g").attr("class", "wave-group") .attr("transform", `translate(${margin.left},${labelH})`) .attr("clip-path", `url(#${clipId})`); function getWaveDefault() { return bestPoint ? { q: bestPoint.q, p: bestPoint.p } : null; } function drawWaveframe(timestamp) { const active = waveformHovered || getWaveDefault(); if (!active) { waveformAnimId = requestAnimationFrame(drawWaveframe); return; } const { q, p } = active; const fractionalError = p > 0 ? (r - p / q) / (p / q) : 0; let t; if (audioCtx && activeHoverOscs.length > 0) { t = audioCtx.currentTime - activeHoverStartTime; } else { if (waveformStartTime === null) waveformStartTime = timestamp || 0; t = ((timestamp || 0) - waveformStartTime) / 1000; } // Waveform shape functions matching Web Audio oscillator types function sineWave(phase) { return Math.sin(2 * Math.PI * phase); } function triangleWave(phase) { const p = ((phase % 1) + 1) % 1; return p < 0.25 ? 4 * p : p < 0.75 ? 2 - 4 * p : 4 * p - 4; } function squareWave(phase) { const p = ((phase % 1) + 1) % 1; return p < 0.5 ? 1 : -1; } function sawtoothWave(phase) { const p = ((phase % 1) + 1) % 1; return 2 * p - 1; } const waveFns = { sine: sineWave, triangle: triangleWave, square: squareWave, sawtooth: sawtoothWave }; const waveFn = waveFns[currentTimbre.type] || sineWave; const multi = isMultiLayer(currentFreq); const basePeriod = 100; const totalGain = currentLayers.reduce((s, l) => s + l.gain, 0); const nPts = Math.ceil(plotW) * 2; const rRaw = [], iRaw = [], bRaw = []; for (let i = 0; i <= nPts; i++) { const x = i * plotW / nPts; // spatial coordinate in pixels let rS = 0, iS = 0; for (const layer of currentLayers) { const ro = rolloffScale(layer.freq); const w = (layer.gain * ro) / totalGain; const period = basePeriod * (BASE_FREQ / layer.freq); const irrFreq = layer.freq * (1 + fractionalError); const iPeriod = basePeriod * (BASE_FREQ / irrFreq); const phase = (irrFreq - layer.freq) * t; const offset = multi ? 0.25 : 0; rS += w * waveFn(x / period + offset); iS += w * waveFn(x / iPeriod + phase + offset); } rRaw.push(rS); iRaw.push(iS); bRaw.push((rS + iS) / 2); } // Always normalize let scale = 1; let peak = 0; for (let i = 0; i <= nPts; i++) peak = Math.max(peak, Math.abs(rRaw[i]), Math.abs(iRaw[i]), Math.abs(bRaw[i])); if (peak > 0) scale = 1 / peak; const rTruncated = r.toFixed(9).replace(/\.?0+$/, "") + "…"; wlPrefix.text("Beat Wave ("); wlRational.text(`${p}/${q}`); wlMid.text(" vs "); wlIrrational.text(rTruncated); wlSuffix.text(")"); waveG.selectAll("*").remove(); waveG.append("line") .attr("x1", 0).attr("x2", plotW).attr("y1", waveMidY).attr("y2", waveMidY) .attr("stroke", "#e0dcd6").attr("stroke-width", 1); const lineFn = d3.line(); const pts = arr => arr.map((v, i) => [i * plotW / nPts, waveMidY - waveAmp * v * scale]); waveG.append("path").attr("d", lineFn(pts(iRaw))) .attr("fill", "none").attr("stroke", "#c05030").attr("stroke-width", 0.5).attr("opacity", 0.7).attr("stroke-linejoin", "round"); waveG.append("path").attr("d", lineFn(pts(rRaw))) .attr("fill", "none").attr("stroke", "#2860a8").attr("stroke-width", 0.5).attr("opacity", 0.7).attr("stroke-linejoin", "round"); waveG.append("path").attr("d", lineFn(pts(bRaw))) .attr("fill", "none").attr("stroke", "#1a1a1a").attr("stroke-width", 3).attr("stroke-linejoin", "round"); waveformAnimId = requestAnimationFrame(drawWaveframe); } waveformAnimId = requestAnimationFrame(drawWaveframe); // ══════════════════════════════════════════════════ // SCAN // ══════════════════════════════════════════════════ function stopScan() { scanning = false; clearTimeout(scanTimeout); scanTimeout = null; fadeOutHoverAudio(); svg.selectAll(".scan-line").remove(); scanBtn.textContent = "▶ Scan"; scanBtn.style.borderColor = "#e0dcd6"; scanBtn.style.color = "#1a1a1a"; scanBtn.style.background = "#fff"; waveformHovered = null; } function startScan() { if (scanning) { stopScan(); return; } scanning = true; scanBtn.textContent = "■ Stop"; scanBtn.style.borderColor = "#c05030"; scanBtn.style.color = "#c05030"; scanBtn.style.background = "#fef6f4"; let idx = 0; (function step() { if (!scanning || idx >= convergents.length) { stopScan(); return; } const d = convergents[idx]; svg.selectAll(".scan-line").remove(); g.append("line").attr("class", "scan-line") .attr("x1", xScale(d.q)).attr("x2", xScale(d.q)) .attr("y1", 0).attr("y2", plotH) .attr("stroke", "#c05030").attr("stroke-width", 1).attr("opacity", 0.3); playHover(d.q, d.p); waveformHovered = { q: d.q, p: d.p }; activeHoverQ = null; idx++; scanTimeout = setTimeout(step, 2000); })(); } // ══════════════════════════════════════════════════ // EVENT LISTENERS // ══════════════════════════════════════════════════ function onValueChange() { const parsed = parseFloat(valueInput.value); if (!parsed || !isFinite(parsed) || parsed <= 0) return; r = parsed; if (scanning) stopScan(); fadeOutHoverAudio(); waveformHovered = null; fullRedraw(); } presetSelect.addEventListener("change", () => { valueInput.value = presetSelect.value; onValueChange(); }); valueInput.addEventListener("input", () => { presetSelect.value = "custom"; onValueChange(); }); modeSelect.addEventListener("change", () => { mode = modeSelect.value; if (scanning) stopScan(); redrawChart(); }); freqSelect.addEventListener("change", () => { const idx = parseInt(freqSelect.value, 10); currentFreq = presets.frequencies[idx]; currentLayers = freqToLayers(currentFreq); fadeOutHoverAudio(); }); timbreSelect.addEventListener("change", () => { const idx = parseInt(timbreSelect.value, 10); currentTimbre = presets.timbres[idx]; fadeOutHoverAudio(); }); scanBtn.addEventListener("click", startScan); // ══════════════════════════════════════════════════ // CLEANUP // ══════════════════════════════════════════════════ invalidation.then(() => { scanning = false; clearTimeout(scanTimeout); if (waveformAnimId) cancelAnimationFrame(waveformAnimId); fadeOutHoverAudio(); if (audioCtx) audioCtx.close(); }); return container; }