use it elsewhere

Spectrum by sweep

Put it on your own page with two lines, or fork it and make it yours. It is CC-BY-4.0.

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="spectrum-by-sweep"></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 spectrum-by-sweep/ to a new name (one DNS label), set forkedFrom to { "name": "spectrum-by-sweep", "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": "spectrum-by-sweep",
  "title": "Spectrum by sweep",
  "version": 1,
  "claim": "Correlating a mixture of whole-cycle sinusoids against a sine template at frequency k returns A/2 when k matches a component of amplitude A and exactly zero otherwise, so sweeping k recovers every amplitude.",
  "summary": "A fixed mixture of 0.80, 0.50 and 0.30 at 4, 11 and 17 cycles per window is correlated against one template frequency at a time. Sweep k by hand or run all 24; each bar is twice the correlation, and the bars reach the true amplitudes only at 4, 11 and 17.",
  "topics": [
    "signals/correlation",
    "signals/fourier"
  ],
  "aliases": [
    "orthogonality",
    "spectrum",
    "sweep",
    "sine template"
  ],
  "params": {
    "k": {
      "type": "integer",
      "default": 2,
      "min": 1,
      "max": 24,
      "label": "template frequency k"
    }
  },
  "check": [
    {
      "q": "Multiply two sinusoids of different (whole-cycle) frequencies and average over the window. The result is…",
      "options": [
        "the sum of the two frequencies",
        "about 0.5",
        "positive if the frequencies are close",
        "exactly zero"
      ],
      "answer": 3,
      "why": "The product is a pair of cosines at the difference and sum frequencies, and each averages to zero over whole cycles; this orthogonality is why each frequency can be measured independently."
    },
    {
      "q": "The average of sin(2πf₁t)·sin(2πf₂t) over a whole window, for different integer frequencies, is…",
      "options": [
        "exactly 0.5",
        "small but positive",
        "negative",
        "exactly zero"
      ],
      "answer": 3,
      "why": "Orthogonality: the product splits into two cosines that each average to zero over whole cycles, which keeps the DFT’s measurements from interfering."
    }
  ],
  "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>Spectrum by sweep</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="swp-k">template freq k</label>
      <span class="ctl wide"><input type="range" id="swp-k" min="1" max="24" value="2"><span class="mono val" id="swp-k-label">2 cyc</span></span>
    </div>
    <div class="control-row">
      <button class="btn primary" id="swp-run">run all k</button>
      <button class="btn" id="swp-clear">clear</button>
      <div class="readout inline">
        <span class="big mono" id="swp-val">0.000</span>
        <small>2 &times; correlation at this k</small>
      </div>
    </div>
    <canvas id="swp-canvas" class="plot duo"></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

/* Spectrum by sweep: correlate a fixed three-component mixture against one sine template frequency at a time. */
(() => {
  'use strict';
  const $ = (id) => document.getElementById(id);
  const { T, clamp, setupCanvas, hline, trace, vGradient, hotWash, zero, signal } = DSP;

  const COMPS = [[4, 0.8], [11, 0.5], [17, 0.3]];
  const MAXK = 24;
  let vals = new Array(MAXK + 1).fill(null);
  let running = false;

  function mixture(t) {
    let v = 0;
    for (const [f, a] of COMPS) v += a * Math.sin(2 * Math.PI * f * t);
    return v;
  }

  function corr(k) {
    const N = 700;
    let s = 0;
    for (let i = 0; i < N; i++) s += mixture(i / N) * Math.sin(2 * Math.PI * k * (i / N));
    return s / N;
  }

  function render() {
    const k = +$('swp-k').value;
    $('swp-k-label').textContent = k + ' cyc';
    const cur = vals[k] === null ? 2 * corr(k) : vals[k];
    $('swp-val').textContent = zero(cur).toFixed(3);

    const { ctx, w, h } = setupCanvas($('swp-canvas'));
    const x0 = 14;
    const pw = w - 28;
    const topMid = h * 0.24;
    const topAmp = h * 0.17;
    const specTop = h * 0.48;
    const specBot = h - 26;
    const specH = specBot - specTop;
    const slot = pw / MAXK;

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

    hline(ctx, x0, w - 14, topMid, T.GRID);
    trace(ctx, mixture, { x0, pw, mid: topMid, amp: topAmp, color: T.ACCENT, lw: 1.7 });
    DSP.label(ctx, 'the mixture · 0.80, 0.50, 0.30 at 4, 11, 17 cyc', x0 + 2, 12);

    hline(ctx, x0, w - 14, specBot, T.GRID);

    for (const [f, a] of COMPS) {
      const x = x0 + (f - 0.5) * slot;
      const y = specBot - a * specH;
      ctx.strokeStyle = hotWash(0.5);
      ctx.setLineDash([3, 3]);
      ctx.beginPath();
      ctx.moveTo(x - slot * 0.4, y);
      ctx.lineTo(x + slot * 0.4, y);
      ctx.stroke();
      ctx.setLineDash([]);
    }

    for (let j = 1; j <= MAXK; j++) {
      const bx = x0 + (j - 0.5) * slot;
      if (vals[j] !== null) {
        const bh = clamp(vals[j], 0, 1) * specH;
        ctx.fillStyle = vGradient(ctx, specBot - bh, specBot);
        ctx.fillRect(bx - slot * 0.32, specBot - Math.max(bh, 1.5), slot * 0.64, Math.max(bh, 1.5));
      }
      if (j === k) {
        ctx.strokeStyle = T.INK;
        ctx.lineWidth = 1;
        ctx.strokeRect(bx - slot * 0.38, specTop - 4, slot * 0.76, specBot - specTop + 4);
      }
      if (j % 4 === 0 || j === 1) DSP.label(ctx, j, bx, specBot + 13, T.DIM, 'center');
    }
    DSP.label(ctx, '2 × correlation per visited k · dashes = true amplitudes', x0 + 2, specTop - 8);
  }

  function visit(k) {
    vals[k] = 2 * corr(k);
    render();
  }

  $('swp-k').addEventListener('input', () => {
    visit(+$('swp-k').value);
    signal('interaction', { k: +$('swp-k').value });
  });

  $('swp-run').addEventListener('click', () => {
    if (running) return;
    running = true;
    $('swp-run').disabled = true;
    signal('interaction', { run: 'all' });
    let k = 1;
    const step = () => {
      if (k > MAXK) {
        running = false;
        $('swp-run').disabled = false;
        signal('complete');
        return;
      }
      $('swp-k').value = k;
      visit(k);
      k++;
      setTimeout(step, 70);
    };
    step();
  });

  $('swp-clear').addEventListener('click', () => {
    vals = new Array(MAXK + 1).fill(null);
    visit(+$('swp-k').value);
  });

  function applyParams(p) {
    if (Number.isInteger(p.k)) { $('swp-k').value = p.k; visit(p.k); }
    else render();
  }

  visit(+$('swp-k').value);
  DSP.onResize(render);
  DSP.connect({ render, params: applyParams });
})();