use it elsewhere

Rotating point

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="rotating-point"></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 rotating-point/ to a new name (one DNS label), set forkedFrom to { "name": "rotating-point", "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": "rotating-point",
  "title": "Rotating point",
  "version": 1,
  "claim": "A point moving around a circle of radius A at f turns per second has height A·sin(2πft + φ) and horizontal position A·cos(2πft + φ), so a sinusoid is uniform circular motion seen edge-on.",
  "summary": "Set the rotation rate and radius; the vertical projection traces the sine to the right and the horizontal projection traces the cosine downward, a quarter cycle apart.",
  "topics": [
    "signals/sinusoids",
    "math/trigonometry"
  ],
  "aliases": [
    "phasor",
    "circular motion",
    "sine and cosine",
    "unit circle"
  ],
  "params": {
    "rate": {
      "type": "number",
      "default": 0.5,
      "min": 0.1,
      "max": 2,
      "label": "rotation rate (Hz)"
    },
    "radius": {
      "type": "number",
      "default": 0.85,
      "min": 0.3,
      "max": 1,
      "label": "radius (amplitude)"
    }
  },
  "check": [
    {
      "q": "A pure sinusoid is best described as…",
      "options": [
        "a triangle wave with rounded corners",
        "the sum of two copies of a waveform offset by half a cycle",
        "the vertical coordinate of a point in uniform circular motion",
        "any smooth periodic waveform"
      ],
      "answer": 2,
      "why": "Uniform circular motion projected onto one axis gives A·sin(2πft + φ): the radius sets the amplitude, the rotation rate the frequency, the starting angle the phase."
    },
    {
      "q": "In the rotating-point picture, a sinusoid’s amplitude, frequency, and phase correspond to the circle’s…",
      "options": [
        "diameter, period, and starting position",
        "radius, rotation rate, and starting angle",
        "radius, starting angle, and rotation rate",
        "circumference, rotation rate, and center point"
      ],
      "answer": 1,
      "why": "The radius sets the amplitude, the rotation rate sets the frequency, and the starting angle sets the phase."
    }
  ],
  "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>Rotating point</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="phasor-f">rotation rate</label>
      <span class="ctl wide"><input type="range" id="phasor-f" min="10" max="200" value="50"><span class="mono val" id="phasor-f-label">0.50 Hz</span></span>
    </div>
    <div class="control-row sym single">
      <label for="phasor-amp">radius</label>
      <span class="ctl wide"><input type="range" id="phasor-amp" min="30" max="100" value="85"><span class="mono val" id="phasor-amp-label">0.85</span></span>
    </div>
    <canvas id="phasor-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

/* Rotating point: a point on a circle whose vertical shadow traces the sine and horizontal shadow the cosine. */
(() => {
  'use strict';
  const $ = (id) => document.getElementById(id);
  const { T, clamp, setupCanvas, wash, signal } = DSP;

  let rate = 0.5;
  let radius = 0.85;
  let theta = 0;
  let sinTrail = [];
  let cosTrail = [];
  let dims = null;
  let last = performance.now();

  function labels() {
    $('phasor-f-label').textContent = rate.toFixed(2) + ' Hz';
    $('phasor-amp-label').textContent = radius.toFixed(2);
  }

  function frame(now) {
    const dt = Math.min(now - last, 50) / 1000;
    last = now;
    theta += 2 * Math.PI * rate * dt;
    const { ctx, w, h } = dims;

    const Rmax = clamp(Math.min(w, 560) * 0.16, 54, 84);
    const R = radius * Rmax;
    const cx = 14 + Rmax + 10;
    const cy = 18 + Rmax + 10;
    const sx0 = cx + Rmax + 36;
    const cy0 = cy + Rmax + 36;
    const sLen = Math.max(10, Math.floor(w - sx0 - 12));
    const cLen = Math.max(10, Math.floor(h - cy0 - 16));

    const tip = [cx + R * Math.cos(theta), cy - R * Math.sin(theta)];
    sinTrail.unshift(cy - tip[1]);
    if (sinTrail.length > sLen) sinTrail.length = sLen;
    cosTrail.unshift(tip[0] - cx);
    if (cosTrail.length > cLen) cosTrail.length = cLen;

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

    ctx.strokeStyle = T.GRID;
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(sx0, cy); ctx.lineTo(w - 12, cy);
    ctx.moveTo(cx, cy0); ctx.lineTo(cx, h - 16);
    ctx.stroke();

    ctx.strokeStyle = wash(0.16);
    ctx.beginPath();
    ctx.arc(cx, cy, R, 0, Math.PI * 2);
    ctx.stroke();
    ctx.strokeStyle = wash(0.85);
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(cx, cy); ctx.lineTo(tip[0], tip[1]);
    ctx.stroke();

    ctx.strokeStyle = wash(0.18);
    ctx.lineWidth = 1;
    ctx.setLineDash([3, 4]);
    ctx.beginPath();
    ctx.moveTo(tip[0], tip[1]); ctx.lineTo(sx0, cy - sinTrail[0]);
    ctx.moveTo(tip[0], tip[1]); ctx.lineTo(cx + cosTrail[0], cy0);
    ctx.stroke();
    ctx.setLineDash([]);

    ctx.strokeStyle = T.ACCENT;
    ctx.lineWidth = 2.2;
    ctx.beginPath();
    sinTrail.forEach((v, i) => (i === 0 ? ctx.moveTo(sx0 + i, cy - v) : ctx.lineTo(sx0 + i, cy - v)));
    ctx.stroke();

    ctx.strokeStyle = T.ACCENT2;
    ctx.beginPath();
    cosTrail.forEach((v, i) => (i === 0 ? ctx.moveTo(cx + v, cy0 + i) : ctx.lineTo(cx + v, cy0 + i)));
    ctx.stroke();

    ctx.fillStyle = T.INK;
    ctx.beginPath();
    ctx.arc(tip[0], tip[1], 4, 0, Math.PI * 2);
    ctx.fill();

    DSP.label(ctx, 'sine · vertical projection', sx0 + 2, 14, T.ACCENT);
    DSP.label(ctx, 'time →', w - 12, 14, T.DIM, 'right');
    DSP.label(ctx, 'cosine · horizontal projection', sx0 + 2, cy0 + 4, T.ACCENT2);
    DSP.label(ctx, 'time ↓', sx0 + 2, cy0 + 18, T.DIM);
    requestAnimationFrame(frame);
  }

  $('phasor-f').addEventListener('input', () => {
    rate = $('phasor-f').value / 100;
    labels();
    signal('interaction', { rate });
  });
  $('phasor-amp').addEventListener('input', () => {
    radius = $('phasor-amp').value / 100;
    labels();
    signal('interaction', { radius });
  });

  function layout() {
    dims = setupCanvas($('phasor-canvas'));
    sinTrail = [];
    cosTrail = [];
  }

  function applyParams(p) {
    if (typeof p.rate === 'number') { rate = p.rate; $('phasor-f').value = Math.round(rate * 100); }
    if (typeof p.radius === 'number') { radius = p.radius; $('phasor-amp').value = Math.round(radius * 100); }
    labels();
  }

  layout();
  labels();
  requestAnimationFrame(frame);
  DSP.onResize(layout);
  DSP.connect({ render: layout, params: applyParams });
})();