【发布时间】：2016-04-20 11:46:38
【问题描述】：
我正在尝试使用 math.js 在 javascript 的画布中生成 Julia 分形
不幸的是，每次在画布上绘制分形时，它都相当缓慢且不是很详细。
谁能告诉我这个脚本这么慢是有什么特殊原因，还是对浏览器的要求太高了？ （注意：鼠标移动部分被禁用了，还是有点慢）
我尝试过提高和降低“bail_num”，但高于 1 的所有内容都会导致浏览器崩溃，低于 0.2 的所有内容都会导致所有内容变黑。
// Get the canvas and context
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// Width and height of the image
var imagew = canvas.width;
var imageh = canvas.height;
// Image Data (RGBA)
var imagedata = context.createImageData(imagew, imageh);
// Pan and zoom parameters
var offsetx = -imagew/2;
var offsety = -imageh/2;
var panx = -2000;
var pany = -1000;
var zoom = 12000;
// c complexnumber
var c = math.complex(-0.310, 0.353);
// Palette array of 256 colors
var palette = [];
// The maximum number of iterations per pixel
var maxiterations = 200;
var bail_num = 1;
// Initialize the game
function init() {
//onmousemove listener
canvas.addEventListener('mousemove', onmousemove);
// Generate image
generateImage();
// Enter main loop
main(0);
}
// Main loop
function main(tframe) {
// Request animation frames
window.requestAnimationFrame(main);
// Draw the generate image
context.putImageData(imagedata, 0, 0);
}
// Generate the fractal image
function generateImage() {
// Iterate over the pixels
for (var y=0; y<imageh; y++) {
for (var x=0; x<imagew; x++) {
iterate(x, y, maxiterations);
}
}
}
// Calculate the color of a specific pixel
function iterate(x, y, maxiterations) {
// Convert the screen coordinate to a fractal coordinate
var x0 = (x + offsetx + panx) / zoom;
var y0 = (y + offsety + pany) / zoom;
var cn = math.complex(x0, y0);
// Iterate
var iterations = 0;
while (iterations < maxiterations && math.norm(math.complex(cn))< bail_num ) {
cn = math.add( math.sqrt(cn) , c);
iterations++;
}
// Get color based on the number of iterations
var color;
if (iterations == maxiterations) {
color = { r:0, g:0, b:0}; // Black
} else {
var index = Math.floor((iterations / (maxiterations)) * 255);
color = index;
}
// Apply the color
var pixelindex = (y * imagew + x) * 4;
imagedata.data[pixelindex] = color;
imagedata.data[pixelindex+1] = color;
imagedata.data[pixelindex+2] = color;
imagedata.data[pixelindex+3] = 255;
}
function onmousemove(e){
var pos = getMousePos(canvas, e);
//c = math.complex(-0.3+pos.x/imagew, 0.413-pos.y/imageh);
//console.log( 'Mouse position: ' + pos.x/imagew + ',' + pos.y/imageh );
// Generate a new image
generateImage();
}
function getMousePos(canvas, e) {
var rect = canvas.getBoundingClientRect();
return {
x: Math.round((e.clientX - rect.left)/(rect.right - rect.left)*canvas.width),
y: Math.round((e.clientY - rect.top)/(rect.bottom - rect.top)*canvas.height)
};
}
init();
【问题讨论】：
-
我尝试制作一个 sn-p - 它只是黑色：jsfiddle.net/mplungjan/62say3Lw
-
这个问题是否更适合 CodeReview 社区？ codereview.stackexchange.com
-
sn-p 在我的屏幕上不只是黑色，我看到三种不同的灰度。尝试增加画布大小。我的是 width="1024" height="860"。
-
啊。我知道了。如果你添加一些控制台日志，你会看到它做了多少百万次迭代
-
我在 jsFiddle 中添加了一些计数器和 console.logs：jsfiddle.net/62say3Lw/1 画布尺寸：1024x860；像素上的总迭代次数：880640；总数学计算：19575194（近 2000 万次计算）；
标签： javascript performance fractals math.js