生成的Julia集和Wikipedia图像之间存在差异

Question

我写了一个小的javascript程序来查看julia set images [link]。我已经实现了多个迭代算法（不只是z^2 + c）并且最近实现了exp(z)。但是，我的输出与维基百科页面图像不同。以下是c值-0.65：

的比较

我的形象：

维基百科图片

显然，他们的输出更加丰富多彩，并且显示更多细节！我认为这可能是我的实现中的错误，或者也许是我的着色算法？或者维基百科的结果是由一些不同的手段产生的？下面是一个只有e^z + c算法和相关函数的MVE。如果您想免费使用整个程序，则会托管on my site。

//globals
var MAXITERATION = 2500;
var BOUNDARY = 4;
var CANVASID = "juliaDraw";
var CANVAS = document.getElementById("juliaDraw");
var CONTEXT = document.getElementById("juliaDraw").getContext('2d');
var HEIGHT = 750;
var WIDTH = 750;
var CONVERGENCEITERCOUNT = 2500;

/** Complex number functions **/

function complexNum(real, imaginary) {
  this.real = real;
  this.imaginary = imaginary;
  return this;
}

// This is the bit that might be a problem but it seems to return correct results? 
function raiseNumberToComplexPower(x, c) {
  var s = Math.pow(x, c.real);
  var pow = c.imaginary * Math.log(x);
  var num = new complexNum(Math.cos(pow), Math.sin(pow));
  return scalarComplex(s, num);
}

function addComplex(c1, c2) {
  var real = c1.real + c2.real;
  var imaginary = c1.imaginary + c2.imaginary;
  return new complexNum(real, imaginary);
}

function multComplex(c1, c2) {
  var real = (c1.real * c2.real) - (c1.imaginary * c2.imaginary);
  var imaginary = (c1.real * c2.imaginary) + (c2.real * c1.imaginary);
  return new complexNum(real, imaginary);
}

function scalarComplex(s, c) {
  return new complexNum(c.real * s, c.imaginary * s);
}

function getComplexModulus(c) {
	return Math.sqrt((c.real * c.real) + (c.imaginary * c.imaginary));
}

/** Drawing and manipulation **/

function createArray(length) {
  var arr = new Array(length || 0),
    i = length;
  if (arguments.length > 1) {
    var args = Array.prototype.slice.call(arguments, 1);
    while (i--) arr[length - 1 - i] = createArray.apply(this, args);
  }
  return arr;
}

function drawJulia() {
  CONTEXT.clearRect(0, 0, WIDTH, HEIGHT);
  var start = new complexNum(-2, 2);
  var c = new complexNum(readInput('realValue') * 1, readInput('imagValue') * 1);
  STARTPOS = {
    real: -2,
    imaginary: 2
  }
  RANGE = 4;
  plotJuliaSet(CANVASID, c);
}

function plotJuliaSet(canvasID, c) {
  var complexNumberArray = createArray(WIDTH + 1, HEIGHT + 1);
  var doesPointEscapeArray = createArray(WIDTH + 1, HEIGHT + 1);
  ITERALGO = exponential;
  for (var x = 0; x <= WIDTH; x++) {
    for (var y = 0; y <= HEIGHT; y++) {
      complexNumberArray[x][y] = new coordsToComplex({
        x: x,
        y: y
      });
      complexNumberArray[x][y] = complexNumberArray[x][y];
      doesPointEscapeArray[x][y] = doesPointEscape(c, complexNumberArray[x][y]);
      if (doesPointEscapeArray[x][y] >= 0) {
        drawPointOnCanvas(x, y, getColor(doesPointEscapeArray[x][y]));
      } else {
        drawPointOnCanvas(x, y, 'black');
      }
    }
  }
  console.log('done');
}

function doesPointEscape(c, complexNum) {
  var iterations = 0;
  var iterationsToEscape = -1;
  var escaped = false;
  while ((!escaped) && (iterations < MAXITERATION)) {
    if (getComplexModulus(complexNum) > BOUNDARY) {
      escaped = true;
      iterationsToEscape = iterations;
    }
    complexNum = ITERALGO(complexNum, c);
    iterations++;
  }
  return iterationsToEscape;
}

function exponential(complexNum, c) {
  // e^z + c
  return addComplex(raiseNumberToComplexPower(Math.E, complexNum), c);
}

function drawPointOnCanvas(x, y, color) {
  CONTEXT.fillStyle = color;
  CONTEXT.fillRect(x, y, 1, 1);
}

function getColor(iterations) {
  //console.log("Iterations: "+getBaseLog(iterations+1,255));
  var color = "rgb(" + Math.floor((8 * iterations) % 255) + "," + Math.floor(2 * iterations % 255) + "," + Math.floor(255 - ((8 * iterations) % 255)) + ")";
  //console.log(color);
  return color;
}

function coordsToComplex(coordinates) {
  return {
    real: ((coordinates.x / WIDTH) * RANGE + STARTPOS.real),
    imaginary: ((coordinates.y / HEIGHT) * -RANGE + STARTPOS.imaginary)
  };
}

function complexToCoords(c) {
  return {
    x: ((c.real - STARTPOS.real) / (RANGE)) * WIDTH,
    y: ((c.imaginary - STARTPOS.imaginary) / -(RANGE)) * HEIGHT
  };
}

function readInput(inputID) {
  return document.getElementById(inputID).value;
}

.desc {
  float: right;
  width: 300px;
}
#juliaDraw {
  border: 1px dotted;
  float: left;
}
.canvasWrapper canvas {
  position: absolute;
  top: 0;
  left: 0;
}

<div class="desc">
  <h1>Julia Set Viewer</h1> 
  <form>
    <label>Real:
      <input type="text" id="realValue" value="-0.65">
    </label>
    <br>
    <label>Imag:
      <input type="text" id="imagValue" value="0">
    </label>
    <input type="button" onClick="drawJulia()" value="Draw">
  </form>
</div>
<canvas id="juliaDraw" width=750 height=750 onClick="drawZoomJulia()"></canvas>

Answer 1

这个问题实际上是一个数学问题。具体来说，您在指数函数上使用为多项式构建的转义标准。在所有情况下，您似乎都会迭代，直到迭代超过绝对值BOUNDARY，并且BOUNDARY在开始时设置为4。 Wikepedia图像显然使用了更大的逃逸值。在以下两个图像中，我们将逃逸半径4与逃逸半径100进行比较;较大的逃逸半径更像维基百科图像：

但是，坦率地说，维基百科的形象也是不正确的。 Julia设置图片背后的重点是尝试将复杂平面分解为两组：一组动力学简单，另一组动力学复杂。我们迭代一个多项式，直到绝对值很大，因为所有具有大绝对值的点都会逃逸到无穷大。对于您的函数exp(z)-0.65，情况并非如此。例如，如果z=-100，则abs(z)相当大，但exp(-100)-0.65非常接近-0.65。就指数函数的绝对值而言，没有良好的逃避标准。

的效果是迭代你的函数，直到它的真实部分很大。它就像逃离复杂飞机的右侧一样。如果我们迭代你的函数直到实部超过100，我们得到类似的结果：