30:T74a,field={ 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 * 0.5; 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 = "#a0a"; context.stroke(); context.restore(); yield context.canvas; } }31:[{"id":"a03421b408bd0313d46c72c597807c772b6fb67988daa9f51f16f9e9d3ccecfa5e0c61770e284718111c084f675c5f005af25b734c76913b72bf217dcc537d27","href":"https://static.observableusercontent.com/files/a03421b408bd0313d46c72c597807c772b6fb67988daa9f51f16f9e9d3ccecfa5e0c61770e284718111c084f675c5f005af25b734c76913b72bf217dcc537d27","name":"EyeLine.svg","type":"image/svg+xml","lastModified":1617654449954.996,"size":1212},{"id":"d9864b0d2754e0905291c7b99382ff74e59025c498e7b787a4a3ab3d4f7caf8314f0b88211e3c10b7acc5c934d213761e7e2dbac39fc590295c7fe3b4b7069a4","href":"https://static.observableusercontent.com/files/d9864b0d2754e0905291c7b99382ff74e59025c498e7b787a4a3ab3d4f7caf8314f0b88211e3c10b7acc5c934d213761e7e2dbac39fc590295c7fe3b4b7069a4","name":"fourier.svg","type":"image/svg+xml","lastModified":1617655992973.74,"size":8396},{"id":"aa9c34c2c5cd3a073d14118a5454bdd340560db8730e1664a1e1f1c13c6544e95f32e205f4b96810dc1b7bcb81c0b849a9fa79a5c10b2018d7905d00de38d94a","href":"https://static.observableusercontent.com/files/aa9c34c2c5cd3a073d14118a5454bdd340560db8730e1664a1e1f1c13c6544e95f32e205f4b96810dc1b7bcb81c0b849a9fa79a5c10b2018d7905d00de38d94a","name":"Rose@3.svg","type":"image/svg+xml","lastModified":1617667123437.833,"size":1240}] 2e:{"title":"Fourier Series - Zoom","cells":[{"id":0,"value":"md`# Fourier Series - Zoom\n\n**Modified fork from [@mbostock](https://next.observablehq.com/@mbostock/fourier-series-zoom)**.\nI added the svg as an attachement and included my own quick continuous drawing of an eye for experimentation. I added controls to the head for changing sampling and calculation parameters.\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":833,"value":"viewof N = {\n const form = html``;\n form.n.oninput = () => form.no.value = `${form.value = form.n.value} N (input samples)`;\n form.n.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"viewof q = {\n const form = html``;\n form.q.oninput = () => form.qo.value = `${form.value = form.q.value} q (output samples)`;\n form.q.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"viewof M = {\n const form = html``;\n form.m.oninput = () => form.mo.value = `${form.value = form.m.value} M (Number of Components)`;\n form.m.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"viewof imageName = {\n const form = html``;\n form.iname.oninput = () => form.io.value = `\"${form.value = form.iname.value}\" (Image Name)`;\n form.iname.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"{\n const ele = html`${svg}`;\n return html`\n \n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$30","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 = {\n // preload all the attached svgs manually\n const fourier = await FileAttachment(\"fourier.svg\").text();\n const fourierElem = (new DOMParser).parseFromString(fourier,\"image/svg+xml\").documentElement;\n const eye = await FileAttachment(\"EyeLine.svg\").text();\n const eyeElem = (new DOMParser).parseFromString(eye,\"image/svg+xml\").documentElement;\n const rose = await FileAttachment(\"Rose@3.svg\").text();\n const roseElem = (new DOMParser).parseFromString(rose,\"image/svg+xml\").documentElement;\n switch (imageName){\n case \"fourier\":\n return fourierElem;\n case \"EyeLine\":\n return eyeElem;\n case \"Rose\":\n return roseElem;\n }\n}","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 = 2000 // number of input samples","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"//M = 1000 // number of epicycles","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":"//q = 5000// 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 = 460","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}