DSPnote: Create Notebooks with Interactive Figures

Demo articles:

• Log-spherical Mapping in SDF Raymarching
• Notes on Waveguide Synthesis

DSPnote is a static site generator specialized in creating notebooks with interactive figures. Some features:

• Generative audio scripts with parameters: scripts written in Sporth can be included directly in the text, with an optional block diagram, and run in-browser with sliders to control variables
• WebGL shaders with parameters: GLSL ES fragment shaders can be included, with auto-generated image fallbacks
• Math typesetting; code blocks with syntax highlighting

Installing and Using

DSPnote requires Python 3. The following commands should work similarly on all platforms. Clone or download the repository (master branch), and in the resulting folder, run the command:

pip3 install -e .

This installs, along with its dependencies, the tool dspnote-gen, which takes a single argument: a directory containing a dspnote project. An example project is included, and the article can be generated by running:

dspnote-gen example

This will generate the site to example/out. Change to this directory and run the following command to serve the site locally:

python3 -m http.server 8000

Then, point your browser to http://localhost:8000/exampleNote. For a more complex example project, see pac-dev/notes.

To create a new project, copy the example folder and modify it. Each Markdown file in the content subfolder will generate an article. Assets for each article (eg. GLSL sources, images) are in a folder of the same name alongside the Markdown file.

Prior Art

• http://jupyter.org/
• https://observablehq.com/
• https://syntopia.github.io/Polytopia/polytopes.html
• https://www.a1k0n.net/2018/11/13/fast-line-following.html