{"id":38695375,"url":"https://github.com/jasonfyw/fourier-series","last_synced_at":"2026-01-17T10:39:33.481Z","repository":{"id":36989422,"uuid":"495221836","full_name":"jasonfyw/fourier-series","owner":"jasonfyw","description":"A web app demonstrating how the Fourier series can be used to approximate user-inputted line drawing","archived":false,"fork":false,"pushed_at":"2023-05-03T00:52:55.000Z","size":34641,"stargazers_count":31,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-05-03T01:27:06.717Z","etag":null,"topics":["fourier-series","fourier-transform","mathematics","visualization"],"latest_commit_sha":null,"homepage":"https://jasonfyw.com/fourier-series/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jasonfyw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-23T01:33:11.000Z","updated_at":"2022-12-22T13:28:48.000Z","dependencies_parsed_at":"2022-07-14T08:31:19.476Z","dependency_job_id":null,"html_url":"https://github.com/jasonfyw/fourier-series","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"purl":"pkg:github/jasonfyw/fourier-series","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonfyw%2Ffourier-series","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonfyw%2Ffourier-series/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonfyw%2Ffourier-series/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonfyw%2Ffourier-series/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jasonfyw","download_url":"https://codeload.github.com/jasonfyw/fourier-series/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonfyw%2Ffourier-series/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28506593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T10:25:30.148Z","status":"ssl_error","status_checked_at":"2026-01-17T10:25:29.718Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fourier-series","fourier-transform","mathematics","visualization"],"created_at":"2026-01-17T10:39:33.395Z","updated_at":"2026-01-17T10:39:33.459Z","avatar_url":"https://github.com/jasonfyw.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fourier Series Animation\n\n![](media/square_wave_demo.gif)\n\nAn interactive React web app that demonstrates how an arbitrary user-inputted line drawing can be approximated using the Fourier series. The concept is modelled through the visualisation of epicycles – or rotating vectors put end-to-end – with the Fourier series being used to determine the magnitude and initial position of each vector.\n\nInspired by [3Blue1Brown's video](https://www.youtube.com/watch?v=r6sGWTCMz2k) explaining and demonstrating the topic.\n\n## Usage\n\nTry it out directly here: https://jasonfyw.com/fourier-series/\n\nOr clone it onto your own machine\n\n```bash\n$ git clone https://github.com/jasonfyw/fourier-series\n```\n\nInstall the dependencies\n```bash\n$ cd fourier-series\n$ npm install\n```\n\nAnd then start the development server\n```bash\n$ npm start\n```\n\n## Features\n\nThere are two ways to see the Fourier series in action. Using your cursor or finger, you can draw on the canvas and the Fourier series will be applied to your drawing when the \"Begin animating\" button is pressed.\n\nAlternatively, you can choose a preset function to animate to demonstrate how the Fourier series can be used to approximate common waves such as sawtooth and square waves.\n\n## About the Fourier series\n\nThe Fourier series is a branch of Fourier analysis that aims to decompose a periodic function into a sum of exponentials (or trigonometric functions) with different frequencies and magnitudes. This is where the concept of rotating vectors placed end-to-end tracing out a function is derived.\n\nBeing able to do this allows for an arbitrary periodic function to be broken up into discrete terms that can then be easily manipulate. As a result, it has a lot of applications in physics such as with signal/image processing, quantum physics, electrical engineering and more.\n\nIn this particular demonstration, we are defining $f(t)$ to be a periodic complex function with $t\\in[0, 1]$. The exact data points in the codomain are given by a user-drawn input which are then mapped to the domain.\n\nThe essential idea is to represent $f(t)$ as a sum of exponential functions rotating at frequencies of $0, 1, -1, 2, -2, ...$ rotations per $t$. Each of these exponential functions will be multiplied by a complex coefficient, $c_n$ (where $n$ is the frequency), to determine its initial position and magnitude:\n\n$$\nf(t) = \\dots + c_{-2}e^{-2\\cdot 2\\pi it} + c_{-1}e^{-1\\cdot 2\\pi it} + c_{0}e^{0\\cdot 2\\pi it} + c_{1}e^{1\\cdot 2\\pi it} + c_{2}e^{2\\cdot 2\\pi it} + \\dots\n$$\n\nThe term for the vector that doesn't rotate at all is $c_0$. This can be though of as the 'centre' of the whole function – or the average of all the points in the function. This can be computed by taking the integral of the function across its domain:\n\n$$\n\\int_0^1 f(t) dt\n$$\n\nBy expanding $f(t)$ in terms of its Fourier series:\n\n$$\n\\int_0^1 f(t) dt = \\int_0^1 (\\dots + c_{-1}e^{-1\\cdot 2\\pi it} + c_{0}e^{0\\cdot 2\\pi it} + c_{1}e^{1\\cdot 2\\pi it} + \\dots)dt\n$$\n\nand then distributing the definite integral:\n\n$$\n\\int_0^1 f(t) dt = \\dots + \\int_0^1c_{-1}e^{-1\\cdot 2\\pi it}dt + \\int_0^1c_{0}e^{0\\cdot 2\\pi it}dt + \\int_0^1c_{1}e^{1\\cdot 2\\pi it}dt + \\dots\n$$\n\nEvery term except for the one with $c_0$ represents the average of a vector that makes a whole number of rotations, which cancel to zero. Hence,\n\n$$\n\\int_0^1 f(t) dt = \\dots + 0 + c_0 + 0 + \\dots = c_0\n$$\n\nThis yields the value for $c_0$.\n\nFor an arbitrary coefficient $c_n$, the integral above can be modified by multiplying $f(t)$ by the term $e^{-n2\\pi it}$:\n\n$$\n\\int_0^1 f(t)e^{-n2\\pi it} dt\n$$\n\nUpon expanding $f(t)$ and distributing the exponential term,\n\n$$\n\\int_0^1 f(t)e^{-n2\\pi it} dt = \\int_0^1 (\\dots + c_{0}e^{-2\\cdot 2\\pi it} + c_{1}e^{-1\\cdot 2\\pi it} + \\dots + c_{n}e^{0\\cdot 2\\pi it} + \\dots)dt\n$$\n\nNow, every term apart from that with $c_n$ is an average over vectors that rotate a whole number of turns, which cancels out to zero. This leaves just the $c_n$ term remianing, resulting in the following generalised expression to find any arbitrary $c_n$:\n\n$$\nc_n = \\int_0^1 f(t)e^{-n2\\pi it} dt\n$$\n\nIn this implementation, the program performs the computation numerically to find the Fourier series of an inputted function to a certain number of terms. For an exact representation of the original function, there would have to be infinitely many terms.\n\nUsing the computed coefficients, the program plots the resulting approximation of the function.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjasonfyw%2Ffourier-series","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjasonfyw%2Ffourier-series","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjasonfyw%2Ffourier-series/lists"}