These prototypes serve as examples for how a specific concept can be communicated interactively, rather than just by text or video. By presenting information spatially, each interaction shows how a concept evolves with change per dimension, and (hopefully) serves the student as a better means to intuitively grasp the subject.
This teaches the student what a 2d vector is (drag the blue numbers):
This concept can be extended to show how vectors can be added together (arrowhead color bug requires a bit too much effort for a demo):
With minimal change in code, this might be modified to teach y=mx+b. Ideally, a plethora of examples might be starting points for taking something simple, modifying the code, and using it to create something more complex.
For example, teaching Phase, frequency, and amplitude as quickly as possible:
The same concept can be applied to teaching the principle of superposition:
Guaranteed to take up a full-page in the first chapter of any textbook on Fourier theory, this demonstrates how an infinite series of sin waves superimposed on each other can make
any a sawtooth function:
Such examples serve as either a foundational means of teaching new concepts or as a qualitative glance at a subject.
A primary design goal is to keep things as simple as possible, removing extraneous cognitive load to present concepts solely. If this sort of thing interests you, you might like this paper.
Indebted to Bret Victor in more ways than one, this uses his Tangle library (slightly modified) for the draggable numbers. Drawing done with a charting library I wrote as a plugin for the svg drawing Raphael js library.