Mint - Interactive Plots & Visualizations

In order to make interactive visualizations for this website I have written a simple library, which lets one draw mathematical plots & diagrams to an HTML canvas using JavaScript. It is called Mint, and is available on GitHub. (The name is a portmanteau of maths and interactive.)

Mint is very fresh, and so far I have only implemented features that I have directly needed. Nevertheless, the library already has enough features to produce some neat visualizations. Before briefly going over the library design itself, here are a couple of examples written using Mint showing interactivity and animation.

Examples

Sine & Cosine

Try dragging the green vector, and the purple line.

Lipschitz Continuity

Try dragging the green or red point.

Overview

The idea is that the library be fairly low-level, providing a relatively thin layer over the canvas API. Mint handles the following aspects, so you can focus on the visualizations:

• Drawing functions for basics like lines, rays, circles, vectors, axes & plots.
• Unit conversion between the canvas pixels and your axes.
• Mouse event handling, and interactivity with objects in the canvas itself.
• A start/stoppable animation controller, which plays nicely with interaction events.
• A basic computation graph for updating values when others change.

The drawing happens in immediate mode, which provides some nice benefits. For instance it is easy to check the state of any <input> tags, or whether the mouse is down, and use those to control the rendering.

Using Mint

I hope to continue developing Mint, but at this stage it is definitely for personal consumption. Things may move and/or change, and, while the code itself is documented via JSDoc comments, there is no supplemental documentation.

That being said, Instructions on how to checkout & build Mint are detailed in the README, there are some examples in the repo, and finally there are some bread-crumbs to the different classes.