Visual Math


(four thumbnails of some of the content linked in this post)

Every once in a while, I'll see a retweet of this image explaining the discrete Fourier transform (DFT) by Stuart Riffle:

While understanding this image requires a bit of a mathematical background to decompose what's going on, it's easy to see how coloring the equation components might help form a more concrete picture of the process.

Over the years I've kept a list of interactive pieces that go a step further with this idea, making use of D3.js or P5.js to deconstruct concepts in a literate programming style: a mixture of code, visualization, and explanation. In particular, the long-form explanation separates the style from other resources where programmers usually share vignettes of their solutions (like bl.ocks or Shadertoy). The interactivity of the sketches adds a dimension of learnability that speaks strongly to people who approach new concepts with an abundance of variable-tweaking and knob-fiddling. Bret Victor and Vi Hart have been strong champions of this format with articles like Up and Down the Ladder of Abstraction, Learnable Programming, and The Parable of the Polygon.

What follows are some of my favorite visual math explorations, many of which are relevant to beginners in 3D graphics or engine development.

A Primer on Bézier Curves

Universal fixtures in any 2D or 3D engine, splines are commonly employed for camera animation, object trajectory planning, and more. This covers the mathematical basis of Bézier splines and useful comparisons with other spline representations (like Catmull-Rom & B-Splines)

Interpolation Tricks

A short but concise article on the foundations of common tweening curves found in most animation libraries.

Seeing Circles, Sines, and Signals

A particularly accessible introduction to digital signal processing. This covers everything from sampling theory to higher-level concepts like the fast Fourier transform.

Hexagonal Grids and Introduction to A* Pathfinding

Redblobgames (Amit Patel) has an impressive collection of interactive posts spanning several years, however two in particular — on hexagonal grids and A* pathfinding — are seminal learning material on these gamedev topics.

Handy Math

A variety of helpful 2D visualizations of common linear algebra concepts like projection, the dot product, and cross product.

Interactive Guide to Homogeneous Coordinates

No article on projective geometry would be complete without a discussion of homogeneous coordinates. Assuming a moderate familiarity with linear algebra, this short guide elucidates on matrix transforms using homogeneous coordinate systems.

2D Metaballs

Isosurfaces are found in many corners of graphics and computer vision. This is a short visual tutorial implementing a minimal 2D version of an isosurface: cute blobby shapes called metaballs.

How to Fold a Julia Fractal

Steve Wittens (aka Acko) has numerous interactive, exploratory posts using his custom WebGL Mathbox framework. Steve's post on Julia fractals is particularly excellent. (Thanks @meshula for this link).

Math As Code

Honorary mention to Matt Deslaurier's guide on mathematical symbols as implemented in code. While I enjoy the trend towards releasing source code alongside a paper, one of the best ways to learn any topic is to implement a paper from scratch. For newcomers to the field, pages of esoteric symbols are intimidating.

As a final thought, it would be interesting to see a common web platform for sharing these kinds of visual/interactive explanations. The machine learning community leans heavily on Jupyter notebooks. My ideal combination would be some remix of features across Codepen, Jupyter, and Shadertoy.

All images copyright their respective owners.

Comment -

Profile Image

Dimitri Diakopoulos