Embed
The script finds its own origin, so nothing else is needed; the widget runs in a sandboxed frame and cannot touch your page. Set the controls and the two lines update; the preview beneath shows what your readers get.
<script src="https://learn.mimmsy.com/learn-widget.js"></script>
<learn-widget name="superposition-mixer"></learn-widget> It is CC-BY-4.0: keep the credit line the frame shows.
Preview
Fork
A fork is a copy whose manifest names its parent and the parent's version; lineage is kept forever, and the copy is yours to change. The library is its own repository: clone it, copy superposition-mixer/ to a new name (one DNS label), set forkedFrom to { "name": "superposition-mixer", "version": 1 }, change what you want, run npm run check, and open a pull request. Passing the check is the whole gate. Without a checkout, submit the same files to POST /api/widgets and it is served instantly as an unreviewed draft.
Source
The whole widget is these files; the repository has their history.
widget.json
{
"name": "superposition-mixer",
"title": "Superposition mixer",
"version": 1,
"claim": "The waveform of three simultaneous tones is their sample-by-sample sum, and two equal tones at f₁ and f₂ pulse |f₁ − f₂| times per second.",
"summary": "Tune three sinusoids by frequency and amplitude, watch the dim components add into the bright sum, and play the sum through live oscillators. The beats preset sets 440 + 444 Hz so the predicted 4 Hz pulsing is audible.",
"topics": [
"signals/sinusoids"
],
"aliases": [
"superposition",
"beats",
"sum of sines",
"mixer"
],
"params": {
"f1": {
"type": "integer",
"default": 220,
"min": 50,
"max": 880,
"label": "wave 1 frequency (Hz)"
},
"a1": {
"type": "number",
"default": 0.8,
"min": 0,
"max": 1,
"label": "wave 1 amplitude"
},
"f2": {
"type": "integer",
"default": 440,
"min": 50,
"max": 880,
"label": "wave 2 frequency (Hz)"
},
"a2": {
"type": "number",
"default": 0.5,
"min": 0,
"max": 1,
"label": "wave 2 amplitude"
},
"f3": {
"type": "integer",
"default": 660,
"min": 50,
"max": 880,
"label": "wave 3 frequency (Hz)"
},
"a3": {
"type": "number",
"default": 0,
"min": 0,
"max": 1,
"label": "wave 3 amplitude"
}
},
"check": [
{
"q": "Two tones at 440 Hz and 444 Hz play together. What do you hear?",
"options": [
"two clearly separate notes",
"a single steady 884 Hz tone",
"silence — they cancel out",
"one tone, pulsing about 4 times per second"
],
"answer": 3,
"why": "The sum-to-product identity rewrites the sum as one tone at the average frequency whose envelope pulses at the difference rate, |440 − 444| = 4 Hz."
},
{
"q": "Superposition means that when two sounds overlap…",
"options": [
"their pressures multiply together",
"the higher frequency modulates the lower one",
"the louder sound masks the quieter one completely",
"their pressure deviations add, point by point"
],
"answer": 3,
"why": "Linear media combine signals by addition, which is also what makes a sum of sinusoids separable back into its components."
},
{
"q": "Tones at 438 Hz and 442 Hz played together beat at…",
"options": [
"440 Hz",
"4 Hz",
"2 Hz",
"880 Hz"
],
"answer": 1,
"why": "The beat rate is the difference |442 − 438| = 4 pulses per second, from the sum-to-product identity."
}
],
"capabilities": [],
"height": 550,
"requires": [],
"forkedFrom": null,
"authors": []
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Superposition mixer</title>
<style>
:root {
color-scheme: light dark;
--bg: #f7f3ea;
--bg-card: #efe9da;
--border: #d8cfba;
--text: #211d14;
--text-dim: #6e6553;
--accent: #31597f;
--accent2: #b04e1b;
--hot: #a82433;
--ok: #3d6b4f;
--ink-rgb: 33, 29, 20;
--paper-rgb: 247, 243, 234;
--accent-rgb: 49, 89, 127;
--accent2-rgb: 176, 78, 27;
--hot-rgb: 168, 36, 51;
--ok-rgb: 61, 107, 79;
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #161410;
--bg-card: #1e1b15;
--border: #383225;
--text: #e9e3d3;
--text-dim: #9c917c;
--accent: #8fb8e0;
--accent2: #dd9355;
--hot: #df7a88;
--ok: #82bd97;
--ink-rgb: 233, 227, 211;
--paper-rgb: 22, 20, 16;
--accent-rgb: 143, 184, 224;
--accent2-rgb: 221, 147, 85;
--hot-rgb: 223, 122, 136;
--ok-rgb: 130, 189, 151;
}
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: transparent; color: var(--text); font-family: var(--serif); font-size: 15px; line-height: 1.5; }
.widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 22px; }
.control-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.control-row label { font-size: 14px; color: var(--text-dim); white-space: nowrap; }
.control-row.sym { display: grid; grid-template-columns: 88px 1fr 1fr; gap: 12px 16px; align-items: center; }
.control-row.sym.single { grid-template-columns: 88px 1fr; }
.ctl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ctl input[type="range"] { flex: 1; min-width: 0; }
.ctl .val { flex: none; width: 64px; text-align: right; font-size: 13px; }
@media (max-width: 600px) {
.control-row.sym { grid-template-columns: 64px 1fr; }
.control-row.sym .ctl:nth-of-type(2) { grid-column: 2; }
}
input[type="range"] { flex: 1; min-width: 110px; accent-color: var(--accent); }
.toggle { display: inline-flex; align-items: baseline; gap: 7px; font-size: 13.5px; color: var(--text-dim); cursor: pointer; }
.toggle input { accent-color: var(--accent2); }
.control-row .toggle { white-space: normal; }
.mono { font-family: var(--mono); }
.dim { color: var(--text-dim); font-size: 12.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip, .btn {
font-family: var(--mono); font-size: 12.5px; color: var(--text); background: transparent;
border: 1px solid var(--border); border-radius: 3px; padding: 6px 13px; cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.chip:hover, .btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { border-color: var(--accent); color: var(--accent); }
.btn.playing, .btn.playing:hover { border-color: var(--hot); color: var(--hot); }
.btn.off { border-color: var(--hot); color: var(--hot); opacity: 0.85; }
.btn:disabled { opacity: 0.35; cursor: default; }
.btn:disabled:hover { border-color: var(--border); color: var(--text); }
.chip.sel-chip { border-color: var(--accent); color: var(--accent); }
.readout-row { display: flex; gap: 28px; flex-wrap: wrap; margin: 14px 0 0; }
.readout { text-align: left; }
.readout.inline { margin-left: auto; text-align: right; }
.readout .big { display: block; font-size: 30px; font-weight: 600; color: var(--accent); line-height: 1.1; min-width: 5ch; }
.readout.accent .big { color: var(--accent2); }
.readout .big.hot { color: var(--hot); }
.readout small { color: var(--text-dim); font-size: 12.5px; }
@media (max-width: 560px) { .readout .big { font-size: 25px; } }
.plot { display: block; width: 100%; height: 220px; margin-top: 8px; }
.plot.tall { height: 280px; }
.plot.duo { height: 320px; }
.plot.phasor { height: 400px; }
.plot.spec { height: 230px; }
.mono, .ctl .val, .readout .big, .readout small { font-variant-numeric: tabular-nums; }
</style>
</head>
<body>
<div class="widget">
<div class="control-row sym">
<label for="mix-f1">wave 1</label>
<span class="ctl"><input type="range" id="mix-f1" min="50" max="880" value="220"><span class="mono val" id="mix-f1-label">220 Hz</span></span>
<span class="ctl"><input type="range" id="mix-a1" min="0" max="100" value="80"><span class="mono val" id="mix-a1-label">0.80</span></span>
</div>
<div class="control-row sym">
<label for="mix-f2">wave 2</label>
<span class="ctl"><input type="range" id="mix-f2" min="50" max="880" value="440"><span class="mono val" id="mix-f2-label">440 Hz</span></span>
<span class="ctl"><input type="range" id="mix-a2" min="0" max="100" value="50"><span class="mono val" id="mix-a2-label">0.50</span></span>
</div>
<div class="control-row sym">
<label for="mix-f3">wave 3</label>
<span class="ctl"><input type="range" id="mix-f3" min="50" max="880" value="660"><span class="mono val" id="mix-f3-label">660 Hz</span></span>
<span class="ctl"><input type="range" id="mix-a3" min="0" max="100" value="0"><span class="mono val" id="mix-a3-label">0.00</span></span>
</div>
<div class="chips">
<button class="btn primary" id="mix-play">▶ play the sum</button>
<button class="chip" data-mix="220,80,440,50,0,0">octave · 220 + 440</button>
<button class="chip" data-mix="220,80,330,60,0,0">fifth · 220 + 330</button>
<button class="chip" data-mix="440,70,444,70,0,0">beats · 440 + 444</button>
<button class="chip" data-mix="220,80,440,40,880,20">220 + 440 + 880</button>
</div>
<canvas id="mix-canvas" class="plot tall"></canvas>
<div class="readout-row">
<div class="readout">
<span class="big mono" id="mix-active">2</span>
<small>components in the sum</small>
</div>
<div class="readout">
<span class="big mono" id="mix-beat">—</span>
<small>predicted beat rate · |f₁ − f₂| Hz</small>
</div>
</div>
</div>
<script src="/w/_sdk/host.js?v=1"></script>
<script src="/w/_lib/dsp.js?v=1"></script>
<script src="widget.js?v=1"></script>
</body>
</html>
widget.js
/* Superposition mixer: three sinusoids, their sum drawn live and played through oscillators. */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const { T, clamp, setupCanvas, hline, hGradient, signal } = DSP;
const WIN = 0.03;
const F_MIN = 50, F_MAX = 880;
let mixF = [220, 440, 660];
let mixA = [0.8, 0.5, 0];
let nodes = null;
let dims = null;
let phase = 0;
let last = performance.now();
function syncControls() {
for (let i = 0; i < 3; i++) {
$('mix-f' + (i + 1)).value = mixF[i];
$('mix-a' + (i + 1)).value = Math.round(mixA[i] * 100);
}
}
function updateLabels() {
for (let i = 0; i < 3; i++) {
$('mix-f' + (i + 1) + '-label').textContent = mixF[i] + ' Hz';
$('mix-a' + (i + 1) + '-label').textContent = mixA[i].toFixed(2);
}
const act = mixA.map((a, i) => (a > 0 ? i : -1)).filter((i) => i >= 0);
$('mix-active').textContent = act.length;
$('mix-beat').textContent = act.length === 2 ? Math.abs(mixF[act[0]] - mixF[act[1]]) : '—';
}
function frame(now) {
const dt = Math.min(now - last, 50) / 1000;
last = now;
phase += dt * 1.2;
const { ctx, w, h } = dims;
const mid = h / 2;
const sumA = Math.max(1, mixA.reduce((s, a) => s + a, 0));
const scale = (h * 0.42) / sumA;
ctx.clearRect(0, 0, w, h);
hline(ctx, 0, w, mid, T.GRID);
for (let i = 0; i < 3; i++) {
if (mixA[i] <= 0) continue;
ctx.strokeStyle = [T.ACCENT, T.ACCENT2, T.OK][i];
ctx.globalAlpha = 0.3;
ctx.lineWidth = 1.3;
ctx.beginPath();
for (let x = 0; x <= w; x++) {
const t = (x / w) * WIN;
const y = mid - scale * mixA[i] * Math.sin(2 * Math.PI * (mixF[i] * t - phase));
if (x === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.stroke();
}
ctx.globalAlpha = 1;
ctx.strokeStyle = hGradient(ctx, 0, w);
ctx.lineWidth = 2.3;
ctx.beginPath();
for (let x = 0; x <= w; x++) {
const t = (x / w) * WIN;
let v = 0;
for (let i = 0; i < 3; i++) v += mixA[i] * Math.sin(2 * Math.PI * (mixF[i] * t - phase));
const y = mid - scale * v;
if (x === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.stroke();
ctx.font = DSP.font(10);
DSP.label(ctx, '30 ms window · dim = components, bright = their sum', 8, 13);
requestAnimationFrame(frame);
}
function syncAudio() {
if (!nodes) return;
const ctx = DSP.audioCtx();
for (let i = 0; i < 3; i++) {
nodes[i].osc.frequency.setTargetAtTime(mixF[i], ctx.currentTime, 0.02);
nodes[i].gain.gain.setTargetAtTime(mixA[i] * 0.07, ctx.currentTime, 0.02);
}
}
function setMix(f, a) {
for (let i = 0; i < 3; i++) {
mixF[i] = clamp(Math.round(f[i]), F_MIN, F_MAX);
mixA[i] = clamp(a[i], 0, 1);
}
syncControls();
updateLabels();
syncAudio();
}
for (let i = 0; i < 3; i++) {
$('mix-f' + (i + 1)).addEventListener('input', (e) => {
mixF[i] = +e.target.value;
updateLabels();
syncAudio();
signal('interaction', { control: 'f' + (i + 1) });
});
$('mix-a' + (i + 1)).addEventListener('input', (e) => {
mixA[i] = e.target.value / 100;
updateLabels();
syncAudio();
signal('interaction', { control: 'a' + (i + 1) });
});
}
document.querySelectorAll('.chip[data-mix]').forEach((chip) => {
chip.addEventListener('click', () => {
const v = chip.dataset.mix.split(',').map(Number);
setMix([v[0], v[2], v[4]], [v[1] / 100, v[3] / 100, v[5] / 100]);
signal('interaction', { preset: chip.textContent });
});
});
DSP.playButton($('mix-play'), () => {
const ctx = DSP.audioCtx();
const master = ctx.createGain();
master.gain.value = 0.9;
master.connect(ctx.destination);
nodes = mixF.map((f, i) => {
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.frequency.value = f;
gain.gain.value = mixA[i] * 0.07;
osc.connect(gain).connect(master);
osc.start();
return { osc, gain };
});
signal('interaction', { play: true });
return () => {
const n = nodes;
nodes = null;
master.gain.setTargetAtTime(0, ctx.currentTime, 0.02);
n.forEach((x) => x.osc.stop(ctx.currentTime + 0.12));
};
});
function applyParams(p) {
const f = [p.f1, p.f2, p.f3].map((v, i) => (typeof v === 'number' ? v : mixF[i]));
const a = [p.a1, p.a2, p.a3].map((v, i) => (typeof v === 'number' ? v : mixA[i]));
setMix(f, a);
}
function layout() { dims = setupCanvas($('mix-canvas')); }
layout();
syncControls();
updateLabels();
requestAnimationFrame(frame);
DSP.onResize(layout);
DSP.connect({ render: layout, params: applyParams });
})();