Overview



Fractal Explorer generates the Mandelbrot and Julia fractal sets, with unique display options and dynamic visual effects setting it apart from other fractal viewers.

Try the Fractal Explorer →

Design and Implementation


The Mandelbrot and Julia sets are popular fractal sets, with simple equations producing spectacular and detailed patterns. Although fractal viewers are fairly common, there were some additional features I wanted which were not available. This led me to develop the Fractal Explorer.

The main technical consideration was to enable real-time rendering in a web browser on standard consumer devices. This requires GPU acceleration via WebGL. Fractal viewers typically prioritize deep zoom capabilities, which can only be achieved with a high level of floating point precision, such as 64 bit floats. WebGL is limited to 32 bit floats, and workarounds for more precision require significantly more processing so can't update in real time. There is already an abundance of slow and static 64 bit Mandelbrot viewers. While there are some using native 32 bits for immediate rendering, none have a focus on generating dynamic real-time visuals. That is what sets this fractal viewer apart from others - an emphasis on real-time rendering and unique effects, rather than deep zoom and high iteration counts.

An unusual choice I made was to render the Mandelbrot set ‘upright’. The orientation of the set is entirely arbitrary, convention dictates that it is always rendered in the ‘sideways’ position. I much prefer the vertical symmetry of the upright version, and so I have rendered it as such. Coordinates are still displayed and calculated with the conventional values. The reason for this apparent mismatch is that there are certain coordinates which are well known to provide interesting visuals, so the ability to use those coordinates was retained.


Iterations overlay
Geometric patterns in the iterations overlay
Pixelated Mandelbrot
Pixelation caused by floating point imprecision
Sidebar display
Sidebars can be hidden to preserve screen space

The 'iterations' overlay shows the coordinates of each iteration of the equation from a given point. I encountered it during my research and found it to be one of the most interesting aspects of the Mandelbrot set. It is not typically included in fractal viewers. This feature gives a deeper conceptual understanding of how the images are formed. The overlay calculations are performed on the CPU with JavaScript, rather than the GPU with WebGL. Performance cost is modest since it only has to run the calculations for a single coordinate.

The primary UI consideration was how much functionality would be user-exposed. Given the technical nature of the topic, it seemed reasonable to prioritize unique and advanced features over accessibility. It was imperative that most of the screen space was reserved for the main viewing window, so this presented a challenge - how to offer advanced user controls while preserving screen space, without hiding them behind convoluted menus and keyboard shortcuts. I solved this by having all controls contained within two sidebar menus, which can both be collapsed to free the entire window for the fractal displays.

In future I plan to expand the animation capabilites with variable easing curves and additional timing options. This program was initially being written in C, which can render even highly detailed 64 bit images in real time with a shader language like GLSL. I have temporarily shifted focus to this web-based version, but eventually I plan to return to the C version to complete my most ideal version of the fractal explorer.

Fractal Explorer on GitHub ↗