Interactivity, Fidelity, and Polish: Building Modern Math Illustration
Cruz Godar
Made with 
and 
Who am I?
Teacher: currently a lecturer at Yale
Web developer: interactive notes/textbook for intro courses, library that powers these slides
Mathematical illustrator: 51 interactive web applets over 8 years, every visual in this talk
What is this talk?
I'd like to share what I've learned about making great visualizations
Short, fast-paced talk with a lot of advice (subjectivity varies)
My goal is to share the most objective principles I've learned, never to tell you what you're doing is wrong
Directed to developers of web applets primarily, but should be broadly applicable
Target audiences
Visualizations can interface with three very different groups: mathematicians, non-mathematician enthusiasts, and students
Often only one or two are considered
Different primary goals between these audiences: visual fidelity, low barrier to entry, interactivity and clarity of explanation, etc.
I believe nearly all visualizations can appeal to all three groups, and that they're at their best when they do
Fidelity
Code performance matters to all audiences!
Threshold between feeling like a rendering and actually manipulating an object (important when those objects don't have physical analogues)
Use the GPU whenever possible. On the web, this looks like WebGL or (eventually) WebGPU
CPU
GPU: 400x pixels at same fps on an M3 MacBook Pro
Single-threaded performance
When parallelization is impossible but something is performance-critical, it may be possible to write just that part in a lower-level language
WebAssembly lets compiled C code be run from JS
Used here in a tight loop for finding random walks in Wilson's Algorithm
Performance compromises
When it's not possible to render at both a high resolution and framerate, try to get the best of both worlds
Rendering realtime previews at a low resolution and final renders at high resolution is a good compromise
Expandability
Expect future advances in technology: keep limits soft on resolution, framerate, etc.
Eventually, HDR will be one of these items (WebGPU supports it now)
Consider leting users write small amounts of code
Interactivity
Draw things where they are! Prioritize controls that live in the space
When that's impractical, realtime and direct controls like sliders are better than indirect ones like text fields
Accessibility
A high skill ceiling should not preclude a low skill floor
Should be easy to directly manipulate the scene itself in a way that aligns with users' intuition
For 2D scenes, that usually looks like Google-Maps-style panning and pinch-to-zoom with inertia
3D scenes
A natural interaction method here is rotating
Take caution when defaulting to looking-around controls, since users can lose sight of the entire scene
Minimize barrier to entry
Provide sensible and pleasant defaults, and if your applet requires writing code, add nice examples that don't require copy-pasting (dropdowns work nicely)
Build with small screens and touchscreens in mind! There are always edge cases that degrade user experience if unconsidered
Clarity
A broad topic, but one thing that can help is (sparing) use of animation
Showing something moving or being drawn can help users keep their place
Animation as education
Animation can also have substantial educational value
The beta reduction process for a lambda calculus Tromp diagram; the full applet allows the animation to be slowed down or paused
Animation as substance
Sometimes animation is an intrinsic part of the a process
The Gravner–Griffeath snowflake model is as much about the growth process as the final result
Animation as flair
Still a place for animation outside of these categories, but be conservative when animating only between two successive user inputs
Like all animations, these should be reasonably short and/or skippable
Beauty
By far the most subjective topic in this talk!
When choosing color, match the color space to the math: RGB usually works well for colors from $xyz$-coordinates, HSV when one quantity is circular (e.g. an angle), etc.
Color palettes
For discrete coloring, can generate random palettes, but it can be best to restrict the color space: e.g. hues without intense greens, medium saturations, high values
Distinguishing color usually isn't critical for visualizations, but for student-facing work, use colorblind-friendly palettes at least optionally
Adding sound
Adding sound to an existing process can provide a novel and intuitive way to understand it
Most famously done with sorting algorithms
Designing around sound
Can make sound a part of the process, often by constructing a sound wave out of individual samples
YouTuber CodeParade did this with orbits in Mandelbrot sets, and 2swap with state space paths of double pendulums
Keep polishing!
The most important lesson I've learned is to keep developing and tinkering with your projects
If you care, you love to learn, and you're maybe just a little bit obsessive about making your work the best it can be, you can become excellent at this, just like anything else
If you create web applets and are looking for a place to start implementing some of these ideas, I've written a library called Wilson to simplify much of the process, and you may find it useful
Thank you!
I hope I've inspired you to create new visualizations or return to improve old ones
My list of planned future projects is as long as my list of completed ones, but I'm always happy to make it longer — if you have ideas for interactive illustration, let's collaborate!
Questions?