Category Archives: html5

The Mandelbrot set in an html5 canvas

The Mandelbrot set is one of the pieces of mathematics behind the iconic fractal images of the 80s and 90s, and here I present how to render it on an html5 canvas, entirely in the browser.

The full mathematics of the Mandelbrot set are beyond the scope of this post, but can be found here. For our purposes, all we need to know is that we are dealing with a set of numbers – that is, every possible number either belongs to, or does not belong to, the set.

The Mandelbrot set deals with complex numbers – that is, numbers which have both a real and imaginary component. When we plot a fractal 2 dimensional image, each point represents a number, with a real component plotted in the horizontal axis, and the imaginary component plotted in the vertical axis (both purely by convention).

So, to render the image, we need to take every point within the image, determine which complex number it represents, determine whether or not that complex number belongs to the set, and colour it accordingly.
Read more …