2b:null 2c:["$","title",null,{"children":"Drawing Shapes with Epicycles through Complex Fourier Series | Patt | Observable"}] 31:T871,imageSequence = { const baseURL = `https://raw.githubusercontent.com/MaddHatt-PM/epicycle-visualization/refs/heads/main/public/Renders--128Samples--${varyTCircleCount}Circle`; const container = html`

`; // --- Prepare images --- // const minImageID = 0; const maxImageID = 66; let currImageID = minImageID; for (let i = 0; i<= maxImageID; i++) { const url = `${baseURL}/128S-${varyTCircleCount}C--${String((i)*2).padStart(3,'0')}.png`; const img = html`

`; container.appendChild(img); } // --- Prepare animation --- // let frame; let startTime = null; let currTime = 0 let cutoffTime = 1/20 * 1000; // seconds * milliseconds const sliderElement = viewof varyTIndex; const animate = (timestamp) => { if (window._wasVaryTimeInteractedWith) { return; } if (!startTime) startTime = timestamp; const dt = timestamp - startTime; startTime = timestamp; currTime += dt; if (currTime > cutoffTime) { currTime = 0 currImageID = (currImageID + 1 >= maxImageID) ? minImageID : currImageID + 1; // if (currImageID + 1 > maxImageID) { // currImageID = 0; // // cutoffTime /= 5; // } else { currImageID + 1; } sliderElement.value = currImageID sliderElement.dispatchEvent(new Event("input")); } frame = requestAnimationFrame(animate); } if (!window._wasVaryTimeInitialized) { frame = requestAnimationFrame(animate); window._wasVaryTimeInitialized = true } sliderElement.addEventListener("mousedown", () => { window._wasVaryTimeInteractedWith = true; }) const update = () => { Array.from(container.children).forEach((img,i) => { img.style.opacity = (i === varyTIndex) ? 1 : 0; }); }; varyTIndex; update(); return container; }32:T88b,varyCircleImageSequence = { const baseURL = "https://raw.githubusercontent.com/MaddHatt-PM/epicycle-visualization/refs/heads/main/public/EndResults--256Samples"; const container = html`

`; // --- Prepare images --- // const minImageID = 0; const maxImageID = 59; let currImageID = minImageID; for (let i = 0; i<= 59; i++) { const url = `${baseURL}/${String(i+4).padStart(3,'0')}C.png`; const img = html`

`; container.appendChild(img); } // --- Prepare animation --- // let frame; let startTime = null; let currTime = 0 let cutoffTime = 1/25 * 1000; // seconds * milliseconds const sliderElement = viewof varyCircleFrameIndex; const animate = (timestamp) => { if (window._wasVaryCirclesInteractedWith) { return; } if (!startTime) startTime = timestamp; const dt = timestamp - startTime; currTime += dt; startTime = timestamp; if (currTime > cutoffTime) { currTime = 0 currImageID = (currImageID + 1 > maxImageID) ? 0 : currImageID + 1; // if (currImageID + 1 > maxImageID) { // currImageID = 0; // // cutoffTime /= 5; // } else { currImageID + 1; } sliderElement.value = currImageID sliderElement.dispatchEvent(new Event("input")); } frame = requestAnimationFrame(animate); } if (!window._wasVaryCirclesInitialized) { frame = requestAnimationFrame(animate); window._wasVaryCirclesInitialized = true } sliderElement.addEventListener("mousedown", () => { window._wasVaryCirclesInteractedWith = true; }) const update = () => { Array.from(container.children).forEach((img,i) => { img.style.opacity = (i+4 === varyCircleFrameIndex) ? 1 : 0; }); }; varyCircleFrameIndex; update(); return container; }33:T59c,md` As we switch to approximating 2D pictures, we'll find that some concerns arise: 1. As we want a 2D path, we'll need an approximation function of two variables. When working with a one-variable function, we only have one route to get from point A to point B. But with two variables, we have an infinite amount of valid routes to sort through to find the closest route. How do we find a path that minimizes the distance between our path and each set? 2. With the Taylor expansion idea, we assumed we already had a valid function ${tex`f`}. What if we didn't even have a function to reference, just a series of points? If the first issue has you thinking of statistics and regression techniques, or if the second issue has you thinking of Fourier transforms and the frequency domain, then you're on the right track! For now, we'll focus on the first issue. Unfortunately, working with multivariable functions is far more difficult than working with single-variable functions. Luckily, there is a trick we can use to let us have a function of one variable! With a 2D plane, we have multiple ways to define a point in space, such as the familiar Cartesian coordinates ${tex`(x,y)`}. We also have polar coordinates ${tex`(r,\varphi)`} where ${tex`r`} is how far away the point is from the origin and ${tex`\varphi`} is the angle offset. This form translates very nicely to a another where one variable can represent both properties. `34:T65c,md` # Properties of Complex Numbers We can define a complex number as ${tex`z=x+iy`} where ${tex`i=\sqrt{-1}`}. If we consider a graph with the horizontal axis as the real component and the vertical axis as the imaginary component, then ${tex`z`} represents a two-dimensional coordinate. For shorthand, we'll define ${tex`\text{Re}(z)`} to retrieve the real component, ${tex`x`}, and ${tex`\text{Im}(z)`} to retrieve the imaginary component, ${tex`y`}. Much like real-valued two-dimensional coordinates, we can reinterpret ${tex`z`} in polar form with radius, ${tex`r`}, where, ${tex.block` r = |z| =\sqrt{x^2+y^2} `} and angle offset, ${tex`\varphi`}, where, ${tex.block` \varphi = \arg(z) = \arctan\left( \frac{y}{x} \right). `} These equations may feel familiar as tracing a path from ${tex`0\le\varphi<2\pi`} allows us to draw a circle of radius ${tex`r`}. Alternatively, we can represent these two equations as one through Euler's Formula, ${tex.block` z = re^{i\varphi}=r\left(\cos(\varphi)+i\sin(\varphi)\right). `} As ${tex`\varphi`} varies from ${tex`0`} to ${tex`2\pi`}, we see from the figure below that ${tex`z`} orbits around the origin. This property will allow us to inscribe circles into the epicycle system, and it is an important reason we switched from real functions to complex functions. However, its epicycle visualization had each smaller circle centered around a moving point on the next larger circle. In order to find the center for each circle, we only need to sum up all the moving points of all the larger circles. The usage of summations also allows for a nice segue for our next topic. `;35:T58d,md` As we use more and more sine waves, we'll get closer and closer to the square wave. For those interested in the Desmos graph used to generate this, here is a [link to its Desmos graph](https://www.desmos.com/calculator/s4ump0nggy). With notation, we have the Fourier series ${tex`z(t)`} to drive our epicycle as, ${tex.block` z(t) = \sum_{k=0}^N r_k e^{i(nt + \varphi)} `} where ${tex`N`} is our desired number of circles and ${tex`t`} is varying from ${tex`0`} to ${tex`2\pi`} so that ${tex`z(t)`} is a periodic function. By rewritting our equation, we can condense our two unknowns with, ${tex.block` \begin{aligned} z(t) &= \sum_{k=0}^N r_k e^{i(nt + \varphi_k)} \\ &= \sum_{k=0}^N r_k e^{int}e^{i\varphi_k} \\ &= \sum_{k=0}^N C_k e^{int} \end{aligned} `} where ${tex`C_k=r_ke^{i\varphi}`} is the unknown that we wish to minimize through techniques such as mean squared error. However, there is a far more efficient and exact method that we can use: the [Discrete Fourier Transform (DFT)](https://en.wikipedia.org/wiki/Discrete_Fourier_transform)! When using DFT, we also wind up with a special coefficient that 1) has a magnitude for each circle's radius, 2) has an angle offset to shift each smaller circle's starting location w.r.t. to its next largest, and 3) has a specific value for each frequency. The epicycle drawer used to generate the epicycle animation used DTF to compute each coefficient. `36:[{"id":"8006a0b39333f8ffee3f2e7374075aaaabd33a45da1c7153a183f7150b79afb6359e94e41f7da9465792a381ee8b2b0694de5100ccc2083da8bd0cc75e04ec4b","href":"https://static.observableusercontent.com/files/8006a0b39333f8ffee3f2e7374075aaaabd33a45da1c7153a183f7150b79afb6359e94e41f7da9465792a381ee8b2b0694de5100ccc2083da8bd0cc75e04ec4b","name":"taylor-approx@2.png","type":"image/png","lastModified":1742866898961.764,"size":120562},{"id":"878d107c08608704b87b29cb8a083c842f9f095d4655b36e76d5ce389a8be18a34a0d281b332c11ca19cae3e36cddd21dfde711ed017b44ad580d7d72ec94f6b","href":"https://static.observableusercontent.com/files/878d107c08608704b87b29cb8a083c842f9f095d4655b36e76d5ce389a8be18a34a0d281b332c11ca19cae3e36cddd21dfde711ed017b44ad580d7d72ec94f6b","name":"fourier-series.gif","type":"image/gif","lastModified":1742877573691.64,"size":1880023},{"id":"5df3ee0dfc881dcd913bf46029159dc7a9704f6a3639f5e0252c0da25ee5913e03222dddce225d4e6d57ce8051da3587d406e9f5ca0317f0b15d8227f37f411b","href":"https://static.observableusercontent.com/files/5df3ee0dfc881dcd913bf46029159dc7a9704f6a3639f5e0252c0da25ee5913e03222dddce225d4e6d57ce8051da3587d406e9f5ca0317f0b15d8227f37f411b","name":"complex-circle.gif","type":"image/gif","lastModified":1742880183750.122,"size":1446825}] 2f:{"id":"8ba74e3b5efc6f05","slug":"drawing-with-epicycles","title":"Drawing Shapes with Epicycles through Complex Fourier Series","thumbnail":"55210cca0b704554123605dae3921ed8decf0923ea632f4a0e859ddbabed6ff7","access_level":"public","create_time":"$D2025-03-19T23:03:19.656Z","update_time":"$D2025-03-26T15:01:07.778Z","view_time":null,"first_public_time":"$D2025-03-20T17:44:47.003Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"196d0e09c94e2fd3","login":"maddhattpatt","name":"Patt","avatar_url":"https://avatars-next.observableusercontent.com/0cc0fdc72aa5b98f222be876103e97d3f4b440b5d5b766f1fba4d10e7cfd6413","tier":"starter_2024"},"version":954,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8d00c6fd9bdb9709","login":"maddhattpatt","name":"Patt","avatar_url":"https://avatars-next.observableusercontent.com/0cc0fdc72aa5b98f222be876103e97d3f4b440b5d5b766f1fba4d10e7cfd6413","tier":null}],"members":[{"type":"individual","id":"8d00c6fd9bdb9709","login":"maddhattpatt","name":"Patt","avatar_url":"https://avatars-next.observableusercontent.com/0cc0fdc72aa5b98f222be876103e97d3f4b440b5d5b766f1fba4d10e7cfd6413","tier":null,"role":"editor"},{"type":"team","id":"196d0e09c94e2fd3","login":"maddhattpatt","name":"Patt","avatar_url":"https://avatars-next.observableusercontent.com/0cc0fdc72aa5b98f222be876103e97d3f4b440b5d5b766f1fba4d10e7cfd6413","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Drawing Shapes with Epicycles through Complex Fourier Series","cells":[{"id":0,"value":"# Drawing Shapes with Epicycles through Complex Fourier Series","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":258,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":596,"value":"html`\n

\nFigure 1: An epicycle from ${tex`0\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"viewof varyTIndex = Inputs.range([0,64], {\n label: md`__Animation frame of varying__ ${tex`\\bm{t}`}`,\n step: 1,\n value: 4,\n width: 500\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":819,"value":"Epicycles are a mathematical concept where we can construct a path through the sum of rotating speed, with each circle centered on the edge of previous. By increasing the number of circles, the paths we construct become even more intricate. How exactly do we get a series of circles to construct any desired path, especially with how much variability each rotating circle has in regards to its radius, rotation speed, and initial rotation offset?\n\nWhile we won't go _too_ in-depth with the underlying theory, this article is intended as a general overview to assist those who wish to research the mathematics even further. For those who are interested in creating their own epicycle animation, a Github link to the Python project is available at the bottom of this article.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":347,"value":"md`\n# Approximations with single-variable functions\nWith epicycles, we wish to define a rough approximation of a path that we can add finer and finer details to that better approximates a reference. Without getting _complex_, we can relate this to approximating a reference function, ${tex`f(x)`}, through Taylor expansions, ${tex`T_n(x)`}. For example, we'll approximate ${tex`\\sin(x)`},\n\n${tex.block`\n\\begin{aligned}\n\\sin(x) \\approx T_n(x)\n&= \\sum_{k=0}^{n} \\frac{(-1)^n}{(2k+1)!}x^{2k+1} \\\\\n&= x - \\frac{1}{3!}x^3 + \\frac{1}{5!}x^5 - \\frac{1}{7!}x^7 + \\dots\n\\end{aligned}\n`}\nwith ${tex`n`} as our number of terms. For a thorough explanation of how we arrive at this approximation, here is a [link to a video explanation](https://youtu.be/3d6DsjIBzJ4?si=80sSp4tI22jwcQRv) from 3Blue1Brown. Something to keep in mind is that each ${tex`x^i`} has a coefficient to _fit_ our approximation towards the original function. Below are some approximations of ${tex`\\sin(x)`} for different values of ${tex`n`}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":583,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":908,"value":"html`\n

\nFigure 2: Approximations of ${tex`\\sin(x)`} through Taylor expansions of a variety of terms.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":581,"value":"md`\nNotice that as we add more and more terms, our function ${tex`T_n(x)`} will look closer and closer to ${tex`\\sin(x)`}. This reasoning also applies for epicycle drawings. From the figure below, we can see how adding more terms yields a closer approximation to our reference image. While we know that the terms of Taylor expansions will graph like polynomials, we see that the terms creating the epicycle graph as circles. More on that later in the next section.\n`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":913,"value":"html`\n

\nFigure 3: Multiple epicycle systems from ${tex`0\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"viewof varyCircleFrameIndex = Inputs.range([4,63], {\n label: md`__Circle count__ ${tex`\\bm{n:}`}`,\n step: 1,\n value:4,\n width: 500\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":495,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":572,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":642,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":916,"value":"html`\n

\n \nFigure 4: The trajectory formed by varying ${tex`\\varphi`} from ${tex`0`} to ${tex`2\\pi`}.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":576,"value":"# Approximating with Fourier Series\nReturning back to the idea of approximating a function, we explored the idea of using a Taylor series. While a Taylor series approximates a function through a summation of terms with ${tex`x`} raised to incrementing powers, we'll take a different approach for our epicycles. Instead we'll be using a summation of terms of sines and cosines that use decreasing amplitudes, conveniently represented by ${tex`r`}, and increasing frequencies, conveniently represented by ${tex`\\varphi`}.\n\nFrom this, we can approximate a variety of inputs, including some functions that Taylor series cannot approximate, such as piecewise functions. However, since sines and cosines are periodic, then our original input should also be periodic. Below is an approximation of a piecewise-defined square wave with the sine waves composing the series below it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":626,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":927,"value":"html`\n

\n \nFigure 5: Approximations of the square wave through a sum of sine waves.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":619,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":950,"value":"# Putting it all together\nIn review we can draw epicycles by taking our 2D set of points into the complex domain, approximating it through a Fourier series, and then using the DTF to solve for each waves amplitude (which is also each circle's radius).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":664,"value":"md`\n# Epicycle Drawing with Python\nHere is a [link to the Github project](https://github.com/MaddHatt-PM/epicycle-visualization) that you can download and draw your own epicycle drawings! All you need to do is provide the main function with a list of ${tex`x`} and ${tex`y`} points. If you've already got an SVG image you want to draw, there's a function to sample and convert that into the needed points. The only thing to keep in mind is that the SVG sampler currently only uses the first defined path.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":636,"value":"# Further resources and references on epicycles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":672,"value":"md`\nVideo: 3Blue1Brown - [But what is a Fourier series? From heat flow to drawing with circles | DE4](https://youtu.be/r6sGWTCMz2k?si=7e3F83rFr5azrkOZ)\n\nVideo: 3Blue1Brown - [But what is the Fourier transform? A visual introduction.](https://www.youtube.com/watch?v=spUNpyF58BY)\n\nVideo: Mathologer - [Epicycles, complex Fourier series and Homer Simpson's orbit](https://youtu.be/qS4H6PEcCCA?si=dZOfnPxPJBKyj05w)\n\nArticle: Brett van Zuiden - [Drawing by Epicycles](https://brettcvz.github.io/epicycles/)\n\nArticle: Jez Swanson - [An Interactive Introduction to Fourier Transforms](https://www.jezzamon.com/fourier/index.html)\n\nArticle: Juan Carlos Ponce Campuzano - [Tracing Closed Curves with Epicycles: A Fun Application of the Discrete Fourier Transform](https://mathed.miamioh.edu/index.php/ggbj/article/view/197/159)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":746,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":752,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":751,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":755,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":757,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":816,"value":"Misc Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":291,"value":"viewof varyTCircleCount = Inputs.select([24], {\n label: \"Number of circles (Disabled due to high memory usage)\",\n value: 8\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"