Note: For best experience, please view this on a larger screen, i.e., desktop or a tablet. Although it is responsive, because of the interactive elements it becomes uneasy to use.
Pan Controls.
Zoom Controls.
This is an interactive mandelbrot fractal explorer built using GLSL shaders and P5.JS. Fractals have always intrigued me and I have made a Mandelbrot set before at different levels and zooms. But this is the first one that is both interactive and web based.
Controls are simple, you just need to channel your inner gamer.
The term fractal was coined by Benoit Mandelbrot in 1975. In his book "The Fractal Geometry of nature", he describes fractals as irregular and fragmented across different scales. More technically, he defines fractals as "any set in a Euclidean space with a non-integer dimension." To get more insight into what fractal dimensions are, check out 3B1B video on fractals.
More generally, fractals can be described as infinitely detailed, complex patters that are self similar across different scales.
Mandelbrot set is probably the most recognizable fractal, name for Mandelbrot himself. A Mandelbrot set is a fractal pattern that emerges, when a set of complex numbers are iterated through a function and tested for their boundedness. If the number is bounded, you give it one color and if it tends to infinity, you give it a different color. The function is a complex quadratic polynomial, see below.
\(z_{n+1} = z_n^2 + C\)
Here, \(C\) is a complex number and \(z_0 = 0\). Each point in the complex plane, usually with in the range of \((-2,2)\) on the real axis and \((-1.5, 1.5)\) on the imaginary axis is iterated. The escape value and the number of iterations need to be defined. If the value of \(z_{n+1}\) is less than 2 after the maximum allowed iterations, it is considered to be bounded. All the numbers that are bounded are part of the Mandelbrot set.
The detail of the fractal increases with increase in the number of iterations but too many iterations puts most of the points outside of the set, so balancing it with zoom level gives better results.
There are many resources online that discuss Mandelbrot set in detail, my favorite is the numberphile video. Check it out, link in the references.
Here, the zoom level is not too high because, the Mandelbrot set is computed using GLSL shaders which runs on the GPU. So, we run into floating point limitations before we can make the infinite zoom 4K render and put on youtube. I still don't know how to make it fast like shaders and increase the level of zoom. I'll have to figure that one out.
for each pixel (Px, Py) on the screen do
x0 := scaled x coordinate of pixel (scaled to lie in the Mandelbrot X scale (-2.00, 0.47))
y0 := scaled y coordinate of pixel (scaled to lie in the Mandelbrot Y scale (-1.12, 1.12))
x := 0.0
y := 0.0
iteration := 0
max_iteration := 1000
while (x*x + y*y ≤ 2*2 AND iteration < max_iteration) do
xtemp := x*x - y*y + x0
y := 2*x*y + y0
x := xtemp
iteration := iteration + 1
color := palette[iteration]
plot(Px, Py, color)
This interactive app was made using the P5.js library. Its an open source creative coding platform. The source code for this can be found on my github. Here is the link - Mandelbrot-wShaders.
I also made a standalone webapp for this. It fits in one page. There is less to read and more room to play. Here is the link - Live Mandelbrot Explorer.