Embed
The script finds its own origin, so nothing else is needed; the widget runs in a sandboxed frame and cannot touch your page.
<script src="https://learn.mimmsy.com/learn-widget.js"></script>
<learn-widget name="eulers-chain"></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 eulers-chain/ to a new name (one DNS label), set forkedFrom to { "name": "eulers-chain", "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": "eulers-chain",
"title": "Euler's chain",
"version": 3,
"claim": "The partial products of (1 + iθ/n)ⁿ trace a chain that converges, as n grows, to the point on the unit circle at angle θ, which is eⁱᶿ.",
"summary": "Sliders for θ and n draw n steps of ×(1 + iθ/n) starting from 1; readouts show the final length approaching 1 and the final angle approaching θ.",
"topics": [
"math/eulers-formula",
"math/complex-numbers"
],
"aliases": [
"e to the i theta",
"unit circle",
"compound rotation",
"limit definition of e"
],
"check": [
{
"q": "As n grows, |(1 + iθ/n)ⁿ| tends to",
"options": [
"0",
"1",
"θ",
"e^θ"
],
"answer": 1,
"why": "Each step has length √(1 + θ²/n²), and that raised to n tends to 1."
},
{
"q": "Each step multiplies the running value by (1 + iθ/n), which nudges it",
"options": [
"toward the origin",
"along its own direction",
"perpendicular to its current position",
"back toward 1"
],
"answer": 2,
"why": "The iθ/n term adds a perpendicular nudge of relative size θ/n: velocity = i · position."
},
{
"q": "The defining property of the exponential function eˣ is…",
"options": [
"its rate of change equals its current value",
"its rate of change is constant",
"it doubles with every unit of x",
"its rate of change equals x"
],
"answer": 0,
"why": "Growth proportional to current value, with proportionality constant 1, defines eˣ; e is its value at x = 1."
},
{
"q": "For the moving point eⁱᶿ, the velocity is…",
"options": [
"i times the position: perpendicular to it and equal in length",
"parallel to the position",
"always pointing at the origin",
"zero"
],
"answer": 0,
"why": "d/dθ eⁱᶿ = i·eⁱᶿ, and multiplying by i is a quarter turn. Perpendicular velocity cannot change the distance from the origin, which forces motion along a circle."
},
{
"q": "For every real θ, the magnitude |eⁱᶿ| equals…",
"options": [
"exactly 1",
"eᶿ",
"cos θ",
"a value that grows with θ"
],
"answer": 0,
"why": "Perpendicular velocity never moves the point closer to or farther from the origin."
}
],
"height": 540,
"requires": [
"complex-multiply"
],
"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>Euler's chain</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;
--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;
}
}
* { 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.sym.single {
display: grid; grid-template-columns: 88px 1fr; gap: 12px 16px;
align-items: center; margin-bottom: 14px;
}
.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); }
@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.tall { height: 320px; }
.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 small { color: var(--text-dim); font-size: 12.5px; }
</style>
</head>
<body>
<div class="widget">
<div class="control-row sym single">
<label for="eu-theta">angle θ</label>
<span class="ctl wide"><input type="range" id="eu-theta" min="10" max="360" value="120"><span class="mono val" id="eu-theta-label">120°</span></span>
</div>
<div class="control-row sym single">
<label for="eu-n">steps n</label>
<span class="ctl wide"><input type="range" id="eu-n" min="1" max="64" value="4"><span class="mono val" id="eu-n-label">4</span></span>
</div>
<canvas id="eu-canvas" class="plot tall"></canvas>
<div class="readout-row">
<div class="readout">
<span class="big mono" id="eu-len">1.18</span>
<small>|(1 + iθ/n)ⁿ| → 1 as n grows</small>
</div>
<div class="readout">
<span class="big mono" id="eu-ang">120°</span>
<small>final angle → θ</small>
</div>
</div>
</div>
<script src="/w/_sdk/host.js?v=1"></script>
<script src="widget.js?v=1"></script>
</body>
</html>
widget.js
/* Euler's chain: the partial products of (1 + iθ/n)^n walk around the unit circle to e^{iθ}. */
(() => {
'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 + ')';
let ACCENT, ACCENT2, HOT, DIM, INK, GRID;
function readTheme() {
ACCENT = tv('--accent'); ACCENT2 = tv('--accent2'); HOT = tv('--hot');
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;
const 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 renderEu() {
const thetaDeg = +$('eu-theta').value;
const n = +$('eu-n').value;
const theta = (thetaDeg * Math.PI) / 180;
$('eu-theta-label').textContent = thetaDeg + '°';
$('eu-n-label').textContent = n;
const pts = [{ re: 1, im: 0 }];
let re = 1, im = 0;
const sr = 1;
const si = theta / n;
for (let s = 0; s < n; s++) {
const nre = re * sr - im * si;
const nim = re * si + im * sr;
re = nre;
im = nim;
pts.push({ re, im });
}
const len = Math.hypot(re, im);
let ang = (Math.atan2(im, re) * 180) / Math.PI;
if (ang < 0) ang += 360;
$('eu-len').textContent = len.toFixed(3);
$('eu-ang').textContent = Math.round(ang) + '°';
const { ctx, w, h } = setupCanvas($('eu-canvas'));
const cx = w / 2;
const cy = h / 2;
const maxR = Math.max(2.2, len * 1.1);
const sc = Math.min(w, h) / 2 / maxR;
const X = (p) => cx + p.re * sc;
const Y = (p) => cy - p.im * sc;
ctx.clearRect(0, 0, w, h);
ctx.font = '11px ui-monospace, Menlo, monospace';
ctx.strokeStyle = GRID;
ctx.beginPath();
ctx.moveTo(0, cy); ctx.lineTo(w, cy);
ctx.moveTo(cx, 0); ctx.lineTo(cx, h);
ctx.stroke();
ctx.strokeStyle = wash(0.16);
ctx.beginPath();
ctx.arc(cx, cy, sc, 0, Math.PI * 2);
ctx.stroke();
const tx = cx + Math.cos(theta) * sc;
const ty = cy - Math.sin(theta) * sc;
ctx.strokeStyle = HOT;
ctx.lineWidth = 1.4;
ctx.beginPath();
ctx.arc(tx, ty, 7, 0, Math.PI * 2);
ctx.stroke();
ctx.fillStyle = HOT;
ctx.textAlign = 'left';
ctx.fillText('target: angle θ on the unit circle', Math.min(tx + 12, w - 200), ty - 8);
ctx.strokeStyle = ACCENT;
ctx.lineWidth = 1.8;
ctx.beginPath();
pts.forEach((p, i) => {
if (i === 0) ctx.moveTo(X(p), Y(p));
else ctx.lineTo(X(p), Y(p));
});
ctx.stroke();
pts.forEach((p, i) => {
ctx.fillStyle = i === pts.length - 1 ? INK : accentWash(0.7);
ctx.beginPath();
ctx.arc(X(p), Y(p), i === pts.length - 1 ? 4.5 : 2.4, 0, Math.PI * 2);
ctx.fill();
});
const fp = pts[pts.length - 1];
ctx.strokeStyle = wash(0.3);
ctx.lineWidth = 1.2;
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(X(fp), Y(fp));
ctx.stroke();
const vEnd = { re: fp.re - fp.im * 0.45, im: fp.im + fp.re * 0.45 };
ctx.strokeStyle = ACCENT2;
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(X(fp), Y(fp));
ctx.lineTo(X(vEnd), Y(vEnd));
ctx.stroke();
const vAng = Math.atan2(Y(vEnd) - Y(fp), X(vEnd) - X(fp));
ctx.fillStyle = ACCENT2;
ctx.beginPath();
ctx.moveTo(X(vEnd), Y(vEnd));
ctx.lineTo(X(vEnd) - 8 * Math.cos(vAng - 0.4), Y(vEnd) - 8 * Math.sin(vAng - 0.4));
ctx.lineTo(X(vEnd) - 8 * Math.cos(vAng + 0.4), Y(vEnd) - 8 * Math.sin(vAng + 0.4));
ctx.closePath();
ctx.fill();
ctx.textAlign = 'left';
ctx.fillText('velocity = i · position', Math.min(X(vEnd) + 8, w - 150), Y(vEnd) + 16);
ctx.fillStyle = ACCENT2;
ctx.textAlign = 'center';
ctx.fillText('start: 1', X(pts[0]), Y(pts[0]) + 18);
ctx.fillStyle = DIM;
ctx.textAlign = 'left';
ctx.fillText('n = ' + n + ' steps of ×(1 + iθ/n)', 14, 16);
}
function wire() {
['eu-theta', 'eu-n'].forEach((id) => $(id).addEventListener('input', renderEu));
let t;
window.addEventListener('resize', () => { clearTimeout(t); t = setTimeout(renderEu, 120); });
}
readTheme();
wire();
renderEu();
LearnWidget.connect().then((host) => {
host.on('theme.changed', () => { readTheme(); renderEu(); });
readTheme();
renderEu();
});
})();