DFT spectrum

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.

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 dft-spectrum/ to a new name (one DNS label), set forkedFrom to { "name": "dft-spectrum", "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": "dft-spectrum",
  "title": "DFT spectrum",
  "version": 1,
  "claim": "The DFT of a 128-sample sum of sinusoids has spikes of height 2|X[k]|/N = A at exactly the component frequencies k, noise spreads evenly across bins, and bins above N/2 mirror those below.",
  "summary": "Set three frequencies and amplitudes plus a noise level; the bottom band shows 2|X[k]|/N with the three tallest bins read out. Hover a bar to read its bin, and toggle the mirrored upper half to see bins 65–127 repeat bins 63–1.",
  "topics": [
    "signals/fourier"
  ],
  "aliases": [
    "DFT",
    "discrete Fourier transform",
    "spectrum",
    "bins",
    "negative frequencies",
    "noise floor"
  ],
  "params": {
    "f1": {
      "type": "integer",
      "default": 5,
      "min": 1,
      "max": 40,
      "label": "wave 1 frequency (cycles per window)"
    },
    "a1": {
      "type": "number",
      "default": 0.8,
      "min": 0,
      "max": 1,
      "label": "wave 1 amplitude"
    },
    "f2": {
      "type": "integer",
      "default": 13,
      "min": 1,
      "max": 40,
      "label": "wave 2 frequency (cycles per window)"
    },
    "a2": {
      "type": "number",
      "default": 0.5,
      "min": 0,
      "max": 1,
      "label": "wave 2 amplitude"
    },
    "f3": {
      "type": "integer",
      "default": 27,
      "min": 1,
      "max": 40,
      "label": "wave 3 frequency (cycles per window)"
    },
    "a3": {
      "type": "number",
      "default": 0.3,
      "min": 0,
      "max": 1,
      "label": "wave 3 amplitude"
    },
    "noise": {
      "type": "number",
      "default": 0,
      "min": 0,
      "max": 0.5,
      "label": "noise amplitude"
    },
    "mirror": {
      "type": "boolean",
      "default": false,
      "label": "show all 128 bins"
    }
  },
  "check": [
    {
      "q": "A tall bar at bin 13 of a DFT spectrum means…",
      "options": [
        "the signal is 13 samples long",
        "sample number 13 is the loudest",
        "the signal contains a strong 13-cycles-per-window component",
        "the signal contains exactly 13 frequency components"
      ],
      "answer": 2,
      "why": "Each bin is the correlation of the signal with a complex-exponential template at that frequency: the bin index gives the frequency, and the bar height gives the amount."
    },
    {
      "q": "The DFT of N samples produces…",
      "options": [
        "a single scalar summarizing the signal’s bandwidth",
        "a compressed copy of the signal",
        "N frequency bins: how much of each frequency the signal contains",
        "N² coefficients"
      ],
      "answer": 2,
      "why": "The DFT performs one correlation per template frequency, N in total; for a real signal the distinct results lie in bins 0 to N/2."
    },
    {
      "q": "Using a longer analysis window for the DFT gives you…",
      "options": [
        "no change — resolution depends only on the sample rate",
        "finer resolution in both frequency and time",
        "sharper timing, but blurrier frequencies",
        "finer frequency resolution, but blurrier timing"
      ],
      "answer": 3,
      "why": "Bins are spaced one cycle-per-window apart, so a longer window separates closer tones, but the spectrum then describes a longer span of time."
    }
  ],
  "capabilities": [],
  "height": 616,
  "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>DFT spectrum</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; }

  .plot.duo { cursor: crosshair; }
  .readout .big.mono.wide { min-width: 12ch; }</style>
</head>
<body>
  <div class="widget">

    <div class="control-row sym">
      <label for="dft-f1">wave 1</label>
      <span class="ctl"><input type="range" id="dft-f1" min="1" max="40" value="5"><span class="mono val" id="dft-f1-label">5 Hz</span></span>
      <span class="ctl"><input type="range" id="dft-a1" min="0" max="100" value="80"><span class="mono val" id="dft-a1-label">0.80</span></span>
    </div>
    <div class="control-row sym">
      <label for="dft-f2">wave 2</label>
      <span class="ctl"><input type="range" id="dft-f2" min="1" max="40" value="13"><span class="mono val" id="dft-f2-label">13 Hz</span></span>
      <span class="ctl"><input type="range" id="dft-a2" min="0" max="100" value="50"><span class="mono val" id="dft-a2-label">0.50</span></span>
    </div>
    <div class="control-row sym">
      <label for="dft-f3">wave 3</label>
      <span class="ctl"><input type="range" id="dft-f3" min="1" max="40" value="27"><span class="mono val" id="dft-f3-label">27 Hz</span></span>
      <span class="ctl"><input type="range" id="dft-a3" min="0" max="100" value="30"><span class="mono val" id="dft-a3-label">0.30</span></span>
    </div>
    <div class="control-row sym single">
      <label for="dft-noise">noise</label>
      <span class="ctl wide"><input type="range" id="dft-noise" min="0" max="50" value="0"><span class="mono val" id="dft-noise-label">0.00</span></span>
    </div>
    <div class="control-row">
      <label class="toggle"><input type="checkbox" id="dft-mirror"> show all 128 bins (the mirrored half)</label>
      <span class="mono dim" id="dft-hover">hover a bar to read its bin</span>
    </div>
    <canvas id="dft-canvas" class="plot duo"></canvas>
    <div class="readout-row">
      <div class="readout">
        <span class="big mono" id="dft-peaks">5 &middot; 13 &middot; 27</span>
        <small>three tallest bins &middot; k</small>
      </div>
      <div class="readout accent">
        <span class="big mono" id="dft-peak-amps">0.80 &middot; 0.50 &middot; 0.30</span>
        <small>their heights &middot; 2|X[k]|/N</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

/* DFT spectrum: three sinusoids plus noise in, 2|X[k]|/N out, with the mirrored upper bins on a toggle and a hover readout per bin. */
(() => {
  'use strict';
  const $ = (id) => document.getElementById(id);
  const { T, setupCanvas, hline, vGradient, accentWash, wash, naiveDFT, signal } = DSP;

  const N = 128;
  const noiseArr = Array.from({ length: N }, () => Math.random() * 2 - 1);
  let hoverK = -1;
  let geom = null;

  function readControls() {
    return {
      fs: [+$('dft-f1').value, +$('dft-f2').value, +$('dft-f3').value],
      as: [$('dft-a1').value / 100, $('dft-a2').value / 100, $('dft-a3').value / 100],
      noise: $('dft-noise').value / 100,
      mirror: $('dft-mirror').checked,
    };
  }

  function render() {
    const { fs, as, noise, mirror } = readControls();
    for (let i = 0; i < 3; i++) {
      $('dft-f' + (i + 1) + '-label').textContent = fs[i] + ' Hz';
      $('dft-a' + (i + 1) + '-label').textContent = as[i].toFixed(2);
    }
    $('dft-noise-label').textContent = noise.toFixed(2);

    const x = new Float64Array(N);
    for (let n = 0; n < N; n++) {
      let v = 0;
      for (let i = 0; i < 3; i++) v += as[i] * Math.sin((2 * Math.PI * fs[i] * n) / N);
      x[n] = v + noise * noiseArr[n];
    }

    const { re, im } = naiveDFT(x);
    const kMax = mirror ? N - 1 : N / 2;
    const mags = [];
    for (let k = 0; k <= kMax; k++) mags.push((2 / N) * Math.hypot(re[k], im[k]));

    const ranked = mags.slice(1, N / 2).map((m, i) => [i + 1, m]).sort((a, b) => b[1] - a[1]).slice(0, 3).sort((a, b) => a[0] - b[0]);
    $('dft-peaks').textContent = ranked.map((r) => r[0]).join(' · ');
    $('dft-peak-amps').textContent = ranked.map((r) => r[1].toFixed(2)).join(' · ');

    const { ctx, w, h } = setupCanvas($('dft-canvas'));
    const x0 = 14;
    const pw = w - 28;
    const topMid = h * 0.24;
    const maxAbs = Math.max(1.05, ...x.map(Math.abs));
    const topAmp = (h * 0.19) / (maxAbs / 1.05);
    const specTop = h * 0.5;
    const specBot = h - 26;
    const specH = specBot - specTop;
    const slot = pw / (kMax + 1);
    geom = { x0, slot, kMax, specTop, specBot, mags };

    ctx.clearRect(0, 0, w, h);
    ctx.font = DSP.font(10);

    hline(ctx, x0, w - 14, topMid, T.GRID);
    ctx.strokeStyle = T.ACCENT;
    ctx.lineWidth = 1.7;
    ctx.beginPath();
    for (let px = 0; px <= pw; px++) {
      const n = Math.min(N - 1, Math.floor((px / pw) * N));
      const y = topMid - topAmp * x[n];
      if (px === 0) ctx.moveTo(x0 + px, y);
      else ctx.lineTo(x0 + px, y);
    }
    ctx.stroke();
    DSP.label(ctx, 'the signal · 128 samples', x0 + 2, 12);

    const maxMag = Math.max(1, ...mags);
    hline(ctx, x0, w - 14, specBot, T.GRID);
    const tick = mirror ? 16 : 8;
    for (let k = 0; k < mags.length; k++) {
      const bh = (mags[k] / maxMag) * specH;
      const bx = x0 + k * slot;
      const upper = k > N / 2;
      ctx.fillStyle = upper ? accentWash(0.3) : vGradient(ctx, specBot - bh, specBot);
      ctx.fillRect(bx + slot * 0.15, specBot - Math.max(bh, 1), slot * 0.7, Math.max(bh, 1));
      if (k % tick === 0) DSP.label(ctx, k, bx + slot / 2, specBot + 13, T.DIM, 'center');
    }
    if (mirror) {
      const mx = x0 + (N / 2 + 0.5) * slot;
      ctx.strokeStyle = wash(0.25);
      ctx.setLineDash([3, 4]);
      ctx.beginPath();
      ctx.moveTo(mx, specTop - 4);
      ctx.lineTo(mx, specBot);
      ctx.stroke();
      ctx.setLineDash([]);
      DSP.label(ctx, 'N/2', mx, specTop - 8, T.DIM, 'center');
    }
    if (hoverK >= 0 && hoverK < mags.length) {
      const bx = x0 + hoverK * slot;
      ctx.strokeStyle = T.INK;
      ctx.lineWidth = 1;
      ctx.strokeRect(bx + slot * 0.05, specTop - 4, slot * 0.9, specBot - specTop + 4);
      const mirrorOf = hoverK === 0 ? '' : ' · mirror of bin ' + (N - hoverK);
      $('dft-hover').textContent = 'bin ' + hoverK + ' · 2|X[k]|/N = ' + mags[hoverK].toFixed(3) + (hoverK > N / 2 ? mirrorOf : '');
    } else {
      $('dft-hover').textContent = 'hover a bar to read its bin';
    }
    DSP.label(ctx, 'the spectrum · 2|X[k]|/N' + (mirror ? ' · dim bars mirror k ↔ N−k' : ''), x0 + 2, specTop - 8);
  }

  const canvas = $('dft-canvas');
  canvas.addEventListener('pointermove', (e) => {
    if (!geom) return;
    const r = canvas.getBoundingClientRect();
    const px = e.clientX - r.left;
    const py = e.clientY - r.top;
    const k = Math.floor((px - geom.x0) / geom.slot);
    const next = py >= geom.specTop - 8 && py <= geom.specBot && k >= 0 && k <= geom.kMax ? k : -1;
    if (next !== hoverK) { hoverK = next; render(); }
  });
  canvas.addEventListener('pointerleave', () => { if (hoverK !== -1) { hoverK = -1; render(); } });

  ['dft-f1', 'dft-f2', 'dft-f3', 'dft-a1', 'dft-a2', 'dft-a3', 'dft-noise', 'dft-mirror'].forEach((id) =>
    $(id).addEventListener('input', () => {
      render();
      signal('interaction', { control: id });
    })
  );

  function applyParams(p) {
    for (let i = 1; i <= 3; i++) {
      if (Number.isInteger(p['f' + i])) $('dft-f' + i).value = p['f' + i];
      if (typeof p['a' + i] === 'number') $('dft-a' + i).value = Math.round(p['a' + i] * 100);
    }
    if (typeof p.noise === 'number') $('dft-noise').value = Math.round(p.noise * 100);
    if (typeof p.mirror === 'boolean') $('dft-mirror').checked = p.mirror;
    render();
  }

  render();
  DSP.onResize(render);
  DSP.connect({ render, params: applyParams });
})();