Color Pixels as Points

About

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.

Structural flow

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.

Use

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)";
}

The Mandelbrot Example

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.