Julia集的JS画布实现

Posted 2023-04-18

技术标签:

【中文标题】Julia集的JS画布实现【英文标题】：JS canvas implementation of Julia set 【发布时间】：2013-11-09 09:27:57 【问题描述】：

问题目前已解决。如果有人想查看彩色分形，the code is here。

这是上一个问题：

尽管如此，算法是直截了当的，但我似乎有一个小错误（有些分形绘制正确，有些则没有）。您可以在jsFiddle 中快速检查它 c = -1, 1/4 分形绘制正确，但如果我要 c = i;图片完全错误。

这里是实现。

HTML

<canvas id="a"  ></canvas>

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

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

【问题讨论】：

【参考方案1】：

好消息！（或坏消息）

你的实现是完全的。正确的。不幸的是，对于c = [0, 1]，Julia 集的点数很少。我相信它是measure zero（不像说，Mandelbrot 集）。所以随机点在那个 Julia 集中的概率是 0。

如果您将迭代次数减少到 15 (JSFiddle)，您可以看到分形。 100 次迭代更“准确”，但随着迭代次数的增加，400 x 400 网格上的一个点被包含在分形近似中的机会减少到零。

通常，您会看到 Julia 分形有多种颜色，其中颜色表示它发散的速度（或根本不发散），例如 Flash demonstration。这使得 Julia 分形即使在 c = i 之类的情况下也有些可见。

你的选择是

(1) 减少迭代次数，可能取决于c。

(2) 增加采样（和画布）的大小，可能取决于c。

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

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