3

我在摆弄一些 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,但我尝试了其他产生完全相同结果的测试。

我在这里做错了什么?

4

2 回答 2

4

第一点:你需要清楚 Julia 集和 Mandelbrot 集之间的区别。两者都是对欠迭代行为的洞察f(z) = z^2 + c,但从不同的角度。

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

对于Mandelbrot集,我们绘制了相同初始z = 0值对不同cs 的行为图。

有了这个解决...


对于您的第一个代码(尝试为cin绘制 Julia 集coefficient),您从链接到的第一页中的 BASIC 进行的翻译不太正确。哪里有

‘ run through every point on the screen, setting 
‘ m and n to the coordinates
FOR m = x_minimum TO x_maximum STEP x_resolution
             FOR n = y_minimum TO y_maximum STEP y_resolution
                          ‘ the initial z value is the current pixel,  
                          ‘ so x and y have to be set to m and n
                          x = m: y = n

你有

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

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

因此,不是从 say -2-2ito 2+2i(查看 Julia 集的一个不错的视口)查看复平面,而是查看从0to的复平面resolution.x + resolution.y i,它的左下角最多设置几个像素。


第二个代码(尝试绘制 Mandelbrot 集)确实有代码可以缩放到正确的范围,我无法立即看到出了什么问题 - 我会调试并查看是否m/resolution.x总是0,正如@user973572 建议的那样可能是问题.

于 2011-10-19T09:07:21.377 回答
2

在您的第一个示例中,我认为您忘记更新 x2 和 y2 ,因此它们始终是相同的值。在检查总和是否大于 4 之前,您需要更新 x2 和 y2。类似于

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

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

于 2011-10-18T04:03:28.140 回答