Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
css
 
 
img
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

An Interactive Introduction to Fourier Transforms

This is the source code for jezzamon.com/fourier

Understanding this code

This webpage is coded in JavaScript, using Webpack, a tool that merges all the JS files into one and translates it into something compatible with older browsers. It uses npm to install dependencies and run the build scripts.

It uses some features of modern JavaScript like classes that might not be too familiar to you if you've only done intro JavaScript, but don't let that phase you too much! All the interactivity and graphics is just done with raw JS, no graphic libraries or anything like that.

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.

The actual Fourier transform is done in just-fourier-things.js, which is really a wrapper over the fft.js library. Sound synth is done in synth.js, using the Web Audio API.

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.

Installing stuff

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)

If you want to mess with the python stuff, you'll need jupyter, as well as NumPy, PIL, SciPy and Matplotlib. I recommend using Anaconda to install all that.

About

An Interactive Introduction to Fourier Transforms

Resources

License

Releases

No releases published

Packages

No packages published