Фракталы

Собственно, заинтересовался рисовкой фракталов. На холсте HTML5, естественно. Пришлось откопать на сайте Мозиллы метод для попиксельной рисовки на холсте, который вроде как и новый, но уже всеми поддерживается.

Для начала выбрал не сильно сложное множество Мандельброта в чистом виде:

var canvas = document.getElementById('canv');

var ctx = canvas.getContext('2d');

var CData = ctx.createImageData(canvas.width, canvas.height);

 

ctx.font = "20pt Arial";

ctx.fillText("Enter precision of the fractal", 10,50);

 

function getColor(x,y,im){

    x = 2 * (x/canvas.width - 0.5);

    y = 1.5  * (y/canvas.height - 0.5);

    var x0 = x;

    var y0 = y;

 

    var i = 0;

    var p = Math.sqrt((x-0.25)*(x-0.25)+y*y);

    var th = Math.atan2(y,x-0.25);

    var pc = 0.5 - 0.5*Math.cos(th);

 

    //optimization, if point belongs to cardioid, then color is white (well, 250)

    if(p <= pc){

    return 250;

    }

 

    else{

 

        while (x*x + y*y <= 4 && i < im){

        var xtmp = x*x - y*y +x0;

        y = 2*x*y + y0;

        x = xtmp;

        i++;

        }

    return Math.round(250* i/im);

    }

    }

 

function draw(iter){

 

    for (var x=0; x< CData.width;x++){

        for(var y=0;y<CData.height;y++){

        var clr = getColor(x,y,iter);

 

        //index of pixel

        var idx = (x+y*canvas.width)*4;

 

        CData.data[idx + 0] = clr-3;

        CData.data[idx + 1] = clr;

        CData.data[idx + 2] = clr+3;

        CData.data[idx + 3] = 255;

        }

    ctx.putImageData(CData, 0, 0);

    }

 

}

 

function main(){

var iter = document.getElementById('iter').value;

var test = document.getElementById('test');

 

draw(iter);

 

}

Можно меня ругать, что размазал такой простой пример по трем функциям, но это связанно с тем, что я хотел получить плавную анимацию перерисовки фрактала (пока не получилось), а вы вполне можете избавиться от main(), просто перенеся пару строчек кода, и убрав аргумент у draw(iter).

Обратите внимание на оптимизацию вычислений, которая проверяет, не принадлежит ли точка к главной кардиоиде (это которая в форме задницы). Дает прирост производительности в 2-3 раза. Можно поиграться с коэффициентами около x и y (которые 0.5 в примере), чтобы отображать конкретную часть фрактала в приближении.

Действующий пример – тут, под заголовком Fractal. Впрочем, пример на сайте время от времени модифицируется, и скорее всего не будет соответствовать приведенному коду.