Fractals

Fractals2

<!DOCTYPE html>

<html>

<head><title>Fractal0</title></head>

Your browser does not support the HTML5 canvas tag.</canvas>

var canvas=document.getElementById("myCanvas");

var context=canvas.getContext("2d");

var MAX_MAGNITUDE = 4;

var MAX_ITERATIONS = 1000;

var xmax = document.getElementById("myCanvas").width;

var ymax = document.getElementById("myCanvas").height;

var rgba = context.getImageData(0, 0, xmax, ymax);

var realStart = -2.5;

var realEnd = 1.5;

var imaginaryStart = -2.0;

var imaginaryEnd = 2.0;

//============= Fractal Functions =============

function drawPixel (x, y, r, g, b, a)

{

var index = (x + y * xmax) * 4;

rgba.data[index + 0] = r;

rgba.data[index + 1] = g;

rgba.data[index + 2] = b;

rgba.data[index + 3] = a;

}

function updateCanvas() {

context.putImageData(rgba, 0, 0);

}

function iterate(c)

{

var constant = c;

var comp = c;

for (loop = 1; loop <= MAX_ITERATIONS; loop++)

{

comp = multiply(comp, comp); // Mandelbrot Set

comp = add(comp, constant);

if ( magnitude(comp) > MAX_MAGNITUDE )

{

return loop;

}

return 0;

}

function drawFractal()

{

var real = realStart;

var imaginary = imaginaryStart;

for (xPix = 0; xPix < xmax; xPix++)

{

updateCanvas();

for (yPix = 1; yPix < ymax; yPix++)

{

var reps = iterate( complex(real, imaginary) );

if ( reps == 0 )

{

drawPixel(xPix, yPix, 0, 0, 0, 255);

}

else

{

drawPixel(xPix, yPix, reps * 5 % 256, reps * reps % 256, reps * 35 % 256, 255);

}

imaginary = imaginaryEnd - ( (imaginaryEnd - imaginaryStart) / ymax) * yPix;

}

real = ( (realEnd - realStart) / xmax) * xPix + realStart;

}

//============= Complex Functions =============

function magnitude(c)

{

return c.real * c.real + c.imaginary * c.imaginary;

}

function complex(r, i)

{

return {

real: r,

imaginary: i

};

}

function multiply(c1, c2)

{

return {

real: c1.real * c2.real - c1.imaginary * c2.imaginary,

imaginary: c1.real * c2.imaginary + c1.imaginary * c2.real

};

}

function add(c1, c2)

{

return {

real: c1.real + c2.real,

imaginary: c1.imaginary + c2.imaginary

};

}

setState(); // initialize display

drawFractal(); // draw initial fractal

</script>

</body>

</html>