How to explore the Mandelbrot set using HTML5

  • Article

The Mandelbrot set is one of the most complex and beautiful mathematical objects known. Using HTML5 Canvas, File API, touch (Pointer and gesture events), and Web Workers, this tutorial will show you how to create (often stunning) Mandelbrot images similar to the following:

In this section

Topic Description

A brief overview of the Mandelbrot set

This topic provides a basic overview of the Mandelbrot set.

An initial rendering of the Mandelbrot set using canvas

Building on information presented in A brief overview of the Mandelbrot set, we describe here a basic method for rendering the Mandelbrot set using canvas.

Mapping screen coordinates to the complex plane

Building on information presented in An initial rendering of the Mandelbrot set using canvas, here we look at how to map screen coordinates to the complex plane.

Simplifying zoom box implementation

Building on information presented in Mapping screen coordinates to the complex plane, here we look at how to rewrite Mandelbrot 1 in order to simplify the implementation of the zoom box feature.

Implementing a zoom box

Building on information presented in Simplifying zoom box implementation, we discuss here a possible Mandelbrot zoom box implementation.

Adding Mandelbrot image grayscale

Building on information presented in Implementing a zoom box, here we describe how to add 255 possible shades of gray to a black and white image of the Mandelbrot set.

Enabling the back and forward buttons

Building on information presented in Adding Mandelbrot image grayscale, we describe here how to enable the browser's back and forward buttons.

Saving canvas images locally

Building on information presented in Enabling the back and forward buttons, we discuss here how to save a canvas image of the Mandelbrot set locally, using Internet Explorer 10.

Enabling touch

Building on information presented in Saving canvas images locally, we describe here how to enable touch support (plus one gesture), using Internet Explorer 10.

Leveraging web workers

Building on information presented in Enabling touch, here we discuss how to improve performance by using Web Workers.

Mandelbrot Explorer

Building on information presented in Leveraging web workers, here we learn how to improve Mandelbrot 8 to produce the final version - Mandelbrot Explorer.