JS画布实现Julia set

Sal*_*ali 5 javascript canvas fractals

这个问题目前已经解决了.如果有人想看到彩色分形,代码就在这里.

这是以前的问题:

尽管如此,算法是直截了当的,我似乎有一个小错误(一些分形正确绘制而一些分形不正确).您可以在jsFiddle中快速检查c = -1,1/4分形正确绘制但是如果我将c = i; 图像是完全错误的.

这是实施.

HTML

<canvas id="a" width="400" height="400"></canvas>
Run Code Online (Sandbox Code Playgroud)

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);
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

我花了几分钟写它,我花了很多时间试图找到为什么它不适用于所有情况.知道我搞砸了吗?

Pau*_*per 5

好消息!(或坏消息)

你的实现是完全的.正确.不幸的是,c = [0, 1]朱莉娅集合中只有很少的分数.我相信它是零度量(不像说,Mandelbrot集).因此,Julia集中随机点的概率为0.

如果将迭代次数减少到15(JSFiddle),则可以看到分形.100次迭代更"准确",但随着迭代次数的增加,400 x 400网格上的点将包含在分形近似中的几率降低到零.

通常情况下,您会看到Julia分形会有多种颜色,其中颜色表示它有多快发散(或者根本不发散),就像在Flash演示中一样.即使在像c = i的情况下,这也允许Julia分形在某种程度上可见.

你的选择是

(1)减少你的迭代次数,可能取决于c.

(2)增加采样(和画布)的大小,可能取决于c.

(3)根据R超出的迭代次数着色画布的点.

最后一个选项将为您提供最强大的结果.