Dan Newcome on technology

I'm bringing cyber back

Fun with fractals using HTML5

I was writing some fractal code and thought that it would be interesting to see if it could be done in Javascript with graphical output provided by the HTML5 <canvas> element.  As you can see, it worked just fine, albeit a little bit slow. ```
<html>
<script src="fractal.js" type="text/javascript" language="javascript"></script>
<canvas style="border: 1px solid black" id="canvas" width="500" height="500"></canvas>
</body>
</html>

```
```// file: fractal.js

// draw a point on our canvas element using the rect function
// set to draw a 1x1 square
function drawPoint( in_x, in_y ) {
var canvas = document.getElementById( "canvas" );
var ctx = canvas.getContext( "2d" );
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect( in_x, in_y, 1, 1 );
}

// data structure that represents a complex number ( re + im )
function Complex( in_re, in_im ) {
this.re = in_re;
this.im = in_im;
}

// multiplication function for 2 complex numbers.. Performs FOIL
function ComplexMult( in_c1, in_c2 ) {
var real = ( in_c1.re * in_c2.re ) - ( in_c1.im * in_c2.im );
var imag = ( in_c1.re * in_c2.im ) + ( in_c1.im * in_c2.re );

return new Complex( real, imag );
}

// addition of two complex numbers
function ComplexAdd( in_c1, in_c2 ) {
return new Complex( in_c1.re + in_c2.re, in_c1.im + in_c2.im );
}

// absolute value of a complex number using sqrt( a^2 + b^2 ) form
function ComplexAbs( in_c ) {
return Math.sqrt( in_c.re*in_c.re + in_c.im*in_c.im );
}

function drawFractal() {

// resolution of our pixel image
var x = 500;
var y = 500;

// real axis max/min
var remin = -2;
var remax = 2;

// imaginary axis max/min
var immin = -2;
var immax = 2;

// calculate the ranges from the bounds
var rerange = remax - remin;
var imrange = immax - immin;

// number of iterations that we peform on each pixel
var depth = 25;

// iterate over each pixel in our output image
for( var i=0; i < x; i++ ) {
for( var j=0; j < y; j++ ) {

var zn = new Complex( 0, 0 );

// we need a mapping from pixels to complex plane
var re = ( rerange/x ) * i - rerange/2;
var im = ( imrange/y ) * j - imrange/2;
var c = new Complex( re, im );

// solve the iterative function for n = depth
for( var n=1; n <= depth; n++ ) {
// equation is zn = zn*zn + c
zn = ComplexAdd( ComplexMult( zn, zn ), c );
}

// test to see if the point is in the set using 2 as the
// boundary
if( ComplexAbs( zn ) < 2 ) {
drawPoint( i, j );
}
}
}
}

```

Written by newcome

November 5, 2009 at 10:56 pm

Posted in Uncategorized

3 Responses

1. I had a similar idea, JavaScript plus is a powerful combination. Nice to see! But I agree that it seems a little slow.

Fredrik K

January 2, 2010 at 10:55 am

2. ..plus the canvas-element..

Fredrik K

January 2, 2010 at 10:57 am

3. I wrote an interactive fractal renderer. Lets you drag out a zoom window with the mouse and increase the number of iterations by clicking a button.

My Mandelbrot set starts at 100 iterations. Opera seems to by, by far, the fastest browser for my code.

http://dougx.net/fractals/fractals.html

DougX

August 7, 2010 at 9:50 am