Julia 设置 JavaScript

Question

我正在摆弄一些 Mandlebrot 布景，因为我认为它生成的图片很漂亮。我想我可以尝试解决用 javascript 绘制一个的问题，看看我能做什么。我研究了几个算法，即：

http://library.thinkquest.org/ 26242/full/progs/a2.html

我将其翻译为：

drawGraph: function(canvas,resolution,iterations,colors,coefficent){

                var context = canvas.getContext('2d');

                for(var m = 0; m < resolution.x; m++){
                    for(var n = 0; n < resolution.y; n++){
                        var x = m, 
                            x2 = x*x,
                            y = n, 
                            y2 = y*y;

                        var i;
                        for(i = 1; i < iterations; i++){
                            if(x2 + y2 > 4) break;

                            var new_x = x2 - y2 + coefficent.a;
                            var new_y = 2*x*y + coefficent.b;

                            x = new_x;
                            y = new_y;
                        }

                        var color = i % colors;

                        DrawUtils.drawPoint(context,m,n,color); 
                    }
                }
            }

它本质上绘制了一个颜色的盒子。

然后我尝试了这个：

http://en.wikipedia.org/wiki/Mandelbrot_set#Escape_time_algorithm

我翻译成这样：

drawGraph: function(canvas,resolution,iterations,colors,coefficent){

                var context = canvas.getContext('2d');

                for(var m = 0; m < resolution.x; m++){
                    for(var n = 0; n < resolution.y; n++){
                        var x = 0,
                            y = 0,
                            x0 = ((m/resolution.x) * 3.5) - 2.5,
                            y0 = ((n/resolution.y) * 2) - 1;

                        var i = 0;
                        while(x*x + y*y < 4 && i < iterations){
                            var x_temp = x*x - y*y + x0;
                            y = 2*x*y + y0;
                            x  = x_temp;
                            i++;
                        }

                        var color = 0;
                        if(x*x + y*y >= 4){
                            color = i % colors;
                        }

                        DrawUtils.drawPoint(context,m,n,color);
                    }
                }
            }

它产生一个黑匣子。算法中的措辞有点让我困惑，因为它说 x0 和 y0 缩放是像素的因子，但在算法之后，它说系数 c = x0 + iy0;那么，这是否意味着我没有将预定系数传递给函数？

对于大多数测试，我使用系数 0.25 + 0i，但我尝试了其他产生完全相同结果的系数。

我在这里做错了什么？

Answer 1

第一点：你需要清楚Julia集和Mandelbrot集之间的区别。两者都是对迭代下 f(z) = z^2 + c 行为的见解，但视角不同。

对于 Julia 集合，我们修复 c 并绘制不同初始 z 的行为图

对于 Mandelbrot设置后，我们绘制了相同的初始 z = 0 对于不同 c 的行为方式图。

解决了这个问题...

---

对于您的第一个代码（它尝试为 coefficient 中的 c 绘制 Julia 集），您从第一页中的 BASIC 翻译而来链接不太正确。哪里有

' 遍历屏幕上的每个点，设置 
' m 和 n 为坐标
FOR m = x_最小值 TO x_最大值 步骤 x_分辨率
             FOR n = y_最小值 TO y_最大值 步骤 y_分辨率
                          ' 初始 z 值是当前像素，  
                          ' 所以 x 和 y 必须设置为 m 和 n
                          x = m: y = n

你有

 for(var m = 0; m <分辨率.x; m++){
            for(var n = 0; n < 分辨率.y; n++){

这很接近，但关键的一点是您没有采取任何步骤来实现 STEP x_resolution。您的 m 是一个整数，从 0 到 resolution.x - 1，步长为 1;并且您的 x 设置为 m。

因此，您不是查看从 -2-2i 到 2+2i 的复平面（查看 Julia 集的一个不错的视口），而是查看复平面从 0 到 resolution.x + resolution.y i 的平面，该平面最多在其左下角设置几个像素。

---

第二个代码（尝试绘制 Mandelbrot 集）确实具有缩放到正确范围的代码，并且我无法立即看到出了什么问题 - 我会调试并查看是否m /resolution.x 始终为 0，正如 @user973572 所暗示的可能是问题所在。

Answer 2

在你的第一个例子中，我认为你忘记更新 x2 和 y2 所以它们总是相同的值。在检查总和是否大于4之前，您需要更新x2和y2。类似的事情

for(i = 1; i < iterations; i++){
    x2 = x*x,
    y2 = y*y
    if(x2 + y2 > 4) break;

可能是错误的，因为我对javascript一无所知。