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="nyquist-fold"></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 nyquist-fold/ to a new name (one DNS label), set forkedFrom to { "name": "nyquist-fold", "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": "nyquist-fold",
"title": "Nyquist fold",
"version": 1,
"claim": "A sinusoid sampled at fₛ keeps its pitch only below the Nyquist frequency fₛ/2; above it the samples are identical to those of a lower sinusoid at |f − fₛ·round(f/fₛ)|, and that alias is what plays back.",
"summary": "Start the real tone or its digitized version and sweep the frequency slider past half the sample rate (4 kHz by default, so Nyquist is 2 kHz): the input keeps rising while the played-back pitch folds and descends. The plot shows the samples, the input wave and the dashed alias that passes through the same points; the digitized tone is synthesized at the folded frequency.",
"topics": ["signals/sampling", "audio/digital"],
"aliases": ["aliasing", "Nyquist frequency", "sampling theorem", "fold", "anti-aliasing filter", "wagon wheel"],
"params": {
"rate": { "type": "integer", "default": 4000, "min": 2000, "max": 6000, "label": "sample rate in samples per second" },
"freq": { "type": "integer", "default": 1200, "min": 200, "max": 5800, "label": "tone frequency in Hz" }
},
"check": [
{
"q": "Which of these sample rates can faithfully capture a 6 kHz tone?",
"options": ["14,000 samples per second", "12,000 samples per second", "6,000 samples per second", "3,000 samples per second"],
"answer": 0,
"why": "The Nyquist criterion requires a rate that exceeds twice the frequency, here more than 2 × 6,000 = 12,000 samples per second; 14,000 satisfies it, exactly 12,000 does not, and the tone folds into an alias."
},
{
"q": "A 3 kHz tone is sampled at 4,000 samples/s. What frequency plays back?",
"options": ["1 kHz", "3 kHz", "7 kHz", "silence"],
"answer": 0,
"why": "The tone folds around the Nyquist limit of 2 kHz: |3,000 − 4,000| = 1,000 Hz plays back."
},
{
"q": "Aliasing is…",
"options": [
"a frequency above the Nyquist limit that appears as a slower one after sampling",
"two channels bleeding into each other",
"the hiss added by quantization",
"distortion caused by exceeding full scale"
],
"answer": 0,
"why": "Above Nyquist the samples of a fast sinusoid are identical to those of a slower one, and once sampled the two are indistinguishable."
},
{
"q": "The anti-aliasing filter belongs…",
"options": ["before the ADC, on the analog side", "after the ADC, in software", "inside the DAC", "nowhere, because aliasing can be undone later"],
"answer": 0,
"why": "It must remove above-Nyquist content before sampling; afterwards an alias is indistinguishable from a genuine slow wave, so nothing can undo it."
},
{
"q": "Why do CDs use 44.1 kHz rather than a lower rate such as 25 kHz?",
"options": [
"it covers 20 kHz hearing with margin for the anti-aliasing filter to roll off",
"it was the maximum rate early converter chips supported",
"it minimizes quantization noise",
"it matches the frequency of mains electricity"
],
"answer": 0,
"why": "Hearing extends to about 20 kHz and real filters need room to roll off; a 25 kHz rate would put Nyquist at 12.5 kHz, inside the audible range, so audible content above it would alias."
}
],
"capabilities": [],
"height": 470,
"requires": ["samples-per-cycle"],
"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>Nyquist fold</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;
--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;
}
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: transparent; color: var(--text); font-family: var(--serif); }
.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.sym.single {
display: grid; grid-template-columns: 88px 1fr; gap: 12px 16px;
align-items: center; margin-bottom: 14px;
}
.control-row label { font-size: 14px; color: var(--text-dim); white-space: nowrap; }
.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: 72px; text-align: right; font-size: 13px; }
input[type="range"] { accent-color: var(--accent); }
@media (max-width: 600px) { .control-row.sym.single { grid-template-columns: 64px 1fr; } }
.toggle { display: inline-flex; align-items: baseline; gap: 7px; font-size: 13.5px; color: var(--text-dim); cursor: pointer; white-space: normal; }
.toggle input { accent-color: var(--accent2); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--text-dim); font-size: 12.5px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.btn, .chip {
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;
}
.btn:hover, .chip: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; }
.plot { display: block; width: 100%; height: 220px; margin-top: 8px; }
.plot.tall { height: 280px; }
.readout-row { display: flex; gap: 28px; flex-wrap: wrap; margin: 14px 0 0; }
.readout { text-align: left; }
.readout .big {
display: block; font-size: 28px; font-weight: 600; color: var(--accent);
line-height: 1.1; min-width: 5ch; font-variant-numeric: tabular-nums;
}
.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) {
.widget { padding: 16px; }
.readout-row { gap: 12px 18px; }
.readout .big { font-size: 22px; }
.plot { height: 180px; }
.plot.tall { height: 220px; }
.plot.pipe { height: 200px; }
.narrow-hide { display: none; }
}
.control-row .dim { font-family: var(--mono); }
</style>
</head>
<body>
<div class="widget" id="root">
<div class="control-row sym single">
<label for="ny-f">tone freq</label>
<span class="ctl wide"><input type="range" id="ny-f" min="200" max="3800" value="1200"><span class="mono val" id="ny-f-label">1200 Hz</span></span>
</div>
<div class="control-row">
<button class="btn primary" id="ny-play-true">▶ the real tone</button>
<button class="btn primary" id="ny-play-digi">▶ after digitizing at 4 kHz</button>
<span class="dim narrow-hide" id="ny-limit">Nyquist limit: 2,000 Hz</span>
</div>
<canvas id="ny-canvas" class="plot tall"></canvas>
<div class="readout-row">
<div class="readout">
<span class="big mono" id="ny-true">1200</span>
<small>what went in · Hz</small>
</div>
<div class="readout">
<span class="big mono" id="ny-alias">1200</span>
<small id="ny-alias-note">what plays back · Hz</small>
</div>
</div>
</div>
<script src="/w/_sdk/host.js?v=1"></script>
<script src="/w/_lib/audio.js?v=1"></script>
<script src="widget.js?v=1"></script>
</body>
</html>
widget.js
/* Nyquist fold: a tone swept past half the sample rate folds to a lower alias, drawn and played live. */
(() => {
'use strict';
const K = window.AudioKit;
const $ = (id) => document.getElementById(id);
const SHOWN_SAMPLES = 8;
let rate = 4000, freq = 1200, host = null;
let voiceTrue = null, voiceDigi = null;
const aliasSigned = () => freq - rate * Math.round(freq / rate);
const aliasHz = () => Math.round(Math.abs(aliasSigned()));
const fmtRate = () => (rate % 1000 === 0 ? rate / 1000 + ' kHz' : K.fmtInt(rate) + ' /s');
function render() {
const g = aliasSigned();
const alias = aliasHz();
const folded = alias !== freq;
$('ny-f-label').textContent = freq + ' Hz';
$('ny-true').textContent = freq;
const al = $('ny-alias');
al.textContent = alias;
al.classList.toggle('hot', folded);
$('ny-alias-note').textContent = folded ? 'what plays back · Hz · folded' : 'what plays back · Hz';
$('ny-limit').textContent = 'Nyquist limit: ' + K.fmtInt(rate / 2) + ' Hz';
const digi = $('ny-play-digi');
digi.dataset.idle = '▶ after digitizing at ' + fmtRate();
if (!K.playing(digi)) digi.textContent = digi.dataset.idle;
const win = SHOWN_SAMPLES / rate;
const { ctx, w, h } = K.setupCanvas($('ny-canvas'));
const m = { l: 14, r: 14 };
const pw = w - m.l - m.r;
const mid = h / 2;
const amp = h * 0.36;
ctx.clearRect(0, 0, w, h);
K.hline(ctx, m.l, w - m.r, mid, K.T.GRID);
const wave = (f) => (u) => mid - amp * Math.sin(2 * Math.PI * f * u * win);
K.trace(ctx, m.l, w - m.r, wave(freq), K.T.ACCENT, 2.1);
if (folded) K.trace(ctx, m.l, w - m.r, wave(g), K.T.HOT, 2.1, 1, [6, 5]);
for (let k = 0; k <= SHOWN_SAMPLES; k++) {
const t = k / rate;
const x = m.l + (t / win) * pw;
K.lollipop(ctx, x, mid, mid - amp * Math.sin(2 * Math.PI * freq * t), 3.6);
}
ctx.font = '11px ui-monospace, Menlo, monospace';
ctx.fillStyle = K.T.DIM;
ctx.textAlign = 'left';
ctx.fillText((win * 1000).toFixed(1) + ' ms window · dots = the ' + K.fmtInt(rate) + '/s samples', m.l + 2, 13);
if (folded) {
ctx.fillStyle = K.T.HOT;
ctx.textAlign = 'right';
ctx.fillText('the alias below Nyquist · ' + alias + ' Hz', w - m.r - 2, 13);
}
}
const ping = (data) => { if (host && host.signal) host.signal('interaction', data); };
function setRate(r) {
rate = K.clamp(Math.round(r), 2000, 6000);
const slider = $('ny-f');
slider.max = rate - 200;
setFreq(freq);
}
function setFreq(f) {
freq = K.clamp(Math.round(f), 200, rate - 200);
$('ny-f').value = freq;
render();
if (voiceTrue) voiceTrue.retune(freq);
if (voiceDigi) voiceDigi.retune(aliasHz());
}
$('ny-f').addEventListener('input', () => { setFreq(+$('ny-f').value); ping({ freq, alias: aliasHz() }); });
K.bindPlay($('ny-play-true'), (ctx) => {
voiceTrue = K.tone(ctx, freq, 0.13);
return () => { const v = voiceTrue; voiceTrue = null; v.stop(); };
}, () => ping({ play: 'true', freq }));
K.bindPlay($('ny-play-digi'), (ctx) => {
voiceDigi = K.tone(ctx, aliasHz(), 0.13);
return () => { const v = voiceDigi; voiceDigi = null; v.stop(); };
}, () => ping({ play: 'digitized', freq, alias: aliasHz() }));
K.stopWhenHidden($('root'));
K.debounceResize(render);
render();
LearnWidget.connect().then((h) => {
host = h;
K.fitFrame(h, $('root'));
const apply = (p) => {
if (typeof p.rate === 'number') setRate(p.rate);
if (typeof p.freq === 'number') setFreq(p.freq);
};
apply(h.params || {});
h.on('theme.changed', () => { K.readTheme(); render(); });
h.on('params.changed', apply);
K.readTheme();
render();
});
})();