31:T73e,{ const context = DOM.context2d(width, height); const R = []; context.lineCap = "round"; context.lineJoin = "round"; for (let t = 0; true; ++t) { const scale = viewof zoom.value * width / viewbox.width; const a = t * 2 / q * Math.PI; context.save(); context.clearRect(0, 0, width, height); // Calculate the current point. let p = [0, 0]; for (let i = 0; i < M; ++i) { p = add(p, mul(DFT[i], expim(a * K[i]))); } // Zoom. context.translate(width / 2, height / 2); context.scale(scale, scale); context.translate(-p[0], -p[1]); // Draw circles. context.beginPath(); for (let i = 0, p = [0, 0]; i < M; ++i) { const r = abs(DFT[i]); context.moveTo(p[0] + r, p[1]); context.arc(...p, r, 0, 2 * Math.PI); p = add(p, mul(DFT[i], expim(a * K[i]))); } context.lineWidth = 0.25 / scale; context.strokeStyle = "#999"; context.stroke(); // Draw lines. context.beginPath(); context.moveTo(0, 0); for (let i = 0, p = [0, 0]; i < M; ++i) { context.lineTo(...p = add(p, mul(DFT[i], expim(a * K[i])))); } context.lineWidth = 0.75 / scale; context.strokeStyle = "#333"; context.stroke(); // Draw arrowheads. context.beginPath(); for (let i = 0, p = [0, 0]; i < M; ++i) { arrow(context, p, p = add(p, mul(DFT[i], expim(a * K[i]))), {size: 8 / scale}); } context.fillStyle = "#333"; context.fill(); // Draw the path. if (R.length < q) R.push(p); context.beginPath(); context.moveTo(...R[0]); for (let i = 1, n = R.length; i < n; ++i) { context.lineTo(...R[i]); } if (R.length >= q) context.closePath(); context.lineWidth = 1.5 / scale; context.strokeStyle = "#f00"; context.stroke(); context.restore(); yield context.canvas; } }32:[] 2f:{"title":"Fourier Series - Zoom","cells":[{"id":0,"value":"md`# Fourier Series - Zoom\n\nInspired by [3Blue1Brown](https://www.youtube.com/watch?v=r6sGWTCMz2k). Portrait of Fourier by [Stuart Jantzen](https://twitter.com/Biocinematics/status/1143334994175283201).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"viewof zoom = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${(form.value = Math.pow(2, form.i.valueAsNumber)).toFixed(1)}× zoom`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"function arrow(context, [x0, y0], [x1, y1], {size = 1, delta = Math.PI / 6} = {}){\n const dx = x1 - x0;\n const dy = y1 - y0;\n size = Math.min(size, Math.hypot(dx, dy) / 2);\n const a = Math.atan2(dy, dx);\n const a0 = a - delta;\n const a1 = a + delta;\n context.moveTo(x1 - size * Math.cos(a0), y1 - size * Math.sin(a0));\n context.lineTo(x1, y1);\n context.lineTo(x1 - size * Math.cos(a1), y1 - size * Math.sin(a1));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"svg = fetch(\"https://gist.githubusercontent.com/mbostock/a4fd7a68925d4039c22996cc1d4862ce/raw/d813a42956d311d73fee336e1b5aac899c835883/fourier.svg\")\n .then(response => response.text())\n .then(text => (new DOMParser).parseFromString(text, \"image/svg+xml\"))\n .then(svg => svg.documentElement)","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"path = svg.querySelector(\"path\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"l = path.getTotalLength()","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"P = Array.from({length: N}, (_, i) => {\n const {x, y} = path.getPointAtLength(i / N * l);\n return [x - viewbox.width / 2, y - viewbox.height / 2];\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"K = Int16Array.from({length: M}, (_, i) => (1 + i >> 1) * (i & 1 ? -1 : 1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"DFT = Array.from(K, k => {\n let x = [0, 0];\n for (let i = 0, N = P.length; i < N; ++i) {\n x = add(x, mul(P[i], expim(k * i / N * 2 * -Math.PI)));\n }\n return [x[0] / N, x[1] / N];\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":498,"value":"N = 1600 // number of input samples","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"M = 250 // number of epicycles","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":"q = 20000 // number of output samples","pinned":true,"hidden":false,"mode":"ojs"},{"id":470,"value":"function abs([re, im]) {\n return Math.hypot(re, im);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":811,"value":"function expim(im) {\n return [Math.cos(im), Math.sin(im)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"function add([rea, ima], [reb, imb]) {\n return [rea + reb, ima + imb];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"function mul([rea, ima], [reb, imb]) {\n return [rea * reb - ima * imb, rea * imb + ima * reb];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"viewbox = svg.viewBox.baseVal","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}