Skip to content
This repository has been archived by the owner on Apr 5, 2021. It is now read-only.

Latest commit

 

History

History
27 lines (16 loc) · 1.3 KB

README.md

File metadata and controls

27 lines (16 loc) · 1.3 KB
Raw

fourier-transform-drawing

Inspired by 3Blue1Brown - Pure Fourier series animations for 12 oddly satisfying minutes

Example svg from Wikimedia

You may view the result at https://skyzh.github.io/fourier-transform-drawing/

What does it do

Let f : R -> R^2, f denotes a function from time t to complex plane.

f represents a svg path. Obtain fourier series of f.

On the webpage a blue circle represents one term in the series.

Generation Steps

  1. Install Python, Node.js, etc. Run yarn start to start dev server. Replace SVG path in index.html. Visit web page at http://localhost:8080
  2. Edit transform_point function, watch pattern in Original SVG, adjust until the pattern fills the canvas.
  3. Click Dump SVG Data. Note that it may take a long time. View progress in console. Copy fft_data.json to analysis folder.
  4. Adjust freq_range in analysis.py. Run ./analysis.py > dump.json.
  5. Run yarn start again to see the result. You may see pattern like this

image