\(\leq x\leq\)

\(\leq y\leq\)

Discretize with
\(\times\)
pixels

Number of Workers

This tool is an interface for some javascript that colors pixels on an HTML canvas element. In order to use it, you should be somewhat familiar with the javascript language.

On the left, there is a code window, where you can write any javascript you want, and underneath, there are various display settings. When the "run" button is clicked, the following happens:

- the javascript code that is written in the code window is evaluated completely
- display settings are saved
__If your browser allows web workers:__- The number of workers specified will be created and be given different ranges of the output image to compute asynchonously.
- Each web worker is given a starting location (pixel column), the number of columns to compute, your inputed code string, and other necessay display settings.
- Each worker then re-evaluates the code string, and iterate over the "stripe" of the image that it was assigned, building a two dimmensional array of colors using the function
`color(p)`

specified in the code window. - When the computation is finished, the color data array is sent back, and the colors are placed on the output canvas.
__If your browser doesn' support web workers,__the computation described above is done on this page, all at once, and colors are not stores in arrays before being put on the canvas.

Any javascript can be entered in the code window, but it is important that the function `color(p)`

is defined, where the argument `p`

(a point) is a javascript object with fields `x`

and `y`

, and the return value is a valid color string. For example, if we wanted to color all of the points with x coordinate greater than 1 `"black"`

, and the rest `"red"`

, one way to define `color(p)`

is as follows.

function color(p) { if (p.x > 1) { return "black"; } return "rgb(255, 0, 0)"; }

Since complex numbers are not native in javascript, it is simplest to do all calculations as though we consider complex numbers ordered pairs of real numbers with special operations defined on them. The function `mandelbrot(p)`

is a coloring function that gets called from `color(p)`

simply to allow for changing `color(p)`

without deleting `mandelbrot(p)`

.

The algorithm for coloring the Mandelbrot set on the plane is better described elsewhere, but the main idea is to test each complex number \(c\) to see if the limit of infinite seuence generated by iteration of the function \(f_c:\mathbb{C}\to\mathbb{C}\) given by \(f_c(z)=z^2+c\), with the initial point \(z=0\), is bounded (in which case \(c\) is in the set) or grows without bound (in which case \(c\) is not in the set).

To speed up computation, the function `mandelbrot(p)`

first tests if `p`

is inside either the first or second bulb of the Mandelbrot set directly. If it is, `mandelbrot(p)`

returns `"black"`

, and if it is not, it continues to iterate the function described earlier.

There are many beautiful ways to color the Mandelbrot set: the sceheme used here colors all of the points that are approximated to be in the set black, while the other points are colored corresponding to how long (how many iterations, \(i\)) it took before the modulus of \(f^i_c(0)\) is greater than 2 (in which case it is certain that \(c\) is not in the Mandelbrot set). The colors used are cycled through, and are given in the array `ULTRA_FRACTAL_COLORS`

, which is available for your use as well.

Copyright © 2020 Peter E. Francis