Drawing with Fourier transforms

This repository contains the web implementation of the 3blue1brown video Pure Fourier series animation montage. The code is written in JavaScript and uses the p5.js library for drawing the vectors.

Detailed explanation and demonstration of the code can be found in the article drawing with fourier transforms.

Brief overview

The code is divided into two parts:

• Helper functions: These are the functions used to generate the Fourier series, the epicycles, and the data structure for the complex numbers.

  • complex-numbers.js: This file contains the data structure for complex numbers used throughout the project.
  • discrete-fourier-transform.js: This file contains the implementation of the discrete fourier transform algorithm.
  • functions.js: This file contains the implementation of the functions used to generate the epicycles and a linear space similar to np.linspace.

• Main functions: These are the functions used to generate the graphics.

  • sawtooth.js: The first canvas in the article.
  • 2dDrawing-batman.js: The second canvas in the article.
  • 2dDrawing-user.js: The third canvas in the article.
  • ft-drawings.js: Combine the above three to use divs and show all three canvases on one page.

References

• 3blue1brown
• The Coding Train
• Wikipedia