An Interactive Introduction to Fourier Transforms
This is the source code for jezzamon.com/fourier
Understanding this code
Where the interesting files are
The content of the page is written in Markdown, in content/content.md. That file gets converted into HTML when the website is built in script/make-html.js). (If you would like to create a translation for a new language, there are instructions in content/)!
The code for all the interactive elements on the page is under the js/ folder. Each interactive element has a 'controller' that handles updating and rendering that element (e.g. EpicyclesController). There's something that I called a conductor that handles events and passes them on to each controller. Then they're all created and linked to elements on the page in main.js.
To generate the images used for the JPEG section, I used Python and a Jupyter notebook. That's in python/dct.ipynb, and it's fairly readable itself.
If you're curious about playing with the code yourself, you'll need to install npm. You can then run
npm install to install all the dependencies. Once that's done, you can run
npm run watch to start a script that will listen for file changes and rebuild everything, and
npm run reload to launch a webserver that reloads the page whenever anything changes :) (warning though: I haven't tried to build things on Windows so not sure how some of the scripts will run there)