{"id":18020793,"url":"https://github.com/enzomanuelmangano/fourier-visualizer-remotion","last_synced_at":"2025-08-10T16:44:43.393Z","repository":{"id":195725564,"uuid":"689705468","full_name":"enzomanuelmangano/fourier-visualizer-remotion","owner":"enzomanuelmangano","description":"A fancy Fourier visualizer with RN Skia and Remotion","archived":false,"fork":false,"pushed_at":"2024-09-05T11:21:58.000Z","size":17390,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-22T14:11:14.561Z","etag":null,"topics":["react-native","react-native-skia","remotion","skia"],"latest_commit_sha":null,"homepage":"","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/enzomanuelmangano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"custom":"https://www.patreon.com/reactiive"}},"created_at":"2023-09-10T16:47:55.000Z","updated_at":"2024-10-16T11:28:12.000Z","dependencies_parsed_at":"2023-09-19T11:08:53.856Z","dependency_job_id":null,"html_url":"https://github.com/enzomanuelmangano/fourier-visualizer-remotion","commit_stats":null,"previous_names":["enzomanuelmangano/fourier-visualizer-remotion"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzomanuelmangano%2Ffourier-visualizer-remotion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzomanuelmangano%2Ffourier-visualizer-remotion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzomanuelmangano%2Ffourier-visualizer-remotion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzomanuelmangano%2Ffourier-visualizer-remotion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enzomanuelmangano","download_url":"https://codeload.github.com/enzomanuelmangano/fourier-visualizer-remotion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245738957,"owners_count":20664375,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["react-native","react-native-skia","remotion","skia"],"created_at":"2024-10-30T06:07:39.300Z","updated_at":"2025-03-26T21:32:26.826Z","avatar_url":"https://github.com/enzomanuelmangano.png","language":"TypeScript","funding_links":["https://www.patreon.com/reactiive"],"categories":[],"sub_categories":[],"readme":"# Fourier Visualizer with React Native Skia in Remotion 🎨\n\nThis is a fancy project done in [Remotion](https://www.remotion.dev/) and [React Native Skia](https://shopify.github.io/react-native-skia/) with the goal of building SVG Path using the Fourier Transform.\n\nThe concept behind this repo is strongly inspired by the following resources:\n\n- [3Blue1Brown](https://twitter.com/3Blue1Brown): [\"But what is a Fourier series? From heat flow to drawing with circles\"](https://youtu.be/r6sGWTCMz2k)\n- [Jezzamon](https://twitter.com/jezzamonn): [\"An Interactive Introduction to Fourier Transforms\"](https://www.jezzamon.com/fourier/index.html)\n\nThe idea behind this project is absolutely not mine, and the algorithms are wrappers of [fft.js](https://www.npmjs.com/package/fft.js).\nI simply used the same algorithms to run it using **React Native Skia** and render the output with **Remotion**.\n\n## How to Run\n\nInstall the dependencies:\n\n```bash\nyarn install\n```\n\nExecute in dev mode:\n\n```bash\nyarn start\n```\n\nRender the video:\n\n```bash\nyarn build\n```\n\nBefore doing that you might want to change the `settings` in the `remotion.config.ts` file.\n\n## How it Works\n\nAt its core, a Fourier Transform allows us to express any function (in this case, a path) as a sum of sinusoids (sines and cosines). Each sinusoid has a specific frequency, amplitude, and phase. In the context of this visualizer, think of them as individual contributors that, when combined, recreate the original path.\n\n### The Process\n\n1. **Path to Points**: The `SkPath` is converted into a set of linearly interpolated points using the `generateLinearInterpolatedPoints` function. This function ensures that the path is represented as a series of discrete points that can be processed further.\n\n2. **Preparing for FFT**: For the Fast Fourier Transform (FFT) to work effectively, the number of points must be a power of two. The `fillToPowerOfTwo` function ensures this by possibly adding extra points, guaranteeing compatibility with FFT.\n\n3. **Fast Fourier Transform**: With our points ready, they undergo the FFT process using the `computeFFT` function. The FFT transforms our spatial data (points in space) into frequency data. This is where we identify the sinusoids that best represent our path.\n\n4. **Extraction of Epicycles**: Post-FFT, we use the `extractEpicycles` function to determine the epicycles' properties (frequency, amplitude, phase). These are the circles you see in the visualization.\n\n5. **Visualization**:\n\n   - **Circles (Epicycles)**: As time (`t`) progresses, each epicycle rotates based on its frequency. The radius of the circle represents its amplitude, and its starting position is adjusted by its phase.\n   - **Path Tracing**: Starting from the center, each epicycle contributes to a point in space. As we sum the contributions of all epicycles, we trace the original path.\n\n   The visualization involves both showing the rotating circles (epicycles) and the path they trace. The `circlesPath` and `resultPath` are used for these purposes.\n\n6. **Rendering**: Finally, the visualizations are rendered using the Skia paths. The epicycles, the path being traced, and the final traced path are all displayed in real-time as the Fourier Transform evolves.\n\n### The Result\n\nWhat you witness is a mesmerizing dance of circles, collectively working to draw the original path 🕺🏻.\n\n## Feedback \u0026 Contribution\n\nThis is a demo project, but if you have suggestions, feedback, or want to show how you've expanded on this idea, feel free to open issues or submit pull requests!\n\n## License\n\nMIT\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenzomanuelmangano%2Ffourier-visualizer-remotion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenzomanuelmangano%2Ffourier-visualizer-remotion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenzomanuelmangano%2Ffourier-visualizer-remotion/lists"}