Mandelbrot set

Filed under Fractals, Mathematics on January 28, 2025. Last updated on January 28, 2025.

toc

• Let's play!
• Mandelbrot set
• Iterated function
• Zooming
• Julia set
• Miscellaneous

Let's play!

If you don't know what these parameters are, you can read this article and then try them out!

Mandelbrot set

There are two significant parameters to define a Mandelbrot Set: the start point $z$, and constant $c$.

In order to render the Mandelbrot shape, we need to calculate the number of iterations for each point and then render different iterations in different colors.

Iterated function

1. Set a Maximum Number of Iterations. Without this cap, certain points may prevent the algorithm from converging.
2. Define a Break Condition. While the specific break condition can vary, it is essential to have at least one condition to terminate the loop.

function f(z: Complex, c: Complex) {
    return z.mul(z).add(c);
}

function iterateF(z: Complex, c: Complex, maxIterations: number): number {
    let i = 0;
    while (i < maxIterations) {

        if (z.abs() > 2) {
            break
        }
        z = f(z, c);
        i++;
    }
    return i;
}

function mandelbrot(c: Complex, maxIterations: number): number {
    let z = new Complex(0, 0);
    return iterateF(z, c, maxIterations)
}

I will omit the rendering implementation for now, as it is time-consuming and not essential. By iterating through each point on the plane, we will generate the default Mandelbrot set.

Zooming

To observe the boundary of the Mandelbrot set, I added interactive components that allow me to adjust the offsets and scales.

The scale, X offset, and Y offset should be intuitive. All the steps of these values can be adjusted separately by using coefficients and exponents with a base of $0.1$.

Because I mapped iterations directly to hue, resulting in limited color differences, I introduced a colorScale parameter to enhance color variation.

const { r, g, b } = hslToRgb(iterations * colorScale, 100, 50);

Julia set

When I read the definition of the Julia set, I realized that it is almost identical to the Mandelbrot set. In the Mandelbrot set, the initial value of $z$ is $(0,0)$, and we iterate using a varying constant $c$. In the Julia set, we fix the value of $c$ and iterate using different initial values of $z$.

z = new Complex(re, im)
if (e.data.fnType === "mandelbrot") {
    fn = (c: Complex, maxIterations: number) => {
        return iterateF(z, c, maxIterations) 
    }
} else if (e.data.fnType === "julia") {
    fn = (c: Complex, maxIterations: number) => {
        return iterateF(c, z, maxIterations) 
    }
} else {
    fn = mandelbrot
}

Miscellaneous

There are several factors that can impact the outcome of the Mandelbrot set visualization. I may update this article with more information on them later.