JS canvas implementation of Julia set

Question

The problem is currently solved. In case some one wants to see the colored fractal, the code is here.

Here is the previous problem:

Nonetheless the algorithm is straight forward, I seems to have a small error (some fractals are drawing correctly and some are not). You can quickly check it in jsFiddle that c = -1, 1/4 the fractal is drawing correctly but if I will take c = i; the image is totally wrong.

Here is implementation.

HTML

<canvas id="a" width="400" height="400"></canvas>

JS

function point(pos, canvas){
    canvas.fillRect(pos[0], pos[1], 1, 1);  // there is no drawpoint in JS, so I simulate it
}

function conversion(x, y, width, R){   // transformation from canvas coordinates to XY plane
    var m = R / width;
    var x1 = m * (2 * x - width);
    var y2 = m * (width - 2 * y);
    return [x1, y2];
}

function f(z, c){  // calculate the value of the function with complex arguments.
    return [z[0]*z[0] - z[1] * z[1] + c[0], 2 * z[0] * z[1] + c[1]];
}

function abs(z){  // absolute value of a complex number
    return Math.sqrt(z[0]*z[0] + z[1]*z[1]);
}

function init(){
    var length = 400,
        width = 400,
        c = [-1, 0],  // all complex number are in the form of [x, y] which means x + i*y
        maxIterate = 100,
        R = (1 + Math.sqrt(1+4*abs(c))) / 2,
        z;

    var canvas = document.getElementById('a').getContext("2d");

    var flag;
    for (var x = 0; x < width; x++){
        for (var y = 0; y < length; y++){  // for every point in the canvas plane
            flag = true;
            z = conversion(x, y, width, R);  // convert it to XY plane
            for (var i = 0; i < maxIterate; i++){ // I know I can change it to while and remove this flag.
                z = f(z, c);
                if (abs(z) > R){  // if during every one of the iterations we have value bigger then R, do not draw this point.
                    flag = false;
                    break;
                }
            }
            // if the
            if (flag) point([x, y], canvas);
        }
    }
}

Also it took me few minutes to write it, I spent much more time trying to find why does not it work for all the cases. Any idea where I screwed up?

Answer 1

Good news! (or bad news)

You're implementation is completely. correct. Unfortunately, with c = [0, 1], the Julia set has very few points. I believe it is measure zero (unlike say, the Mandelbrot set). So the probability of a random point being in that Julia set is 0.

If you reduce your iterations to 15 (JSFiddle), you can see the fractal. One hundred iterations is more "accurate", but as the number of iterations increase, the chance that a point on your 400 x 400 grid will be included in your fractal approximation decreases to zero.

Often, you will see the Julia fractal will multiple colors, where the color indicates how quickly it diverges (or does not diverge at all), like in this Flash demonstration. This allows the Julia fractal to be somewhat visible even in cases like c = i.

Your choices are

(1) Reduce your # of iterations, possibly depending on c.

(2) Increase the size of your sampling (and your canvas), possibly depending on c.

(3) Color the points of your canvas according to the iteration # at which R was exceeded.

The last option will give you the most robust result.