Javascript Julia集的jscanvas实现

问题目前已解决。如果有人想看到彩色分形

这是前面的问题：

尽管如此，该算法是直接的，我似乎有一个小错误（有些分形图绘制正确，有些不正确）。你可以很快检查它，c=-1，1/4，分形图绘制正确，但如果我取c=I；图像完全错误

这里是实现

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

功能点（pos、画布）{
fillRect（pos[0]，pos[1]，1，1）；//JS中没有绘图点，所以我模拟了它
}
函数转换（x，y，width，R）{//从画布坐标到XY平面的转换
var m=R/宽度；
var x1=m*（2*x-宽度）；
变量y2=m*（宽度-2*y）；
返回[x1，y2]；
}
函数f（z，c）{//计算具有复参数的函数的值。
返回[z[0]*z[0]-z[1]*z[1]+c[0]，2*z[0]*z[1]+c[1]]；
}
函数abs（z）{//复数的绝对值
返回Math.sqrt（z[0]*z[0]+z[1]*z[1]）；
}
函数init（）{
变量长度=400，
宽度=400，
c=[-1，0]，//所有复数的形式为[x，y]，表示x+i*y
maxIterate=100，
R=（1+Math.sqrt（1+4*abs（c））/2，
Z
var canvas=document.getElementById（'a'）.getContext（“2d”）；
var标志；
对于（变量x=0；xR）{//如果在每一次迭代中，我们的值都大于R，不要画这个点。
flag=false；
打破
}
}
//如果
if（标志）点（[x，y]，画布）；
}
}
}

而且我花了几分钟来写它，我花了更多的时间试图找出为什么它不适用于所有的情况。知道我在哪里搞砸了吗？

好消息！（或坏消息）

你是说，实现是完全正确的。对的不幸的是，对于

c=[0，1]

，Julia集的点数很少。我相信是的（不像曼德尔布罗特集）。所以随机点在Julia集中的概率是0

如果将迭代次数减少到15（），则可以看到分形。一百次迭代更“精确”，但随着迭代次数的增加，400 x 400网格上的一个点包含在分形近似中的可能性降低到零

通常，您会看到Julia分形包含多种颜色，其中颜色表示它发散（或根本不发散）的速度，如下图所示。这使得Julia分形在某种程度上是可见的，即使在c=i的情况下也是如此

你的选择是

（1） 减少迭代次数，这可能取决于

c

（2） 可能根据

c

增加采样（和画布）的大小

（3） 根据超过

R

的迭代为画布上的点上色

最后一个选项将为您提供最可靠的结果