Fractalheader
blackline

            Fig 1. Mandelbrot Fractal 2D

blackline

Fractals, the convergence of art, science and nature.

I have no idea what fractals "are" but it is impossible to explore them without becoming a little philosophical. The very idea that a simple iterative equation can create infinitely complex shapes is an intriguing one.

The word fractal was coined by the mathematician Benoit B. Mandelbrot in 1975 before he computed and displayed a picture of the simple iterative equation Z = Z*Z + ci in 1979 called the Mandelbrot Set .

This set is produced by computing, over the complex plane, the number of iterations at each point necessary before the equation begins to move rapidly to infinity. If, after many iterations, if it does not approach infinity it is said to be in the set.

Figure 1 is a display of the Mandelbrot set in 2 dimensions and figure 2 is a display in 3D (webgl with the number of iterations as the z axis). It is very helpful to see the Mandelbrot set in 3D to understand how it is constructed (Note: as of 10/31/2013 IE 11 WebGL shader point size problem not fixed.).

Below is some javascript code I have written which can be copied and used to start an exploration of this amazing subject. Your browser must be capable of handling HTML 5, and the canvas element. I recommend that you download the latest version of Google Chrome for best results.
blackline

Computing the Mandelbrot Fractal.

HTML5 (Copy and save as mandelbrottest.html)

<!DOCTYPE html>
<html>
<head>
    <script src="mandelbrottest.js" type="text/javascript"></script>
</head>
<body>
     <canvas id="canvas2D" width="500" height="500" ></canvas>
</body>
</html>

Javascript (Copy and save as mandelbrottest.js)

window.onload = initializeAndPlot;
var canvas=ctx=null;
function initializeAndPlot()
{
    canvas=document.getElementById('canvas2D');
    try
    {
        ctx = canvas.getContext('2d');
    }catch(e){}
    var Re=Im=Resquare=Imsquare=iterations=0;
    ctx.clearRect(0,0,canvas.width,canvas.height);
    var xmin=-2;xmax=2;
     var rangex=xmax-xmin;
    var ymin=-2;ymax=2;
     var rangey=ymax-ymin;
    for( x = -2; x <= 2; x+=rangex / canvas.width)
    {
        for( y = -2; y <= 2; y+= rangey / canvas.height)
        {
             Re=x; Im=y;
             iterations=1;
             Resquare=Imsquare=0;
             while((iterations < 512)&&(Resquare+Imsquare)<4)
             {
                  Resquare=Re*Re;
                  Imsquare=Im*Im;
                  Im=2*Re*Im +y;
                  Re=Resquare - Imsquare+x;
                  iterations++;
             }
             ctx.beginPath();
             if(iterations<10) ctx.strokeStyle="rgb(200,255,255)";
             else if(iterations % 2)ctx.strokeStyle="rgb(255,165,0)";
             else if(iterations % 3)ctx.strokeStyle="rgb(111,31,40)";
             else if(iterations % 4)ctx.stokeStyle="rgb(255,255,0)";
             else if(iterations % 5)ctx.strokeStyle="rgb(0,128,0)";
             else if(iterations % 6)ctx.strokeStyle="rgb(0,0,255)";
             else if(iterations % 7)ctx.strokeStyle="rgb(75,0,130)";
             else if(iterations % 8)ctx.strokeStyle="rgb(238,130,238)";
             else if(iterations <=500)ctx.strokeStyle="rgb(255,255,255)";
             else ctx.strokeStyle="rgb(0,0,0)";
             canvasx=(canvas.width/rangex)*(x-xmin);
             canvasy=canvas.height - (canvas.height/rangey)*(y-ymin);
             ctx.moveTo(canvasx,canvasy+2);
             ctx.lineTo(canvasx,canvasy);
             ctx.stroke();
    } } }
blackline