Time to angle

Embed

The script finds its own origin, so nothing else is needed; the widget runs in a sandboxed frame and cannot touch your page.

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 time-angle/ to a new name (one DNS label), set forkedFrom to { "name": "time-angle", "version": 3 }, 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": "time-angle",
  "title": "Time to angle",
  "version": 3,
  "claim": "The angle θ = 2πf·t advances one full turn every 1/f seconds, so f·t counts rotations and sin θ is the height of the rotating point.",
  "summary": "Sliders for frequency f and time t drive a point around a circle; readouts show rotations f·t, θ in radians and sin θ, and a checkbox runs time forward.",
  "topics": [
    "signals/sinusoids",
    "math/parameterization"
  ],
  "aliases": [
    "phase",
    "angular frequency",
    "rotating phasor",
    "2 pi f t"
  ],
  "check": [
    {
      "q": "With f = 2 /s and t = 0.75 s, the point has completed",
      "options": [
        "0.75 rotations",
        "1.5 rotations",
        "2 rotations",
        "3 rotations"
      ],
      "answer": 1,
      "why": "f·t = 2 × 0.75 = 1.5 rotations, so θ = 3π."
    },
    {
      "q": "Doubling f while keeping t fixed",
      "options": [
        "halves θ",
        "doubles θ",
        "leaves θ unchanged",
        "doubles sin θ"
      ],
      "answer": 1,
      "why": "θ = 2πft is proportional to f."
    },
    {
      "q": "Replacing θ with 2πft in sin θ is justified because…",
      "options": [
        "2πft produces an angle in radians for every t, a valid input to the unchanged sine",
        "the sine function is redefined to accept times",
        "the factor 2π makes the sine periodic",
        "frequencies and angles are the same kind of quantity"
      ],
      "answer": 0,
      "why": "This is composition: the function is untouched, and the slot receives a value of the kind it expects. f·t counts rotations, and 2π converts rotations to radians."
    }
  ],
  "height": 540,
  "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>Time to angle</title>
<style>
  :root {
    color-scheme: light dark;
    --bg-card: #efe9da; --border: #d8cfba; --text: #211d14; --text-dim: #6e6553;
    --accent: #31597f; --accent2: #b04e1b; --hot: #a82433; --ok: #3d6b4f;
    --ink-rgb: 33, 29, 20; --accent-rgb: 49, 89, 127; --accent2-rgb: 176, 78, 27;
    --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-card: #1e1b15; --border: #383225; --text: #e9e3d3; --text-dim: #9c917c;
      --accent: #8fb8e0; --accent2: #dd9355; --hot: #df7a88; --ok: #82bd97;
      --ink-rgb: 233, 227, 211; --accent-rgb: 143, 184, 224; --accent2-rgb: 221, 147, 85;
    }
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; }
  body { background: transparent; color: var(--text); font-family: var(--serif); }
  .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.sym.single { display: grid; grid-template-columns: 88px 1fr; gap: 12px 16px; align-items: center; }
  .control-row label { font-size: 14.5px; color: var(--text-dim); white-space: nowrap; }
  .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; }
  input[type="range"] { accent-color: var(--accent); }
  .toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: normal; }
  .toggle input { accent-color: var(--accent); }
  @media (max-width: 600px) { .control-row.sym.single { grid-template-columns: 64px 1fr; } }
  .mono { font-family: var(--mono); }
  .plot { display: block; width: 100%; height: 220px; margin-top: 8px; }
  .plot.plane { height: 290px; }
  .readout-row { display: flex; gap: 28px; flex-wrap: wrap; margin: 14px 0 0; }
  .readout { text-align: left; }
  .readout .big { display: block; font-size: 28px; font-weight: 600; color: var(--accent); line-height: 1.1; min-width: 5ch; }
  .readout.accent .big { color: var(--accent2); }
  .readout small { color: var(--text-dim); font-size: 12.5px; }
