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="fft-butterfly"></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 fft-butterfly/ to a new name (one DNS label), set forkedFrom to { "name": "fft-butterfly", "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": "fft-butterfly",
"title": "FFT butterfly diagram",
"version": 1,
"claim": "An 8-point FFT is three stages of four butterflies, each one twiddle multiplication yielding both X[k] and X[k+N/2], for 12 multiplications instead of the direct DFT’s 64.",
"summary": "Reveal the N = 8 signal-flow diagram one stage at a time: even/odd-ordered inputs on the left, size-2, size-4 and size-8 DFTs built stage by stage, and outputs in natural order, with the multiplication count updating.",
"topics": [
"signals/fourier",
"computing/algorithms"
],
"aliases": [
"FFT",
"butterfly",
"Cooley–Tukey",
"radix-2",
"signal flow graph"
],
"params": {
"stages": {
"type": "integer",
"default": 3,
"min": 0,
"max": 3,
"label": "stages shown"
}
},
"check": [
{
"q": "For N = 1,024 samples, the direct DFT costs ≈ 1,000,000 operations. The FFT needs about…",
"options": [
"100",
"10,000",
"1,000,000 — the operation count is unchanged",
"500,000"
],
"answer": 1,
"why": "N·log₂N = 1,024 × 10 ≈ 10,240 operations, about one hundred times fewer than the direct count, and the gap widens as N grows; the output is identical."
},
{
"q": "An 8-point FFT computes E[k] and O[k] only for k = 0…3, yet fills all 8 outputs. What makes this possible?",
"options": [
"the missing outputs are interpolated from their neighbors",
"the upper four outputs of a real signal are always zero",
"outputs above k = 4 are simply discarded",
"the half-size DFTs repeat with period 4: E[k+4] = E[k]"
],
"answer": 3,
"why": "A half-size orbit completes in N/2 steps, so E and O are periodic with period N/2; one pair of half-size results serves outputs k and k + N/2, which is the source of the speedup."
}
],
"capabilities": [],
"height": 475,
"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>FFT butterfly diagram</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; }
.ctl .val { width: 96px; }</style>
</head>
<body>
<div class="widget">
<div class="control-row sym single">
<label for="bfly-stage">show stages</label>
<span class="ctl wide"><input type="range" id="bfly-stage" min="0" max="3" value="3" step="1"><span class="mono val" id="bfly-stage-label">all 3 stages</span></span>
</div>
<canvas id="bfly-canvas" class="plot duo"></canvas>
<div class="readout-row">
<div class="readout">
<span class="big mono" id="bfly-mults">12</span>
<small>multiplications shown · FFT total: 12</small>
</div>
<div class="readout">
<span class="big mono">64</span>
<small>multiplications · direct DFT at N = 8</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
/* FFT butterfly diagram: the complete N = 8 computation, revealed one stage at a time, with multiplications counted. */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const { T, setupCanvas, wash, signal } = DSP;
const ORDER = [0, 4, 2, 6, 1, 5, 3, 7];
const SUP = ['⁰', '¹', '²', '³'];
function render() {
const stages = +$('bfly-stage').value;
$('bfly-stage-label').textContent =
stages === 0 ? 'inputs only' : stages === 3 ? 'all 3 stages' : 'through stage ' + stages;
$('bfly-mults').textContent = stages * 4;
const { ctx, w, h } = setupCanvas($('bfly-canvas'));
const mL = 58, mR = 58, mT = 16, mB = 34;
const colX = (c) => mL + (c * (w - mL - mR)) / 3;
const rowY = (r) => mT + ((r + 0.5) * (h - mT - mB)) / 8;
ctx.clearRect(0, 0, w, h);
ctx.font = DSP.font(11);
for (let s = 1; s <= 3; s++) {
const visible = s <= stages;
const B = 1 << s;
const half = B >> 1;
ctx.globalAlpha = visible ? 1 : 0.12;
for (let b = 0; b < 8; b += B) {
for (let j = 0; j < half; j++) {
const top = b + j;
const bot = b + j + half;
const x0 = colX(s - 1);
const x1 = colX(s);
ctx.strokeStyle = wash(0.22);
ctx.lineWidth = 1.2;
ctx.beginPath();
ctx.moveTo(x0, rowY(top)); ctx.lineTo(x1, rowY(top));
ctx.moveTo(x0, rowY(bot)); ctx.lineTo(x1, rowY(bot));
ctx.stroke();
ctx.strokeStyle = T.ACCENT;
ctx.lineWidth = 1.4;
ctx.beginPath();
ctx.moveTo(x0, rowY(top)); ctx.lineTo(x1, rowY(bot));
ctx.moveTo(x0, rowY(bot)); ctx.lineTo(x1, rowY(top));
ctx.stroke();
if (visible) DSP.label(ctx, '×w' + SUP[j], x0 + 5, rowY(bot) - 5, T.ACCENT2);
}
}
ctx.globalAlpha = 1;
}
for (let c = 0; c <= 3; c++) {
for (let r = 0; r < 8; r++) {
ctx.fillStyle = c <= stages ? T.INK : wash(0.25);
ctx.beginPath();
ctx.arc(colX(c), rowY(r), 2.6, 0, Math.PI * 2);
ctx.fill();
}
}
for (let r = 0; r < 8; r++) DSP.label(ctx, 'x[' + ORDER[r] + ']', colX(0) - 8, rowY(r) + 4, T.ACCENT, 'right');
for (let r = 0; r < 8; r++) DSP.label(ctx, 'X[' + r + ']', colX(3) + 8, rowY(r) + 4, stages === 3 ? T.ACCENT : T.DIM);
const gap = (w - mL - mR) / 3;
for (let s = 1; s <= 3; s++) {
const cx = (colX(s - 1) + colX(s)) / 2;
const text = gap < 130 ? 'stage ' + s : 'stage ' + s + ' · size-' + (1 << s) + ' DFTs';
ctx.globalAlpha = s <= stages ? 1 : 0.3;
DSP.label(ctx, text, cx, h - 9, T.DIM, 'center');
ctx.globalAlpha = 1;
}
}
$('bfly-stage').addEventListener('input', () => { render(); signal('interaction', { stages: +$('bfly-stage').value }); });
function applyParams(p) {
if (Number.isInteger(p.stages)) $('bfly-stage').value = p.stages;
render();
}
render();
DSP.onResize(render);
DSP.connect({ render, params: applyParams });
})();