Formula Builder
Classroom tool
Formula Builder is a formula editor for teaching material. You type a formula in LaTeX and mark the concepts in it — a slope, a step size, a gradient — and each concept gets the augmentations that Head, Xie and Hearst catalogued in Math Augmentation (CHI 2022): a colour together with an underline pattern and a number, labels, braces, borders, tints, pointers and extra space, values a reader can drag or type, sliders, a plot whose marks follow the formula, and steps that play a derivation one move at a time. Hovering a concept in the formula, the prose or the plot lights it in all three and opens its definition.
Colour is the paper's most common augmentation, so every concept also carries a pattern and a number, in every view and every export. There are four views: Colour; Deutan, which uses blue and orange only; Mono, in ink alone, with each concept's name beside its number; and a Deutan preview that shows the Colour view as a reader with deuteranopia would see it. A test measures the palettes under a deuteranopia simulation and checks their contrast against the canvas.
The formula holds no styling. A separate sheet beside it names the concepts and says how each one looks and moves, so the LaTeX stays readable. The finished formula exports as a PNG, an SVG with one named group per concept, a GIF of its steps, LaTeX with one macro per concept, or an embed for another web page that keeps the dragging, the sliders, the plot and the steps. The embed carries the whole document after the # in its address, which a browser does not send to a server.
The parser, the TeX-style layout, the values, the plot, the step animation and every export run in a Rust core in integer arithmetic, compiled to WebAssembly, with the STIX Two Math font converted to integer data. The page draws the picture the core returns. It is a Builder project, and the repository holds its brief, plan, notebook and checks.
Using the tool
Pick one of the five examples, or type your own formula under Formula. Click part of the formula in the reader view to select it, click again to select a larger part, and select Add concept from selection; the toggles under each concept add a label, a brace, a border, a tint, a pointer, space, or a value to drag or slide. Under Export, choose PNG, SVG, GIF of the steps or LaTeX, or Embed code for an iframe you paste into another page.