</style>
</head>
<body>
  <div class="widget">
    <div class="control-row sym single">
      <label for="pm-f">frequency f</label>
      <span class="ctl wide"><input type="range" id="pm-f" min="25" max="300" value="100"><span class="mono val" id="pm-f-label">1.00 /s</span></span>
    </div>
    <div class="control-row sym single">
      <label for="pm-t">time t</label>
      <span class="ctl wide"><input type="range" id="pm-t" min="0" max="200" value="60"><span class="mono val" id="pm-t-label">0.60 s</span></span>
    </div>
    <div class="control-row">
      <label class="toggle"><input type="checkbox" id="pm-run"> run time forward continuously</label>
    </div>
    <canvas id="pm-canvas" class="plot plane"></canvas>
    <div class="readout-row">
      <div class="readout">
        <span class="big mono" id="pm-rot">0.60</span>
        <small>rotations completed · f · t</small>
      </div>
      <div class="readout">
        <span class="big mono" id="pm-theta">3.77</span>
        <small>θ = 2πf t · radians</small>
      </div>
      <div class="readout accent">
        <span class="big mono" id="pm-sin">−0.59</span>
        <small>sin θ · the slot's output</small>
      </div>
    </div>
  </div>
  <script src="/w/_sdk/host.js?v=1"></script>
  <script src="widget.js?v=1"></script>
</body>
</html>

widget.js

