🎨 making colorized equations 🧮

I learned about color-coded equations from BetterExplained. I read about them again in a paper from Andrew Head, where Andrew calls them augmented formulas.

Color-coded equations, also known as colorized equations, look like this:

colorized equation

Inspiration from betterexplained.

I've tried to make a tool (faster than Kalid Azad's) for making these visuals.

I've tried working with the Canvas API directly, using an old JQuery-dependent JS library, and using Rust + WebAssembly. The last option seems to have the best performance ↔ user-experience tradeoff, though something weird is happening.

gif of app struggles while drawing
A lossy gif showing the current state of the augmented equation tool.

It seems that the stroke shows up on the screen pretty far from where the mouse presses down. I've been fiddling around in Rust today, and I think I will continue working on this.

I had this issue with vanilla JS - just using the Canvas API - so I'm not sure exactly what is happening.