失败的 JS Mandelbrot 集生成器输出奇怪的结构
Failed JS Mandelbrot Set generator outputs odd structure
我昨晚在 Javascript 中制作了这个简单的 Mandelbrot 集生成器,但它输出的结构非常奇怪。我认为它看起来类似于 mandelbrot 集,但奇怪地变形了。我不知道为什么它会像这样扭曲,而且我一整天都在试图找出答案。有谁知道是什么原因造成的或如何解决这个问题?
c = document.getElementById("canvas");
ctx = c.getContext("2d");
c.width = 4000;
c.height = 4000;
declareVariables();
calculateShape();
drawShape();
function declareVariables() {
Re = -2;
Im = -2;
input = [Re,Im];
precision = prompt("input precision (higher is better)");
precision = 1/(precision - precision%4);
segmentAmt = 4/precision;
segmentSize = c.width/segmentAmt;
iterate = prompt("input test amount (higher is better)");
set = [];
for (i=0; i<segmentAmt; i++) {
set[i] = [];
}
numberGrid = [];
for (i=0; i<segmentAmt; i++) {
numberGrid[i] = [];
for (j=0; j<segmentAmt; j++) {
}
}
}
function calculateShape() {
for (i=0; i<segmentAmt; i++) {
input[1] = -2;
input[0] += precision;
for (j=0; j<segmentAmt; j++) {
input[1] += precision;
set[i][j] = 0;
z = [0,0];
for (k=1; k<=iterate; k++) {
store = z;
z[0] = store[0]**2 - store[1]**2 + input[0];
z[1] = 2 * store[0] * store[1] + input[1];
if (z[0]**2 + z[1]**2 > 4) {
set[i][j] = k;
k = iterate+1;
}
}
}
}
}
function drawShape() {
ctx.fillStyle = "white";
ctx.fillRect(0,0,c.width,c.height);
for (i=0; i<segmentAmt; i++) {
for (j=0; j<segmentAmt; j++) {
if (set[i][j] == 0) {
ctx.fillStyle = "black";
} else if (set[i][j] >= 1) {
ctx.fillStyle = 'hsl(' + (25*(set[i][j]-1))**0.75 + ', 100%, 50%)';
}
convertCoords(i,j);
ctx.fillRect(xCoord,yCoord,segmentSize,segmentSize);
}
}
}
function convertCoords(var1,var2) {
xCoord = var1 * segmentSize;
yCoord = var2 * segmentSize;
}
输出图像:
错误似乎在 calculateShape()
中的这一行:
store = z;
您似乎希望 store
成为 z
的副本,但这只是以 store
和 z
引用同一个数组结束。下一行计算 z[0]
,但由于 store
和 z
引用同一个数组,store[0]
具有新值 z[0]
而不是先前的值。因此,在那之后的行中 z[1]
的计算是不正确的。
将以上行替换为
store = [z[0], z[1]];
或
store = z.slice();
这两行确保 store
指的是与 z
不同的数组,因此当您重新计算 z[0]
时,store[0]
不受影响。
我昨晚在 Javascript 中制作了这个简单的 Mandelbrot 集生成器,但它输出的结构非常奇怪。我认为它看起来类似于 mandelbrot 集,但奇怪地变形了。我不知道为什么它会像这样扭曲,而且我一整天都在试图找出答案。有谁知道是什么原因造成的或如何解决这个问题?
c = document.getElementById("canvas");
ctx = c.getContext("2d");
c.width = 4000;
c.height = 4000;
declareVariables();
calculateShape();
drawShape();
function declareVariables() {
Re = -2;
Im = -2;
input = [Re,Im];
precision = prompt("input precision (higher is better)");
precision = 1/(precision - precision%4);
segmentAmt = 4/precision;
segmentSize = c.width/segmentAmt;
iterate = prompt("input test amount (higher is better)");
set = [];
for (i=0; i<segmentAmt; i++) {
set[i] = [];
}
numberGrid = [];
for (i=0; i<segmentAmt; i++) {
numberGrid[i] = [];
for (j=0; j<segmentAmt; j++) {
}
}
}
function calculateShape() {
for (i=0; i<segmentAmt; i++) {
input[1] = -2;
input[0] += precision;
for (j=0; j<segmentAmt; j++) {
input[1] += precision;
set[i][j] = 0;
z = [0,0];
for (k=1; k<=iterate; k++) {
store = z;
z[0] = store[0]**2 - store[1]**2 + input[0];
z[1] = 2 * store[0] * store[1] + input[1];
if (z[0]**2 + z[1]**2 > 4) {
set[i][j] = k;
k = iterate+1;
}
}
}
}
}
function drawShape() {
ctx.fillStyle = "white";
ctx.fillRect(0,0,c.width,c.height);
for (i=0; i<segmentAmt; i++) {
for (j=0; j<segmentAmt; j++) {
if (set[i][j] == 0) {
ctx.fillStyle = "black";
} else if (set[i][j] >= 1) {
ctx.fillStyle = 'hsl(' + (25*(set[i][j]-1))**0.75 + ', 100%, 50%)';
}
convertCoords(i,j);
ctx.fillRect(xCoord,yCoord,segmentSize,segmentSize);
}
}
}
function convertCoords(var1,var2) {
xCoord = var1 * segmentSize;
yCoord = var2 * segmentSize;
}
输出图像:
错误似乎在 calculateShape()
中的这一行:
store = z;
您似乎希望 store
成为 z
的副本,但这只是以 store
和 z
引用同一个数组结束。下一行计算 z[0]
,但由于 store
和 z
引用同一个数组,store[0]
具有新值 z[0]
而不是先前的值。因此,在那之后的行中 z[1]
的计算是不正确的。
将以上行替换为
store = [z[0], z[1]];
或
store = z.slice();
这两行确保 store
指的是与 z
不同的数组,因此当您重新计算 z[0]
时,store[0]
不受影响。