A basic rendering of the famous fractal known as the Mandelbrot Set, which was used as the background image for this website. The details of how this project are implemented will unfortunately require an understanding of React, but it doesn't mean you can't appreciate the Mandelbrot Set.

While somewhat of an ironic project given this is the type of rendering React is clearly not optimised for, this provides a means for React developers to easily render a decent quality Mandelbrot set image without the need for learning more up-to-the-task libraries like OpenGL or Pillow. In the future I may invest the time into learning these libraries to do a proper animation.

If you're wondering how such beautiful images get rendered simply by mathematics, I won't be able to do the explanation anymore justice than this article here. For those who aren't interested in the mathematical details, it repeatedly applies a specific function (f(z) = z² + c, if you were interested) to all points in a plane (in particular the complex plane) and those which diverge to become infinitely large are coloured differently to those that don't - depicting the Mandelbrot Set.

As for how this is done in React, the implementation itself is at this page, there is also a raw html render in the root directory. To render the points it uses the HTML Canvas component. The details of how canvas elements work are somewhat necessary to fully understand how this works. The component defines a 'draw' function which takes the current frame and canvas reference to modify the actual graphics on the screen - by applying the Mandelbrot function to each graphical point many times. In order to actually animate the set and zoom in somewhere, we use a useEffect which is called each time we draw, therefore repeating the process and calling a render function inside each time. Do note that the animation is extremely slow - as I said this is something React is not optimised for.

Some of the final product renders can be seen below. The first one is actually not quite the Mandelbrot Set, and something I rendered by accident when I implemented the Mandelbrot logic incorrectly - making it unique (as far as I can tell, probably not though) but I find that quite poetic. If you wish to do a render yourself, modify the "const dx" and "const dy" lines to zoom in on particular areas. I've labelled some interesting points above those lines. To be frank though, I'd advise just using the HTML render, it's less gimmicky and probably faster.