# Jezzamonn/fourier: the JavaScript behind an interactive Fourier transform lesson

> The source for a well known interactive explainer on Fourier transforms, written in plain JavaScript with a conductor passing events to per-widget controllers and an FFT wrapper doing the arithmetic.

**Jezzamonn/fourier** — An Interactive Introduction to Fourier Transforms

- Repository: https://github.com/Jezzamonn/fourier
- Website: http://www.jezzamon.com/fourier
- Stars: 2,708 · Forks: 239
- Language: Jupyter Notebook
- License: MIT
- Published: 2026-10-07 · Updated: 2026-10-07 · Language: en
- Canonical page: https://hysenlabs.com/projects/jezzamonn-fourier

## The build is two npm scripts and a webserver

The README keeps installation short. You install npm, run the dependency install, then start a watcher and a reloading server:

```bash
npm install
npm run watch
npm run reload
```

Those three commands are the whole setup path, and the author adds an honest warning next to them: the project has not been built on Windows, so the scripts may behave differently there. That kind of caveat is worth more than a badge, because it tells you the supported path is a Unix-like shell.

The package manifest confirms the split. The `start` script serves the `build` directory with `http-server`, the `build` script chains four steps together, webpack first, then the Markdown to HTML conversion, then copying `css/` and `img/` into place, and the watch config ties different globs to different rebuild steps: `content/*.md` and `script/make-html.js` trigger the makehtml step, `js/**/*.js` triggers webpack, `css/styles.css` triggers the css copy, and `img/*` triggers the image copy. The result is a static `build/` directory that any webserver can serve.

## One conductor, many controllers, no graphics library

The architectural claim in the README is that all interactivity and graphics are done with raw JavaScript, with no graphic libraries or anything like that. That is the interesting constraint, and the code structure supports it. Every interactive element has a controller responsible for updating and rendering it, `EpicyclesController` at `js/controller/epicycles-controller.js` being the named example.

Above the controllers sits a file the author calls a conductor, `js/conductor.js`, which handles events and passes them on to each controller. Then `main.js` creates everything and links the objects to elements on the page. So the wiring is centralised in one place, per-widget behaviour is isolated in controller files, and the DOM references are resolved once at startup. For a page with this many independent interactive sections, that is the arrangement that keeps things from tangling.

The README also flags that the code uses modern JavaScript features such as classes, and preempts the obvious reaction by telling a reader coming from introductory JavaScript not to let that phase them. Worth keeping in mind before you start reading, because the rest of the code is unremarkable in the best way: no framework abstractions to learn, just objects with methods.

## The transform itself is a wrapper over fft.js

The actual Fourier transform happens in `js/just-fourier-things.js`, which the README describes as a wrapper over the `fft.js` package from npm. That is a small file with a large responsibility, and the dependency list backs up the claim that the heavy lifting is not hand written: `fft.js` at version 4.0.4, `matrix-multiplication`, and `browser-image-compression` pinned at 2.0.2.

Sound synthesis is separate again, in `synth.js`, using the Web Audio API. So audio output is not routed through the same code path as the visual demonstrations, which matters if you go reading expecting one pipeline. The lesson presumably needs to play tones as well as draw circles, and the Web Audio API is the browser-native way to do that.

A test script is declared, running mocha across JavaScript test files in CI mode, and the dev dependencies include chai plus `mocha-chai-jest-snapshot`, which points at snapshot testing for rendered output. So the project is not entirely untested, even though the README says nothing about how to run or interpret the suite.

## Content is Markdown, and one section is a Python notebook

The prose of the lesson is not in the JavaScript. It lives in `content/content.md`, and `script/make-html.js` converts it to HTML at build time, using the `front-matter` and `showdown` packages declared in the manifest. The README points out that this arrangement is also how translations get made, with instructions sitting in `content/`, so adding a language is a content change rather than a code change.

The Python exception is the JPEG section. Those images were generated with Python in `python/dct.ipynb`, a Jupyter notebook that the author says is fairly readable on its own. The notebook leans on the standard scientific stack, with NumPy, PIL, SciPy and Matplotlib named in the README and Anaconda recommended as the easy way to get all of them. The repository language being listed as Jupyter Notebook rather than JavaScript is a fair signal about where the distinctive work sits.

