Julia set explorer
December 19, 2020
A live demo of this shader is available on ShaderToy. You can select a point on the Mandelbrot set to see the corresponding Julia set. If the mouse is not used, the point follows a path along the main cardioid. The selected point is displayed in red.
Everyone who starts making fractals, usually starts with rendering the Mandelbrot set. If this is rendered on the CPU, per pixel, it will usually take quite some time to render the image. This problem is better suited to be calculated on the GPU, in parellel, and using GLSL (a programming language for shaders) is an efficient method to do this. Actually, rendering the Mandelbrot set with GLSL, can be seen as the hello world of GLSL.
The Mandelbrot set is calculated with the following iterated function $$ z_{n+1} = z^2 +c, $$ where $z$ and $c$ are complex numbers. I am not going to explain how complex arithmetic works, there are plenty of resources already available. To render it, $z$ would be set to $0$, and $c$ is the normalized pixel position written as a complex number.
Julia set
The Julia set can be found when $z$ is set to the normalized pixel position, and $c$ is a fixed position. If for example, we let $c = (-0.161, 0.6483)$, the following Julia set will be rendered:
Something which I find very fascinating is that if we look at a region in the Mandelbrot set, the Julia set for that region will display the same patterns. In essence, the Mandelbrot can be seen as the super version of all Julia sets. In this perspective, the Mandelbrot is essentially a map for all the Julia sets.
Knowing this, I always wanted to make a shader where you can choose a point in the Mandelbrot set, and see the corresponding Julia set. With this shader, I have finally created exactly that.
The main cardioid
Another thing I always wanted to do, is let the point follow a path along the main cardioid. This way, the most interesting Julia sets can be seen with a cool animation. I found a method to find the main cardioid on this website. The main cardioid is located at $$ c = \frac{\textrm{e}^{i\theta}}{2} - \frac{\textrm{e}^{2i\theta}}{4}, $$ where $\theta \in [0, 2\pi]$. Because GLSL doesn't handle complex numbers this way, it can also be rewritten as: $$ c = \frac{1}{4}\left(2\cos\theta-\cos(2\theta)\right) + i\sin(\theta)\sin^2\left(\frac{\theta}{2}\right) $$ If we plot this with Desmos, we will indeed see that it is the cardioid:
