https://github.com/Jezzamonn/fourier

An Interactive Introduction to Fourier Transforms
https://github.com/Jezzamonn/fourier

Last synced: 17 days ago
JSON representation

An Interactive Introduction to Fourier Transforms

• Host: GitHub
• URL: https://github.com/Jezzamonn/fourier
• Owner: Jezzamonn
• License: mit
• Created: 2018-07-28T22:54:41.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2024-01-24T17:19:38.000Z (5 months ago)
• Last Synced: 2024-02-25T05:30:57.472Z (4 months ago)
• Language: Jupyter Notebook
• Homepage: http://www.jezzamon.com/fourier
• Size: 8.32 MB
• Stars: 2,352
• Watchers: 51
• Forks: 210
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• my-awesome-stars - Jezzamonn/fourier - An Interactive Introduction to Fourier Transforms (Jupyter Notebook)
• awesome-stars - Jezzamonn/fourier
• awesome-repositories - Jezzamonn/fourier
• awesome-five23 - fourier
• awesome-list - Jezzamonn/fourier - An Interactive Introduction to Fourier Transforms. (Machine Learning Tutorials / Data Management)

README

        
# An Interactive Introduction to Fourier Transforms

This is the source code for [jezzamon.com/fourier](http://www.jezzamon.com/fourier)

![](promo/release/combo.gif)

## Understanding this code

This webpage is coded in JavaScript, using [Webpack](https://webpack.js.org/), a tool that merges all the JS files into one and translates it into something compatible with older browsers. It uses [npm](https://www.npmjs.com) 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](content/content.md). That file gets converted into HTML when the website is built in [script/make-html.js](script/make-html.js)). (If you would like to create a translation for a new language, there are instructions in [content/](content/))!

The code for all the interactive elements on the page is under the [js/](js/) folder. Each interactive element has a 'controller' that handles updating and rendering that element (e.g. [EpicyclesController](js/controller/epicycles-controller.js)). There's something that I called a [conductor](js/conductor.js) 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](js/main.js).

The actual Fourier transform is done in [just-fourier-things.js](js/just-fourier-things.js), which is really a wrapper over the [fft.js](https://www.npmjs.com/package/fft.js) library. Sound synth is done in [synth.js](js/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](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](https://www.npmjs.com/get-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](https://jupyter.org/), as well as [NumPy](http://www.numpy.org/), [PIL](http://www.pythonware.com/products/pil/), [SciPy](https://www.scipy.org/) and [Matplotlib](https://matplotlib.org/). I recommend using [Anaconda](https://www.anaconda.com/) to install all that.