Mathematical Art
Mandelbrot is based on the iterative formula 'z_{n+1} = z_n^2 + c'. It checks for every point in the complex plane whether the sequence remains stable or escapes to infinity. Advantage: Known as the 'Apple Man', it is the mother of all fractals, offering infinite variety and self-similar structures to zoom into forever. Wikipedia
Julia uses the same formula as Mandelbrot but fixes the parameter 'c' and varies the starting value. Depending on the choice of 'c', it creates delicate, cloud-like structures or disconnected 'dust'. Advantage: Allows for immense aesthetic variance, as every coordinate in the Mandelbrot set produces its own unique Julia fractal. Wikipedia
Burning Ship is a variation of the Mandelbrot set where the absolute values of the real and imaginary parts are taken before each iteration: '(|Re(z)| + i|Im(z)|)^2 + c'. Advantage: Generates a striking, asymmetrical structure resembling a ship on fire. It feels more 'mechanical' and darker compared to the classical sets. Wikipedia
Newton is created by visualizing Newton's method for finding roots of a complex function. Each pixel is colored based on which root the algorithm converges to. Advantage: Produces fascinating star-shaped symmetries and complex boundaries where the attraction basins of the roots meet in a chaotic dance. Wikipedia
Original work
- Benoit B. Mandelbrot (1980): Fractal aspects of the iteration of z → λz(1−z) for complex λ and z
- Gaston Julia (1918): Mémoire sur l'itération des fonctions rationnelles
- Michael Michelitsch, Otto E. Rössler (1992): The "burning ship" and its quasi-Julia sets
- Arthur Cayley (Newton's method on the complex plane) (1879): The Newton-Fourier imaginary problem
How it works
The image is a fragment shader (GLSL) on a full-screen quad in Babylon.js. Each pixel computes its own sequence: for Mandelbrot, Julia and Burning Ship z → z² + c until |z|² > 4 or the maximum iteration count is reached (escape-time algorithm). Newton iterates z → z − (z³ − 1) / (3z²) and colors by the root the pixel converges to.
- The CPU sends only uniforms per frame: center, zoom, maximum iterations, algorithm, color scheme and the Julia constant. The GPU computes all pixels in parallel; cost O(pixels · iterations).
- The maximum iteration count grows with the zoom: 100 + 200 · log10(zoom), so up to about 1,060 at the maximum zoom of 64,000.
- Zooming with the mouse wheel keeps the point under the cursor fixed: its world point is set equal before and after the zoom and the center is moved accordingly.
- The color comes from the ratio iterations / maximum; points that never escape stay black.
- Under WebGPU Babylon.js translates the same GLSL shader to WGSL; there is no separate compute path.
Source code:fractal.shader.tsfractal-view.ts
Note All these fractals are based on the principle of iteration and the butterfly effect. This means for your visualization:
- Infinite Depth: No matter how far you zoom in, new complex structures appear that often resemble the whole (self-similarity).
- Escape-Time Algorithm: Colors usually represent how quickly a sequence exceeds a certain threshold—the faster it escapes, the 'hotter' or brighter the color.
- Complex Numbers: Calculations don't happen in a standard coordinate system, but in the complex plane using real and imaginary components.
- Computational Load: Since hundreds of calculations are performed for every single pixel, fractals are a classic benchmark for GPU and processor performance.
Graphics cards calculate with 32-bit floating point numbers (float) by default. These only have about 7 digits of accuracy. At very high zoom levels (> 100.000), the difference between two pixels is so tiny that the graphics card can no longer display it. It calculates exactly the same value for 10 pixels next to each other -> you see blocks or stair steps.
