28:null 29:["$","title",null,{"children":"Fourier Series - Zoom | Mike Bostock | Observable"}] 2e: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; } }2f:[] 2c:{"id":"ad942daa6433073d","slug":"fourier-series-zoom","title":"Fourier Series - Zoom","thumbnail":"478c635f7f675532e71ec63d38aa05d1eedb20a54e615944e5736aa92b5a052e","access_level":"public","create_time":"$D2019-07-03T14:44:19.888Z","update_time":"$D2019-07-03T21:24:35.626Z","view_time":null,"first_public_time":"$D2019-07-03T19:29:12.046Z","has_unpublished_edits":null,"fork":true,"stars":89,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":815,"publish_version":815,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":78,"collection":{"id":"4f024f927e87d083","slug":"fourier-series","title":"Fourier Series","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"path = svg.querySelector(\"path\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"l = path.getTotalLength()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"K = Int16Array.from({length: M}, (_, i) => (1 + i >> 1) * (i & 1 ? -1 : 1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"N = 1600 // number of input samples","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"M = 250 // number of epicycles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"q = 20000 // number of output samples","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"function abs([re, im]) {\n return Math.hypot(re, im);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"function expim(im) {\n return [Math.cos(im), Math.sin(im)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"function add([rea, ima], [reb, imb]) {\n return [rea + reb, ima + imb];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"viewbox = svg.viewBox.baseVal","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"