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="roots-of-unity"></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 roots-of-unity/ to a new name (one DNS label), set forkedFrom to { "name": "roots-of-unity", "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": "roots-of-unity",
"title": "Roots of unity",
"version": 1,
"claim": "Every DFT template value is one of the N points Wᴺʲ on the unit circle; frequency k steps through them k at a time, points half a turn apart are negatives, and squaring maps the 8-point lattice two-to-one onto the 4-point lattice.",
"summary": "Slide the frequency k to trace the orbit the template at k takes through the 8th roots of unity, and toggle squaring to watch each point map to its square, landing the 8 points on the 4 ringed points of the half-size lattice.",
"topics": [
"math/complex-numbers",
"signals/fourier",
"math/eulers-formula"
],
"aliases": [
"roots of unity",
"twiddle factor",
"unit circle",
"lattice",
"W_N"
],
"params": {
"k": {
"type": "integer",
"default": 1,
"min": 1,
"max": 7,
"label": "frequency k"
},
"square": {
"type": "boolean",
"default": false,
"label": "show the squaring map"
}
},
"check": [
{
"q": "Squaring every 8th root of unity produces…",
"options": [
"the same 8 points, reordered",
"the 4th roots of unity, two points onto each",
"16 new points",
"the single point 1"
],
"answer": 1,
"why": "Squaring doubles each angle, so the eight 45°-spaced points land on the four 90°-spaced points; stepping through samples two at a time squares the template step, which is why even-indexed samples form a half-size DFT."
},
{
"q": "For the N-th roots of unity, W^(j+N/2) equals…",
"options": [
"W^j — the lattice repeats with period N/2",
"the complex conjugate of W^j",
"(W^j)²",
"−W^j; advancing half the lattice is negation"
],
"answer": 3,
"why": "Half of N steps is half a turn, which points every value the opposite way; the lattice repeats with period N, not N/2, and this negation is what lets one butterfly produce two outputs."
},
{
"q": "In the FFT derivation, the even-indexed samples form a half-size DFT because…",
"options": [
"even sample values are rounded to half precision",
"stepping by two doubles the template angle, landing on the half-size lattice",
"the twiddle factor cancels them",
"the even samples carry half the signal’s energy"
],
"answer": 1,
"why": "Squaring a root of unity doubles its angle, mapping the N-point lattice onto the N/2-point lattice two-to-one; even-indexed samples advance by doubled steps, so they only ever use the smaller lattice."
}
],
"capabilities": [],
"height": 520,
"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>Roots of unity</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="ru-k">frequency k</label>
<span class="ctl wide"><input type="range" id="ru-k" min="1" max="7" value="1"><span class="mono val" id="ru-k-label">k = 1</span></span>
</div>
<div class="control-row">
<label class="toggle"><input type="checkbox" id="ru-square"> square every point: 8 collapse onto 4</label>
</div>
<canvas id="ru-canvas" class="plot phasor"></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
/* Roots of unity: the 8-point lattice, the orbit of frequency k, half-turn pairs, and the squaring collapse onto 4 points. */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const { T, setupCanvas, wash, signal } = DSP;
const SUP = ['⁰', '¹', '²', '³', '⁴', '⁵', '⁶', '⁷'];
function render() {
const k = +$('ru-k').value;
const square = $('ru-square').checked;
$('ru-k-label').textContent = 'k = ' + k;
const { ctx, w, h } = setupCanvas($('ru-canvas'));
const cx = w / 2;
const cy = h / 2 - 6;
const R = Math.min(h / 2 - 50, w / 2 - 90, 150);
const pt = (j) => {
const ang = (-2 * Math.PI * j) / 8;
return [cx + R * Math.cos(ang), cy - R * Math.sin(ang)];
};
ctx.clearRect(0, 0, w, h);
ctx.font = DSP.font(11);
ctx.strokeStyle = wash(0.14);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(cx, cy, R, 0, Math.PI * 2);
ctx.stroke();
for (let j = 0; j < 4; j++) {
const [x1, y1] = pt(j);
const [x2, y2] = pt(j + 4);
ctx.strokeStyle = T.GRID;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
if (!square) {
ctx.strokeStyle = T.ACCENT;
ctx.lineWidth = 1.8;
for (let n = 0; n < 8; n++) {
const a = pt((n * k) % 8);
const b = pt(((n + 1) * k) % 8);
const dx = b[0] - a[0];
const dy = b[1] - a[1];
const len = Math.hypot(dx, dy) || 1;
const ux = dx / len;
const uy = dy / len;
ctx.beginPath();
ctx.moveTo(a[0] + ux * 8, a[1] + uy * 8);
ctx.lineTo(b[0] - ux * 10, b[1] - uy * 10);
ctx.stroke();
const hx = b[0] - ux * 10;
const hy = b[1] - uy * 10;
ctx.beginPath();
ctx.moveTo(hx, hy);
ctx.lineTo(hx - ux * 6 - uy * 4, hy - uy * 6 + ux * 4);
ctx.lineTo(hx - ux * 6 + uy * 4, hy - uy * 6 - ux * 4);
ctx.closePath();
ctx.fillStyle = T.ACCENT;
ctx.fill();
}
const visited = new Set();
for (let n = 0; n < 8; n++) visited.add((n * k) % 8);
DSP.label(ctx, 'orbit of k = ' + k + ' · visits ' + visited.size + ' of 8 points · steps of ' + k, 14, 16);
} else {
for (let j = 0; j < 8; j++) {
const a = pt(j);
const b = pt((2 * j) % 8);
if (j === (2 * j) % 8) continue;
const mx = (a[0] + b[0]) / 2;
const my = (a[1] + b[1]) / 2;
const vx = mx - cx;
const vy = my - cy;
const vlen = Math.hypot(vx, vy) || 1;
const cpx = cx + (vx / vlen) * (R * 1.3);
const cpy = cy + (vy / vlen) * (R * 1.3);
ctx.strokeStyle = T.ACCENT2;
ctx.lineWidth = 1.5;
ctx.beginPath();
ctx.moveTo(a[0], a[1]);
ctx.quadraticCurveTo(cpx, cpy, b[0], b[1]);
ctx.stroke();
}
DSP.label(ctx, 'squaring: j → 2j mod 8 · even points receive two arrows each', 14, 16);
}
for (let j = 0; j < 8; j++) {
const [x, y] = pt(j);
const isHalf = j % 2 === 0;
if (square && isHalf) {
ctx.strokeStyle = T.ACCENT2;
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(x, y, 8, 0, Math.PI * 2);
ctx.stroke();
}
ctx.fillStyle = T.INK;
ctx.beginPath();
ctx.arc(x, y, 3.4, 0, Math.PI * 2);
ctx.fill();
const ang = (-2 * Math.PI * j) / 8;
ctx.textBaseline = 'middle';
DSP.label(ctx, 'W' + SUP[j], cx + (R + 22) * Math.cos(ang), cy - (R + 22) * Math.sin(ang), square && isHalf ? T.ACCENT2 : T.DIM, 'center');
ctx.textBaseline = 'alphabetic';
}
if (square) DSP.label(ctx, 'ringed points = the 4th roots of unity', 14, h - 12, T.ACCENT2);
else DSP.label(ctx, 'faint diameters join half-turn pairs: W^(j+4) = −W^j', 14, h - 12);
}
$('ru-k').addEventListener('input', () => { render(); signal('interaction', { k: +$('ru-k').value }); });
$('ru-square').addEventListener('input', () => { render(); signal('interaction', { square: $('ru-square').checked }); });
function applyParams(p) {
if (Number.isInteger(p.k)) $('ru-k').value = p.k;
if (typeof p.square === 'boolean') $('ru-square').checked = p.square;
render();
}
render();
DSP.onResize(render);
DSP.connect({ render, params: applyParams });
})();