曼德尔布罗特集合最经常被用来说明何为分形几何，它已成为分形几何的标志性图案，它可以帮助我们更好地理解我们周围不规则和粗糙的世界。它的名称就来源于“分形几何之父”伯努瓦-曼德尔布罗特。分形几何理论认为，许多领域(如物理学、生物学以及金融等)中的复杂现象，都可以以这种美丽的图案进行处理。今天用JS+Canvas来实现曼德尔布罗特集合的算法。传送门

HTML部分

<div id="canvas_wrapper" style="overflow:auto;"></div>

javascript部分

var $canvas,canvas,context;
draw();
function draw(){
    var w = 1024;
    var h = w;
    $canvas = $("<canvas>");
    $canvas.attr("id","canvas");
    $canvas.attr("width",w);
    $canvas.attr("height",h);
    $canvas.appendTo("#canvas_wrapper");
    canvas = $canvas[0];
    context = canvas.getContext("2d");
    var imageData = context.createImageData(canvas.width, canvas.height);
    var pixelData = imageData.data;
    for (var i = 0; i < canvas.height; i++) {
        for (var j = 0; j < canvas.width; j++) {
            var x = 0.0, y = 0.0, a = 0.0;
            for (var k = 0; k < 256; k++) {
                a = x * x - y * y + (i - (canvas.width * 2 / 3 + 50))/(canvas.width * 0.5);
                y = 2 * x * y + (j - (canvas.width * 0.5))/(canvas.width * 0.5);
                x = a;
                if (x * x + y * y > 4) {
                    break;
                }
            }

            var p = j * canvas.width + i;
            pixelData[4 * p + 0] = Math.log(k) * 47;
            pixelData[4 * p + 1] = Math.log(k) * 47;
            pixelData[4 * p + 2] = 128 - Math.log(k) * 23;
            pixelData[4 * p + 3] = 255;
        }
    }
    context.putImageData(imageData, 0, 0, 0, 0, canvas.width, canvas.height);
}

最终效果