Fractals and Tiles (com html5) – Parte 8 – Julia set

Olá pessoal. Tudo certo?!

Outro dia, escrevi um post mostrando como gerar fractais a partir do Mandelbrot Set. Hoje, faço o mesmo trabalho apresentando Julia set.

Novamente, foco apenas na implementação em Javascript. Uma boa explicação teórica sobre Julia set pode ser encontrada na Wikipedia ou no MathWorld.

Importante: Reaproveitei boa parte do código que escrevi na implementação de Mandelbrot set. Por isso, não é descrita nesse post. Para saber mais sobre a porção de código que não explico (como a interface com o usuário) recomendo ler o post indicado.

Código-fonte completo está disponível em https://gist.github.com/1395850.

Aceitando parâmetros pela Querystring

De forma geral, podemos assumir que a implementação para Julia Set é bem similar a implementação para Mandelbrot Set. Uma diferença notável, entretanto, é que podemos definir o valor da constante complexa definida em sua equação base. De forma abstrada, defino essa constante c como c = p + qi. Onde qi é um número complexo. Na implementação de hoje, permito que o usuário informe o valor dessas duas constantes na Querystring. Observe:

var qs = new Array()
var vars = location.search.replace(/\x3F/, "").replace(/\x2B/g, " ").split("&")
if (vars != "") {
        for (i = 0; i < vars.length; i++) {
                nvar = vars[i].split("=")
                qs[nvar[0]] = unescape(nvar[1])
        }
}
function QueryString(key) {
        return qs[key]
}

$("#presets").buttonset();
var seed = {
        p: parseFloat(QueryString("p")),
        q: parseFloat(QueryString("q"))
};

Nosso objeto Julia

Toda a implementação para o desenho do Julia set está “isolada” em um único objeto. Observe:

Julia = {
    qmin: -2.0,
    qmax: 2.0,
    pmin: -2.0,
    pmax: 2.0,

    reset: function () {
        with (Julia) {
            qmin = -2.0;
            qmax = 2.0;
            pmin = -2.0;
            pmax = 2.0;
        }
    },
    compute: function () {
        juliaImage = context.getImageData(0, 0, canvasWidth, canvasHeight);
        juliaPixels = juliaImage.data;

        var a = canvasWidth, b = canvasHeight, kmax = 200, m = 4;
        var x0, y0, dx, dy, x, y, r;
        dx = (Julia.qmax - Julia.qmin) / (a - 1); dy = (Julia.pmax - Julia.pmin) / (b - 1);

        for (var sx = 0; sx <= a; sx++) {
            for (var sy = 0; sy <= b; sy++) {
                k = 0;
                x0 = Julia.qmin + sx * dx; y0 = Julia.pmin + sy * dy;
                r = 0;
                while ((k++ <= kmax) && (r  m) {
                    if (k  255) k = 255;
                    drawPixel(sx, sy, k);
                } else {
                    drawPixel(sx, sy, 0);
                }
            }
        }
        context.putImageData(juliaImage, 0, 0);
    }
};

Alguns exemplos para Julia Set

Para encerrar, gostaria de mostrar alguns fractais gerados a partir de Julia Set.

Comecemos definindo p = -0.74543 e q = 0.11301.

Live demo: http://users.cjb.net/livedemoelemarjr/julia.htm?p=-0.74543&q=0.11301

Ampliando uma região do fractal:

Agora, p = -0.285 e q = 0.01

Live demo: http://users.cjb.net/livedemoelemarjr/julia.htm?p=0.285&q=0.01

Ampliando uma região:

Agora, p = -0.835 e q = -0.2321

Live demo: http://users.cjb.net/livedemoelemarjr/julia.htm?p=-0.835&q=-0.2321

Ampliando uma região:

Era isso!