javascript - 生成Mandelbrot集的一些问题

Question

我编写了一个处理程序来生成 mandelbrot 集并且成功了，但是一旦我将 c 更改为一个常量复数，我的程序就无法获得任何模式。我一定是有一个盲点，因为我似乎无法调试我的程序。大家可以给我一些建议吗？谢谢!

mand 函数中注释掉的行是我尝试更改 c 值的方式，但到目前为止，除了生成 Mandelbrot 集之外，我从未能够获得任何类型的模式。

function setup() {
  createCanvas(600, 600);
  background(200);
  noLoop();
}

function draw() {
  translate(width/2, height/2);
  loadPixels();
  for (let x=0; x<=width; x++) {
    for (let y=0; y<=height; y++) {
      a=map(x, 0, width, -2.5, 1);
      b=map(y, 0, height, -1, 1);
      z=new Complex(a, b);
      f = (mand(z))
      //i = map(f,1,100,0,255);
      pixels[(x+y*width)*4]=sqrt(f/100);
      pixels[(x+y*width)*4+1]=255;
      pixels[(x+y*width)*4+2]=150;

    }
  }
  updatePixels();
}

var Complex = function(a, b) {
  this.re=a;
  this.im=b;
  this.modSq=(a*a+b*b);
}

Complex.prototype.square = function() {
  a=sq(this.re)-sq(this.im);
  b=2*this.re*this.im;
  return new Complex(a, b);
}

function mand(c) {
  oldZ=new Complex(0, 0);
  for (let i=1; i<=100; i++) {
    newZ=oldZ.square();
    newZ.re+=c.re;
    newZ.im+=c.im;
    //newZ.re+= -0.70176;
    //newZ.im+= -0.3842;
    oldZ=newZ;
    if (oldZ.modSq>=4) {
      return i
    }
  }
  return 0
}

Answer 1

颜色 channel 的值必须在 [0, 255] 范围内。 Mandelbrot 的结果 f分形函数是任意数字，大部分结果是小于 1.0 的数字，但该函数也返回非常大的数字。
您必须将此值映射到像素的颜色。

我建议计算 [0.0, 1.0] 范围内的颜色值:

cR = Math.min(sqrt(f/100.0), 1);
cG = Math.min(sqrt(f/50.0), 1);
cB = Math.min(sqrt(f/10.0), 1);

最后将它们映射到 [0, 255] 范围内:

pixels[(x+y*width)*4]   = cR * 255;
pixels[(x+y*width)*4+1] = cG * 255;
pixels[(x+y*width)*4+2] = cB * 255; 

查看示例，其中我将更改应用于您的原始代码:

function setup() {
    createCanvas(600, 600);
    background(200);
    noLoop();
}

function draw() {
    translate(width/2, height/2);
    loadPixels();
    for (let x=0; x<=width; x++) {
        for (let y=0; y<=height; y++) {
            a=map(x, 0, width, -2.5, 1);
            b=map(y, 0, height, -1, 1);
            z=new Complex(a, b);
            f = (mand(z))
            //i = map(f,1,100,0,255);

            cR = Math.min(sqrt(f/100.0), 1);
            cG = Math.min(sqrt(f/50.0), 1);
            cB = Math.min(sqrt(f/10.0), 1);
            pixels[(x+y*width)*4]   = cR * 255;
            pixels[(x+y*width)*4+1] = cG * 255;
            pixels[(x+y*width)*4+2] = cB * 255; 
        }
    }
    updatePixels();
}

var Complex = function(a, b) {
    this.re=a;
    this.im=b;
    this.modSq=(a*a+b*b);
}

Complex.prototype.square = function() {
    a=sq(this.re)-sq(this.im);
    b=2*this.re*this.im;
    return new Complex(a, b);
}

function mand(c) {
    oldZ=new Complex(0, 0);
    for (let i=1; i<=100; i++) {
        newZ=oldZ.square();
        newZ.re+=c.re;
        newZ.im+=c.im;
        //newZ.re+= -0.70176;
        //newZ.im+= -0.3842;
        oldZ=newZ;
        if (oldZ.modSq>=4) {
            return i
        }
    }
    return 0
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>