# Visual Math

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

Though fully understanding this equation requires the requisite mathematical background to precisely decompose, it's visually apparent to observe how coloring the components might help form an intuitive understanding of the process.

Over the years I've kept a list of *interactive* pieces that go 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 solutions (like bl.ocks or Shadertoy). The interactivity of the sketches adds a dimension of learnability that speaks 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.

###### Handy Math

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

https://kynd.github.io/p5sketches/handy_math.html

###### 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)

https://pomax.github.io/bezierinfo/

###### Interpolation Tricks

A short but concise article on the foundations of common curves found in animation toolkits.

http://sol.gfxile.net/interpolation/index.html

###### 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.

https://jackschaedler.github.io/circles-sines-signals/index.html

###### Hexagonal Grids and Introduction to A* Pathfinding

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

https://www.redblobgames.com/grids/hexagons/

https://www.redblobgames.com/pathfinding/a-star/introduction.html

###### 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).

https://acko.net/blog/how-to-fold-a-julia-fractal/

###### 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.

https://github.com/Jam3/math-as-code

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. An ideal combination might be some remix of features across Codepen, Jupyter, and Shadertoy.

All images copyright their respective owners.

## Comment -