29:null 2a:["$","title",null,{"children":"Tuning the Music of the Spheres | Lao | Observable"}] 2f:T6dfc,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); // Viewed in the frame of the actual (irrational) value: the irrational // wave is stationary and the rational approximation drifts against it. // Sign is flipped relative to the old rational-frame version so the // relative phase — and therefore the beat envelope — is unchanged. const phase = (layer.freq - irrFreq) * t; const offset = multi ? 0.25 : 0; rS += w * waveFn(x / period + phase + offset); iS += w * waveFn(x / iPeriod + 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; }30:T40d,This notebook explores different rational approximations for ratios found in nature. The best approximation for each integer denominator is plotted on the line graph. The convergents, the best approximations for that denominator or less, are plotted as blue points. If you press the "Scan" button, or mouse over a point, you can hear two frequencies play. One frequency is the rational approximation, and the other is the actual ratio. The more accurate the approximation, the more in tune the two frequencies will be. When two frequencies are close, they will create a beat wave, which is how musicians tune their instruments. The slower the beat, the more accurate the tuning. The high-frequency sine wave preset is the best to detect simple beat patterns, but I find the Open 4ths square wave preset to be easy to detect when the approximation is slightly out of tune. On the Y-axis, you can choose between accuracy (how in tune an approximation is) and parsimony (how good that approximation is for the size of the denominator). 31:T10e0,// Cell 1: Data — Presets & Constants // Name this cell: presets presets = { const groups = [ { label: "Astronomical Ratios", items: [ { label: "Metonic cycle (lunar month / year)", value: 12.36826639046, selected: true }, { label: "Venus synodic period (years)", value: 1.59872385082 }, { label: "Saros eclipse cycle (years)", value: 18.03001538625 }, { label: "Synodic month (days)", value: 29.530588861 }, { label: "Tropical year (days)", value: 365.24219 }, { label: "Sidereal month (days)", value: 27.321661 }, { label: "Draconic month (days)", value: 27.212221 }, { label: "Lunar apsidal precession (years)", value: 8.85042 }, ] }, { label: "Planetary Orbital Ratios", items: [ { label: "Earth–Uranus", value: 84.01538413231610 }, { label: "Mercury–Neptune", value: 684.21664070962993 }, { label: "Mercury–Saturn", value: 122.26656209115591 }, { label: "Venus–Saturn", value: 47.86675740395853 }, { label: "Mars–Uranus", value: 44.66967233283548 }, { label: "Jupiter–Saturn (Great Inequality)", value: 2.4833229084681445 }, { label: "Earth–Jupiter", value: 11.861778298308668 }, { label: "Earth–Neptune", value: 164.76646568191595 }, { label: "Venus–Mars", value: 3.0573072661002847 }, { label: "Jupiter–Neptune", value: 13.890536607433429 }, { label: "Uranus–Neptune", value: 1.9610603320462063 }, ] }, { label: "Famous Constants", items: [ { label: "φ — Most irrational", value: 1.6180339887498948 }, { label: "π", value: 3.141592653589793 }, { label: "e", value: 2.718281828459045 }, { label: "√2", value: 1.4142135623730951 }, ] }, ]; const frequencies = [ { label: "Sub (55 Hz)", value: 55 }, { label: "Low (110 Hz)", value: 110 }, { label: "Mid (220 Hz)", value: 220, selected: true }, { label: "High (440 Hz)", value: 440 }, { label: "Octaves (55–880 Hz)", value: [ { freq: 55, gain: 0.30 }, { freq: 110, gain: 0.22 }, { freq: 220, gain: 0.15 }, { freq: 440, gain: 0.08 }, { freq: 880, gain: 0.03 }, ] }, { label: "Wide spectrum (37–1175 Hz)", value: [ { freq: 36.7, gain: 0.14 }, { freq: 73.4, gain: 0.20 }, { freq: 146.8, gain: 0.22 }, { freq: 293.7, gain: 0.18 }, { freq: 587.3, gain: 0.14 }, { freq: 880, gain: 0.08 }, { freq: 1175, gain: 0.04 }, ] }, { label: "Open 4ths (73–1175 Hz)", value: [ { freq: 73.4, gain: 0.16 }, { freq: 146.8, gain: 0.20 }, { freq: 293.7, gain: 0.22 }, { freq: 587.3, gain: 0.20 }, { freq: 1175, gain: 0.12 }, ] }, { label: "Power chord (55–1760 Hz)", value: [ { freq: 55, gain: 0.14 }, { freq: 110, gain: 0.20 }, { freq: 165, gain: 0.22 }, { freq: 330, gain: 0.18 }, { freq: 660, gain: 0.14 }, { freq: 1320, gain: 0.08 }, { freq: 1760, gain: 0.04 }, ] }, ]; // Timbres control oscillator type and high-frequency softening. // type: Web Audio oscillator type ("sine", "triangle", "square", "sawtooth") // rolloff: if present, gain is multiplied by min(1, rolloff / freq) for each oscillator, // softening higher frequencies while keeping lows clear. const timbres = [ { label: "Sine", type: "sine", rolloff: 300, selected: true }, { label: "Triangle", type: "triangle", rolloff: 400 }, { label: "Square", type: "square", rolloff: 250 }, { label: "Saw", type: "sawtooth", rolloff: 180 }, ]; const allValues = groups.flatMap(g => g.items.map(i => i.value)); const selectedItem = groups.flatMap(g => g.items).find(i => i.selected) || groups[0].items[0]; const defaultValue = selectedItem.value; const defaultFreq = frequencies.find(f => f.selected) || frequencies[0]; const defaultTimbre = timbres.find(t => t.selected) || timbres[0]; return { groups, frequencies, timbres, allValues, defaultValue, defaultFreq, defaultTimbre, constants: { MAX_Q: 1000, BASE_FREQ: 220, FADE_TIME: 0.06, }}; }32:Tb2f,// Cell 2: Pure Functions // Name this cell: funcs funcs = { function gcd(a, b) { a = Math.abs(a); b = Math.abs(b); while (b) { [a, b] = [b, a % b]; } return a; } function continuedFraction(x, maxTerms = 100) { const terms = [], convergents = []; let val = x, a = Math.floor(val), remainder = val - a; let h_prev = 1, h_curr = a, k_prev = 0, k_curr = 1; let exactTermination = false; terms.push(a); convergents.push({ p: h_curr, q: k_curr }); for (let i = 0; i < maxTerms; i++) { if (remainder <= 0) { exactTermination = true; break; } val = 1 / remainder; a = Math.floor(val); remainder = val - a; terms.push(a); const h = a * h_curr + h_prev, k = a * k_curr + k_prev; convergents.push({ p: h, q: k }); h_prev = h_curr; h_curr = h; k_prev = k_curr; k_curr = k; if (h / k === x) { exactTermination = true; break; } } return { terms, convergents, exactTermination }; } function computeData(r) { const MAX_PLOT_Q = 1000; const cf = continuedFraction(r); const allConv = cf.convergents; const lastConv = allConv[allConv.length - 1]; const lastIsArtifact = cf.exactTermination && lastConv.q > MAX_PLOT_Q; let displayConv, maxPlotQ; if (lastIsArtifact) { displayConv = allConv.slice(0, -1).filter(c => c.q <= MAX_PLOT_Q); if (displayConv.length > 0) { const lastShown = displayConv[displayConv.length - 1]; const nextConv = allConv.find(c => c.q > lastShown.q); const nextQ = nextConv ? Math.min(nextConv.q, MAX_PLOT_Q * 100) : lastShown.q; maxPlotQ = Math.min( Math.round(Math.exp((Math.log(lastShown.q) + Math.log(nextQ)) / 2)), MAX_PLOT_Q ); } else { maxPlotQ = 10; } } else { displayConv = allConv.filter(c => c.q <= MAX_PLOT_Q); maxPlotQ = displayConv.length > 0 ? displayConv[displayConv.length - 1].q : 10; } const convergentQs = new Set(displayConv.map(c => c.q)); const data = []; for (let q = 1; q <= maxPlotQ; q++) { const p = Math.round(r * q); const absError = Math.abs(r - p / q); const fractionalError = p > 0 ? absError / (p / q) : absError; data.push({ q, p, absError, fractionalError, isConvergent: convergentQs.has(q) }); } return { data, cf, maxPlotQ }; } function metricValue(d) { return d.fractionalError > 0 ? 1 / d.fractionalError : 1e15; } function closestByEuclidean(data, xScale, yScale, mx, my) { let best = null, bestDist = Infinity; for (const d of data) { const dist = Math.hypot(xScale(d.q) - mx, yScale(d.metricVal) - my); if (dist < bestDist) { bestDist = dist; best = d; } } return best; } return { gcd, continuedFraction, computeData, metricValue, closestByEuclidean }; }33:[] 2d:{"id":"60d6aa481b8f854e","slug":null,"title":"Tuning the Music of the Spheres","thumbnail":"b66938810e3eb1b4faf06ee96d98ce14d1609eb54f34e383bd49ce399d5bb605","access_level":"public","create_time":"$D2026-03-07T19:54:28.228Z","update_time":"$D2026-08-31T23:26:59.616Z","view_time":null,"first_public_time":"$D2026-03-08T22:56:40.638Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":98,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Tuning the Music of the Spheres","cells":[{"id":0,"value":"# Tuning the Music of the Spheres\n## Rank ordering the most accurate rational approximation of natural ratios","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":19,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":69,"value":"### Utility","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"// Cell 3: Precomputed fraction data for all presets + global Y range\n// Name this cell: presetData\n\npresetData = {\n const byValue = new Map();\n const yRange = {\n accuracy: { min: Infinity, max: -Infinity },\n parsimony: { min: Infinity, max: -Infinity }\n };\n\n for (const r of presets.allValues) {\n const { data, cf, maxPlotQ } = funcs.computeData(r);\n byValue.set(r, { data, cf, maxPlotQ });\n\n for (const d of data) {\n const raw = funcs.metricValue(d);\n const acc = Math.max(raw, 1e-15);\n const pars = Math.max(raw / Math.max(d.q * d.q, 1), 1e-15);\n if (isFinite(acc)) {\n yRange.accuracy.min = Math.min(yRange.accuracy.min, acc);\n yRange.accuracy.max = Math.max(yRange.accuracy.max, acc);\n }\n if (isFinite(pars)) {\n yRange.parsimony.min = Math.min(yRange.parsimony.min, pars);\n yRange.parsimony.max = Math.max(yRange.parsimony.max, pars);\n }\n }\n }\n\n return { byValue, globalYRange: yRange };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"// Cell 3: Precomputed global Y-axis ranges\n// Name this cell: globalYRange\n\nglobalYRange = {\n const range = {\n accuracy: { min: Infinity, max: -Infinity },\n parsimony: { min: Infinity, max: -Infinity }\n };\n\n for (const r of presets.allValues) {\n const { data } = funcs.computeData(r);\n for (const d of data) {\n const raw = funcs.metricValue(d);\n const acc = Math.max(raw, 1e-15);\n const pars = Math.max(raw / Math.max(d.q * d.q, 1), 1e-15);\n if (isFinite(acc)) {\n range.accuracy.min = Math.min(range.accuracy.min, acc);\n range.accuracy.max = Math.max(range.accuracy.max, acc);\n }\n if (isFinite(pars)) {\n range.parsimony.min = Math.min(range.parsimony.min, pars);\n range.parsimony.max = Math.max(range.parsimony.max, pars);\n }\n }\n }\n return range;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"// Cell 7: Styles\n// Name this cell: style\n\nstyle = html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"### Future additions:\n\n- poly rhythms of 3 or more natural ratios\n- sound waves created from ideal circular orbit to extreme ellipses\n- Plot Pareto frontier of cost vs accuracy\n - Lower bound for accuracy. A parsimonious ratio that is badly tuned is not worth it\n - Upper bound on complexity. At a certain point, the rational approximation is so complex, it isn't an intuitive pattern\n - Comparing trade offs on the frontier of options that don't clearly dominate all categories","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"