View more at: algo-scope.online

Generating Fractal Images with TypeScript

I’ve long been fascinated by fractal images with their intrinsic patterns and cool colors. Underneath these images lies elegant math and recursive functions. In this post, we’ll learn what fractal images are, how we can generate them, and what their real-world applications are.

History

Benoît B. Mandelbrot coined the term “fractal” in 1975. He used “fractal” to describe shapes that could not be defined by traditional Euclidean geometry but could be modeled with recursive functions.

How to Generate Fractal Images

Fractal images are generated using algorithms by applying recursive transformations. Take the Mandelbrot set for example:

\[z\_{n+1} = z_n^2 + c\]

Where:

• The Mandelbrot set is the set of all complex numbers $c$ for which the sequence is defined by the recurrence relation.
• Start with $z_0 = 0$
• Keep computing $ z_1 = z_0^2 + c $, then $z_2 = z_1^2 + c$, and so on
• If the magnitude $|z_n|$ stays bounded (meaning it does not go to infinity), then $c$ is in the Mandelbrot set. Mathematically: $ c \in \mathbb{C} \text{ is in the Mandelbrot set if } \lim_{n \to \infty} |z_n| < \infty $.

private mandelbrot(x0: number, y0: number): number {
  let x = 0;  // Real part of z
  let y = 0;  // Imaginary part of z
  let iteration = 0;

  while (x * x + y * y <= 4 && iteration < this.maxIterations) {
    const xTemp = x * x - y * y + x0;  // Real part of z² + c
    y = 2 * x * y + y0;                // Imaginary part of z² + c
    x = xTemp;
    iteration++;
  }

  return iteration;
}

Rendering the Fractal

As with some of the other visualizations on Algo-Scope.online, we apply d3.js for rendering for better controls and zooming. Here is an example:

function renderFractal(
  svg: d3.Selection<SVGSVGElement, unknown, null, undefined>,
  data: FractalPoint[],
  maxIterations: number,
) {
  const colorScale = d3
    .scaleSequential(d3.interpolateViridis)
    .domain([0, maxIterations]);

  svg
    .selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d) => d.x)
    .attr("y", (d) => d.y)
    .attr("width", 1)
    .attr("height", 1)
    .attr("fill", (d) => colorScale(d.value));
}

More examples (Julia, Newton, etc.) can be found on algo-scope for you to experiment with.

Applications of Fractals

Fractals aren’t just mathematical curiosities; they have a wide range of applications across many fields such as art and design, computer graphics, medicine, signal processing, and last but not least, finance.

In the art world, fractal generative art uses algorithms to create visually stunning and intricate pieces.

View the original

In finance, fractals are often used to model market fluctuations due to their irregular but self-similar behavior over time. As Mandelbrot acutely pointed out, financial markets exhibit “fractality”, where patterns of volatility repeat across time scales - from seconds to years.

The Financial Market Hypothesis (FMH) is a theory suggesting that markets are influenced by the collective behavior of investors acting on different time horizons. Hurst Exponents and multifractal models are used to detect persistent trends or volatility clustering, which are not captured by linear models.

Conclusion

This is an introduction to fractal images, where we get a taste of the math behind them and how to generate fractal images. In later series, we will take a look at some more advanced examples such as the Newton fractal. We will also dive into some practical aspects of how to properly deploy fractals on the web using TypeScript and making them interactive. There are some performance implications to this approach. How can we leverage web workers for parallel processing, how to render complex images progressively, how to apply adaptive iteration limits, and of course, caching and memoization.

The beauty of fractals by nature is also recursive. It bridges math and visual art and deserves our attention.

Thanks for reading and happy Sunday!