Mandelbrot Set with WebGL
Plotting the Mandelbrot set with a GLSL fragment shader.
I’ve translated the code I wrote for plotting the Mandelbrot set with p5.js to a GLSL 1.0 fragment shader. The main difference is that I’m using vec2
to represent complex numbers, which makes things a bit more concise.
Grayscale
In this version we’re mapping the number of iterations for each pixel (in the range [0, maxIterations]
) to a brightness value (in the range [0, 1]
).
Histogram
In this version we’re mapping the number of iterations for each pixel (in the range [0, maxIterations]
) to a color, using these two functions:
vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
return a + b * cos(6.28318 * (c * t + d));
}
vec3 color(float t) {
vec3 a = vec3(0.5);
vec3 b = vec3(0.5);
vec3 c = vec3(1.0);
vec3 d = vec3(0.0, 0.1, 0.2);
return palette(fract(t + 0.5), a, b, c, d);
}
How the heck does that code generate a color palette? Read this article by its author, Iñigo Quilez.
Continuous
This version uses an algorithm known as normalized iteration count to smooth the transition between colors. The formula for obtaining that fractional count is:
Applying some vector and logarithm rules, we can turn it into what you see in my code: