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="harmonic-builder"></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 harmonic-builder/ to a new name (one DNS label), set forkedFrom to { "name": "harmonic-builder", "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": "harmonic-builder",
"title": "Harmonic builder",
"version": 1,
"claim": "Summing sinusoids at whole-number multiples of a fundamental converges on a square, sawtooth or triangle wave as harmonics are added, while the pitch stays at the fundamental.",
"summary": "Choose a target waveform and slide the number of harmonics from 1 to 24; the partial Fourier sum sharpens toward the dashed target, with Gibbs overshoot at the edges. The same partial sum plays at a 110 Hz fundamental so the timbre change is audible.",
"topics": [
"signals/sinusoids",
"signals/fourier"
],
"aliases": [
"Fourier series",
"harmonics",
"square wave",
"sawtooth",
"triangle wave",
"Gibbs phenomenon",
"timbre"
],
"params": {
"harmonics": {
"type": "integer",
"default": 3,
"min": 1,
"max": 24,
"label": "number of harmonics"
},
"target": {
"type": "string",
"default": "square",
"enum": [
"square",
"saw",
"triangle"
],
"label": "target waveform"
}
},
"check": [
{
"q": "A waveform repeats 100 times per second. Which frequencies can appear in its Fourier series?",
"options": [
"any frequency above 100 Hz",
"whole-number multiples of 100 Hz",
"any frequency below 100 Hz",
"only 100 Hz itself"
],
"answer": 1,
"why": "Repetition with period 1/100 s forces every component to repeat with that period, and only the harmonics m × 100 Hz do."
},
{
"q": "A waveform repeats with period 10 ms. Its Fourier series can contain…",
"options": [
"only powers of two times 100 Hz",
"only whole-number multiples of 100 Hz",
"only frequencies below 100 Hz",
"any frequency"
],
"answer": 1,
"why": "Every component must repeat with the waveform’s period, and only the harmonics of 1/(10 ms) = 100 Hz do."
}
],
"capabilities": [],
"height": 410,
"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>Harmonic builder</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 single">
<label for="hb-k">harmonics</label>
<span class="ctl wide"><input type="range" id="hb-k" min="1" max="24" value="3"><span class="mono val" id="hb-k-label">3</span></span>
</div>
<div class="chips">
<button class="btn primary" id="hb-play">▶ play the partial sum</button>
<button class="chip" data-target="square">square</button>
<button class="chip" data-target="saw">sawtooth</button>
<button class="chip" data-target="triangle">triangle</button>
</div>
<canvas id="hb-canvas" class="plot tall"></canvas>
</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
/* Harmonic builder: partial Fourier sums converge on square, sawtooth and triangle targets; the same sum plays at 110 Hz. */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const { T, setupCanvas, hline, trace, hGradient, signal } = DSP;
const TARGETS = ['square', 'saw', 'triangle'];
const SCALE = { square: 4 / Math.PI, saw: 2 / Math.PI, triangle: 8 / (Math.PI * Math.PI) };
let K = 3;
let target = 'square';
let osc = null;
function coef(m) {
if (target === 'square') return m % 2 === 1 ? 1 / m : 0;
if (target === 'saw') return (m % 2 === 1 ? 1 : -1) / m;
if (m % 2 === 0) return 0;
return (((m - 1) / 2) % 2 === 0 ? 1 : -1) / (m * m);
}
function targetValue(u) {
const p = ((u % 1) + 1) % 1;
if (target === 'square') return p < 0.5 ? 1 : -1;
if (target === 'saw') return p < 0.5 ? 2 * p : 2 * p - 2;
return p < 0.25 ? 4 * p : p < 0.75 ? 2 - 4 * p : 4 * p - 4;
}
function partial(u) {
let v = 0;
for (let m = 1; m <= K; m++) v += coef(m) * Math.sin(2 * Math.PI * m * u);
return v * SCALE[target];
}
function render() {
$('hb-k').value = K;
$('hb-k-label').textContent = K;
document.querySelectorAll('.chip[data-target]').forEach((c) => c.classList.toggle('sel-chip', c.dataset.target === target));
const { ctx, w, h } = setupCanvas($('hb-canvas'));
const x0 = 14;
const pw = w - 28;
const mid = h / 2;
const amp = h * 0.36;
ctx.clearRect(0, 0, w, h);
hline(ctx, x0, w - 14, mid, T.GRID);
trace(ctx, (u) => targetValue(u * 2), { x0, pw, mid, amp, color: T.HOT, alpha: 0.55, lw: 1.5, dash: [5, 5] });
trace(ctx, (u) => partial(u * 2), { x0, pw, mid, amp, color: hGradient(ctx, x0, w - 14), lw: 2.2 });
ctx.font = DSP.font(10);
DSP.label(ctx, 'dashed = target · bright = partial sum, m ≤ ' + K, x0 + 2, 13);
}
function wave(ctx) {
const n = Math.max(K + 1, 2);
const real = new Float32Array(n);
const imag = new Float32Array(n);
for (let m = 1; m <= K; m++) imag[m] = coef(m);
return ctx.createPeriodicWave(real, imag);
}
function syncAudio() {
if (osc) osc.setPeriodicWave(wave(DSP.audioCtx()));
}
$('hb-k').addEventListener('input', () => {
K = +$('hb-k').value;
render();
syncAudio();
signal('interaction', { harmonics: K });
});
document.querySelectorAll('.chip[data-target]').forEach((chip) => {
chip.addEventListener('click', () => {
target = chip.dataset.target;
render();
syncAudio();
signal('interaction', { target });
});
});
DSP.playButton($('hb-play'), () => {
const ctx = DSP.audioCtx();
const o = ctx.createOscillator();
const g = ctx.createGain();
o.frequency.value = 110;
o.setPeriodicWave(wave(ctx));
g.gain.value = 0.14;
o.connect(g).connect(ctx.destination);
o.start();
osc = o;
signal('interaction', { play: true });
return () => {
osc = null;
g.gain.setTargetAtTime(0, ctx.currentTime, 0.02);
o.stop(ctx.currentTime + 0.12);
};
});
function applyParams(p) {
if (Number.isInteger(p.harmonics)) K = p.harmonics;
if (TARGETS.includes(p.target)) target = p.target;
render();
syncAudio();
}
render();
DSP.onResize(render);
DSP.connect({ render, params: applyParams });
})();