/* Time to angle: time t feeds the angle θ = 2πft, which feeds the circle. */
(() => {
  'use strict';

  const $ = (id) => document.getElementById(id);
  const rootStyle = getComputedStyle(document.documentElement);
  const tv = (n) => rootStyle.getPropertyValue(n).trim();
  const wash = (a) => 'rgba(' + tv('--ink-rgb') + ',' + a + ')';
  const accentWash = (a) => 'rgba(' + tv('--accent-rgb') + ',' + a + ')';
  const accent2Wash = (a) => 'rgba(' + tv('--accent2-rgb') + ',' + a + ')';
  let ACCENT, ACCENT2, DIM, INK, GRID;
  function readTheme() {
    ACCENT = tv('--accent'); ACCENT2 = tv('--accent2');
    DIM = tv('--text-dim'); INK = tv('--text'); GRID = wash(0.07);
  }

  function setupCanvas(canvas) {
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const w = canvas.clientWidth, h = canvas.clientHeight;
    canvas.width = Math.max(1, w * dpr);
    canvas.height = Math.max(1, h * dpr);
    const ctx = canvas.getContext('2d');
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    return { ctx, w, h };
  }

  function drawArrow(ctx, x0, y0, x1, y1, color, lw) {
    ctx.strokeStyle = color; ctx.lineWidth = lw;
    ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke();
    const ang = Math.atan2(y1 - y0, x1 - x0);
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x1 - 9 * Math.cos(ang - 0.4), y1 - 9 * Math.sin(ang - 0.4));
    ctx.lineTo(x1 - 9 * Math.cos(ang + 0.4), y1 - 9 * Math.sin(ang + 0.4));
    ctx.closePath(); ctx.fill();
  }

  let pmF = 1.0, pmT = 0.6, pmLast = performance.now();

  function renderPm() {
    $('pm-f-label').textContent = pmF.toFixed(2) + ' /s';
    $('pm-t-label').textContent = pmT.toFixed(2) + ' s';
    const rot = pmF * pmT;
    const theta = 2 * Math.PI * rot;
    $('pm-rot').textContent = rot.toFixed(2);
    $('pm-theta').textContent = theta.toFixed(2);
    $('pm-sin').textContent = Math.sin(theta).toFixed(2);

    const { ctx, w, h } = setupCanvas($('pm-canvas'));
    ctx.clearRect(0, 0, w, h);
    ctx.font = '10px ui-monospace, Menlo, monospace';

    const bx0 = 22, bx1 = Math.max(bx0 + 60, w * 0.34), by = h / 2;
    ctx.strokeStyle = wash(0.25); ctx.lineWidth = 1.4;
    ctx.beginPath(); ctx.moveTo(bx0, by); ctx.lineTo(bx1, by); ctx.stroke();
    ctx.fillStyle = DIM; ctx.textAlign = 'center';
    for (let s = 0; s <= 2; s++) {
      const x = bx0 + ((bx1 - bx0) * s) / 2;
      ctx.strokeStyle = wash(0.25);
      ctx.beginPath(); ctx.moveTo(x, by - 5); ctx.lineTo(x, by + 5); ctx.stroke();
      ctx.fillText(s + ' s', x, by + 20);
    }
    const tx = bx0 + ((bx1 - bx0) * pmT) / 2;
    ctx.fillStyle = ACCENT;
    ctx.beginPath(); ctx.arc(tx, by, 5, 0, Math.PI * 2); ctx.fill();
    ctx.textAlign = 'center'; ctx.fillText('t', tx, by - 12);
    ctx.fillStyle = DIM; ctx.textAlign = 'left'; ctx.fillText('input: time', bx0, 16);

    const ax = (bx1 + w * 0.46) / 2;
    ctx.fillStyle = DIM; ctx.textAlign = 'center';
    ctx.fillText('θ = 2πft', ax + 12, by - 10);
    drawArrow(ctx, bx1 + 10, by, w * 0.46, by, DIM, 1.2);

    const cx = w * 0.72, cy = h / 2, R = Math.min(w * 0.2, h / 2 - 32);
    ctx.strokeStyle = wash(0.16); ctx.lineWidth = 1;
    ctx.beginPath(); ctx.arc(cx, cy, R, 0, Math.PI * 2); ctx.stroke();
    ctx.strokeStyle = GRID;
    ctx.beginPath(); ctx.moveTo(cx - R - 8, cy); ctx.lineTo(cx + R + 8, cy); ctx.stroke();

    const frac = theta % (2 * Math.PI);
    ctx.fillStyle = accentWash(0.08);
    ctx.beginPath(); ctx.moveTo(cx, cy); ctx.arc(cx, cy, R, 0, -frac, true); ctx.closePath(); ctx.fill();

    const px = cx + R * Math.cos(frac), py = cy - R * Math.sin(frac);
    drawArrow(ctx, cx, cy, px, py, ACCENT, 2.2);
    ctx.fillStyle = INK;
    ctx.beginPath(); ctx.arc(px, py, 4, 0, Math.PI * 2); ctx.fill();

    ctx.strokeStyle = accent2Wash(0.6); ctx.lineWidth = 1.2; ctx.setLineDash([3, 4]);
    ctx.beginPath(); ctx.moveTo(px, py); ctx.lineTo(px, cy); ctx.stroke(); ctx.setLineDash([]);
    ctx.fillStyle = ACCENT2; ctx.textAlign = 'left';
    ctx.fillText('sin θ', px + 6, (py + cy) / 2);

    const turns = Math.floor(rot);
    ctx.fillStyle = DIM; ctx.textAlign = 'center';
    ctx.fillText(
      turns > 0
        ? turns + (turns === 1 ? ' full rotation + ' : ' full rotations + ') + Math.round(((rot - turns) * 360)) + '°'
        : Math.round(rot * 360) + '° swept',
      cx, cy + R + 22
    );
    ctx.fillStyle = DIM; ctx.textAlign = 'left'; ctx.fillText('output: angle', cx - R, 16);
  }

  function wire() {
    $('pm-f').addEventListener('input', () => { pmF = $('pm-f').value / 100; renderPm(); });
    $('pm-t').addEventListener('input', () => { pmT = $('pm-t').value / 100; renderPm(); });
    let t;
    window.addEventListener('resize', () => { clearTimeout(t); t = setTimeout(renderPm, 120); });
  }

  function pmFrame(now) {
    const dt = Math.min(now - pmLast, 50) / 1000;
    pmLast = now;
    if ($('pm-run').checked) {
      pmT = (pmT + dt * 0.5) % 2;
      $('pm-t').value = Math.round(pmT * 100);
      renderPm();
    }
    requestAnimationFrame(pmFrame);
  }

  readTheme();
  wire();
  renderPm();
  requestAnimationFrame(pmFrame);

  LearnWidget.connect().then((host) => {
    host.on('theme.changed', () => { readTheme(); renderPm(); });
    readTheme();
    renderPm();
  });
})();