Rainer Willeke
Mathematically-Based Visuals for the Web
When Mathematics Becomes Visual
I’ve been building web experiences for over 20 years at Raindog Solutions, and along the way, I’ve had occasion to work on several projects that required a unique visual touch.
Sometimes that meant finding the right photograph, animation, layout, or subtle interactive detail. Other times, the project called for something less conventional: a visual that behaves more like a living system than a conventional design element.
That interest eventually led me back to mathematics.
Mathematics has an unusual visual vocabulary. A remarkably small equation can produce intricate landscapes, organic growth, repeating symmetries, chaotic motion, or patterns that seem almost designed by hand. Once these systems are animated and made interactive, they become much easier to appreciate. You can watch the underlying rule reveal itself.
I built the following collection as an experiment in bringing ten of these mathematical ideas directly into the browser. Each visualization is generated in real time, responds to the dimensions of its container, and can be opened fullscreen for a closer look.
The Mandelbrot Set: Infinity Along an Edge
The Mandelbrot set is probably the best-known fractal, but a still image only hints at what makes it interesting.
Every point in the image represents a number passed repeatedly through a simple equation. Some values remain bounded, while others escape toward infinity. The dark central form contains the bounded values. The coloured regions show how quickly everything else escapes.
The real complexity lives along the boundary. No matter how closely it is examined, new spirals, filaments, islands, and miniature echoes continue to appear.
Use the pointer to explore different areas of the plane, and use the mouse wheel or trackpad to change the magnification.
Julia Sets: Related Rules, Entirely Different Worlds
Julia sets use mathematics closely related to the Mandelbrot set. The difference is in what remains fixed and what is allowed to vary.
That small change produces an enormous family of possible forms. Some Julia sets resemble connected webs or branching organisms. Others break apart into isolated clouds of detail. Adjusting a single parameter can cause the entire structure to stretch, divide, reconnect, or dissolve.
The animation continuously moves through nearby parameter values, making those transitions visible.
Newton Fractals: Watching an Algorithm Make Decisions
Newton’s method is commonly used to approximate solutions to equations. Give it a starting value, repeat its calculation, and it will often move progressively closer to a solution.
When the same process is applied to thousands of starting points across the complex plane, the result becomes a map. Each colour represents the solution eventually reached from that region.
The intricate boundaries show where the algorithm becomes extremely sensitive. Two nearly identical starting points can be drawn toward completely different answers.
Strange Attractors: Structure Inside Chaos
A strange attractor records the evolving state of a chaotic system.
The motion is deterministic: every new position follows directly from the one before it. Yet the path never settles into a simple loop, and tiny differences in its starting conditions can grow into dramatically different results.
As thousands of points accumulate, an organized form begins to emerge. The individual journey is unpredictable, while the larger structure remains recognizable.
I find this one especially compelling in fullscreen. Fine trails that are easy to miss in a smaller container become part of a much larger, luminous structure.
Reaction–Diffusion: Patterns That Build Themselves
Reaction–diffusion systems model substances that interact locally while spreading through space.
The simulation begins with two virtual chemicals. They diffuse at different rates, react when they meet, and are continuously replenished or removed. From those few rules emerge spots, stripes, waves, cells, and maze-like structures.
Related mathematics has been used to study biological pattern formation, including the arrangements seen on animal coats, shells, and other natural surfaces.
The pattern is continually evolving. Resetting the visualization supplies a new initial disturbance and allows the system to organize itself again.
Fourier Epicycles: Drawing with Rotating Waves
Fourier analysis describes complicated repeating signals as combinations of simpler waves.
One way to make that visible is through epicycles: rotating circles attached to other rotating circles. Each circle represents a frequency, amplitude, and phase. Their movements are added together, and the final point leaves a trail.
A busy collection of circular motions can produce a surprisingly smooth and recognizable path.
The same mathematical principle appears throughout audio processing, image compression, communications, and many other technologies built around signals.
Harmonographs: The Shape of Fading Motion
A mechanical harmonograph uses pendulums to guide a pen across paper. Each pendulum oscillates at its own frequency while gradually losing energy.
The digital version combines several decaying waves to calculate the horizontal and vertical position of a virtual pen. Small differences between the frequencies create looping figures that slowly shift in and out of alignment.
The result sits somewhere between geometry, vibration, and drawing.
Spirograph Curves: Wheels Moving Within Wheels
Spirograph patterns are created by tracing a point attached to one circle as that circle rolls around another.
The number and shape of the petals are consequences of the relationship between the circles: their sizes, their rotation rates, and the distance of the drawing point from the centre.
When those measurements form a compatible ratio, the line eventually returns to its starting point and closes into a precise rosette.
Animation adds another dimension to the familiar drawing toy. The ratios and offsets can evolve gradually, allowing one family of curves to flow into another.
Phyllotaxis: The Arithmetic of Natural Growth
Phyllotaxis describes the arrangement of leaves, petals, seeds, and other repeating structures around a growing centre.
In this visualization, every new point is placed at approximately the golden angle from the previous one. Its distance from the centre increases according to the square root of its position in the sequence.
No spiral is explicitly drawn. The many visible spirals emerge from the placement of the individual points.
Similar arrangements appear in sunflowers, pine cones, succulents, and other plants that need to distribute new growth efficiently.
Voronoi Diagrams: Dividing Space by Proximity
A Voronoi diagram begins with a collection of seed points. Every location in the surrounding space is assigned to whichever seed is closest.
The result is a complete map of neighbouring territories. Boundaries appear wherever two seeds are equally near, and vertices form where three or more territories meet.
As the seeds move, the diagram continuously renegotiates its structure. Cells expand, contract, gain neighbours, and disappear.
Voronoi diagrams have practical uses in computer graphics, mapping, logistics, astronomy, biology, and the study of spatial relationships.
Mathematics as a Creative Material
What interests me about these systems is the amount of visual richness that can emerge from compact rules.
The browser is doing more than playing back a prepared animation. It is calculating the image as it runs. The colours, curves, particles, cells, and boundaries are generated from the underlying mathematical process in real time.
Modern browser graphics also make it possible to render many of these calculations on the computer’s graphics processor. That provides the resolution and fluidity needed to turn an equation into something immersive, responsive, and capable of filling the screen.
There are countless other mathematical systems worth exploring. These ten examples are a starting point—and a reminder that some of the most striking visual designs are already hiding inside the rules that describe how things change.
For some other examples of how I’ve used animations and mathematically-based dynamic visuals for the web, check out Zirkal Kaleidoscope Videos, prtkl Music, or Rainer Willeke Music.
Interested in adding or improving dynamic visualizations in your web project? Reach out to me at Raindog Solutions.