The practical consequence is that this is a hybrid repository. The interesting maths exists in three places at once, the explanatory prose in Markdown, the runtime behaviour in JavaScript, and the static imagery in a notebook. Anyone picking it up to contribute will be editing all three.

## Where the metadata disagrees with itself

Two small inconsistencies are worth knowing before you rely on the metadata. GitHub reports the licence as MIT, while the `package.json` inside the repo declares ISC. Both cannot govern the same files, and the README does not mention licensing at all, so if the licence matters to you, read the `LICENSE` file in the tree directly.

The second is the version. The manifest is still at `1.0.0` with an empty description field, and there are no tagged releases attached to the repository. For a project with more than 2,700 stars, that tells you the versioning was never the point: this is published as source that accompanies a live page at jezzamon.com/fourier, not as a package anyone installs.

The activity picture is more current than the version number. The last recorded push was 2026-07-26 and the repository is not archived. Around 2,700 stars and 239 forks for a static explainer is a large audience for code that was never packaged, and the open issue count of 21 is unremarkable for something of this size.

## What a reader can settle from the repository alone

The README is unusually good about one thing: it tells you which file to open for which job. If you want to know where the maths happens, it is `just-fourier-things.js`. If you want to understand event handling, it is the conductor. If you want to write the text, it is `content/content.md`. That map is the most valuable content in the file, and it is short.

What it does not settle is anything about the mathematics itself. There is no summary of what the lesson demonstrates, no list of the widgets on the page, and no explanation of the order the reader meets them in, because all of that lives inside `content/content.md` and in the controllers. Anyone assessing whether this teaches well has to visit the live page, which the homepage field points to.

The repository tree reinforces that this is a website project rather than a library: `assets/`, `build/`, `css/`, `img/`, `promo/`, `python/`, `script/`, a `template.html`, `preview.png` and a `webpack.config.js` at the root. It is a small, readable codebase with one clear idea, and the parts worth studying are the event wiring and the content pipeline rather than the transform.

## Conclusion

This repository is worth reading as an example of interactive explanation built without a graphics framework, where the transform itself is a thin wrapper and the teaching value sits in the controller wiring and the Markdown that becomes the page. There is no library to adopt and no release line to track, so the useful entry points are `js/conductor.js`, one controller, and `content/content.md`. Clone it, run the two npm scripts, and open the epicycles widget first, since that is where the event plumbing is easiest to trace.

## FAQ

### How do I run the interactive Fourier transforms site locally?

Install npm if you do not have it, then run `npm install`, `npm run watch` to rebuild on file changes, and `npm run reload` to serve the `build` directory with automatic page reload. The author notes the project has not been built on Windows, so expect the scripts to behave best on a Unix-like shell.

### Does the project write its own FFT implementation?

No. The README describes `js/just-fourier-things.js` as a wrapper over the `fft.js` npm package, which is pinned as a dependency at version 4.0.4. The repository supplies the wiring and the presentation layer rather than the transform arithmetic itself.

### Why does a JavaScript site depend on Jupyter and SciPy?

The static images for the JPEG section were generated with Python in `python/dct.ipynb`, using NumPy, PIL, SciPy and Matplotlib, with Anaconda suggested as an easy way to install that stack. That notebook is why the repository language shows up as Jupyter Notebook rather than JavaScript.

### How do I add a translation of the lesson?

The page content is authored in Markdown at `content/content.md` and converted to HTML by `script/make-html.js` at build time. The README points to instructions inside `content/` for creating a translation in a new language, so the work is a content change plus a build config change rather than an edit to the controllers.

### Is this project packaged for others to install as a dependency?

Not really. The manifest is versioned at `1.0.0`, there are no tagged releases, and the README frames the repository as the source code for the live page at jezzamon.com/fourier rather than as a library. It is meant to be read, cloned and run locally.

## Sources

- [Issues](https://github.com/Jezzamonn/fourier/issues)
- [Jezzamonn/fourier on GitHub](https://github.com/Jezzamonn/fourier)
- [License: MIT](https://github.com/Jezzamonn/fourier/blob/main/LICENSE)
- [Project website](http://www.jezzamon.com/fourier)
- [README](https://github.com/Jezzamonn/fourier/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/jezzamonn-fourier