"Dayam, I can switch a PCU with my eyes tied behind my back. It's just a matter of unscrewing the MIPS, removing the food processor, and hotplugging the wireless disk controller." - Digg user
I've always had a fascination with fractal geometry. Its funny because I was so disinterested in mathematics that I almost failed 9th grade algebra. But once through college and with the advent of computers and graphics, math took on a whole new light for me. At home we have a coffee-table copy of Benoit Mandelbrot's book on Fractals (Mandelbrot could be considered the "father" of fractals, the Mandelbrot Set is named after him).
Some time ago I published an article here about using VML with Internet Explorer to plot Martin Hopalong fractals in the browser in real time. This is an extension to that article. Recently I came across Walter Zorn's Javascript graphics library and was impressed. Essentially he is drawing colored div tags into the browser, each absolutely positioned. No VML, no SVG - it's 100% pure client script, and it works with virtually every browser. The single .JS file is only about 19K, and if you compress it as I did, you can get it down to about 11K - not bad at all.
So, I turned my attention back to my Martin Fractals article and decided to adapt the functions to use Zorn's library.
The "Martin Fractal" formula was developed by Barry Martin of Aston University and is listed in "Dynamical Systems and Fractals", an excellent book by Karl-Heinz Becker and Michael D”rfler, Cambridge University Press, 1990. The central formula that generates the myriad beautiful fractal designs takes only two lines of code, and involves nothing more complex than the square root function!
This fractal type originally appeared in A. K. Dewdney's "Computer Recreations" column in "Scientific American". Hopalong is an "orbit" type fractal like lorenz. The image is obtained by iterating this formula after setting z(0) = y(0) = 0:
x(n+1) = y(n) - sign(x(n))*sqrt(abs(b*x(n)-c)) y(n+1) = a - x(n)
So without further adieu, I present my "Martin / Zorn Fractal code below:
<html>
<head>
<!-- http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm -->
<script src="wz_jsgraphics.js"></script>
<script>
window.setInterval("Main();",100);
var x=0;
var y=0;
var xnew=0;
var ynew=0;
var i=0;
var sn=Math.random();
if (sn<.5) sn=-1;
if (sn >.5) sn=1;
var a=Math.random()*sn ;
sn=Math.random();
if (sn<.5) sn=-1;
if (sn >.5) sn=1;
var b=Math.random()*sn ;
sn=Math.random();
if (sn<.5) sn=-1;
if (sn >.5) sn=1;
var c=Math.random() *sn ;
var ctrx =screen.availWidth/2;
var ctry= screen.availHeight/2;
scl=60;
var cl;
// this is the function that draws the dot(actually a 1 pixel line)
function createLineWithDOM(color, width, fx, fy, tx, ty) {
var l, d, i;
jg_doc.setColor(color);
jg_doc.drawLine(fx,fy,tx,ty);
jg_doc.paint();
}
// this is our main function that does the iterations,
// picking up the values of the global variables from the last setInterval firing.
function Main(){
for(var q=i;q<(i+70);q++){
xnew = y - (x>0? 1:-1)* Math.sqrt(Math.abs(b*x-c));
ynew = a - x;
x=xnew;
y=ynew;
// get a color for this pixel based on x,y and q
cl="#"+RGBtoHex( (q*256%255),(y*256%255),(x*256%255));
createLineWithDOM(cl,1,ctrx+xnew*scl,ctry+ynew*scl,ctrx+xnew*scl+1,ctry+ynew*scl+1);
}
i=q;
// after 9000 iterations, clear the screen and do a new one...
if(i>9000){
i =0;
myCanvas.innerText="";
}
}
function RGBtoHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
function toHex(N) {
if (N==null) return "00";
N=parseInt(N); if (N==0 || isNaN(N)) return "00";
N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
return "0123456789ABCDEF".charAt((N-N%16)/16)
+ "0123456789ABCDEF".charAt(N%16);
}
</script>
</head>
<body bgcolor="black" onload="Main();" topmargin=0>
<div id="myCanvas" style="position:absolute;height:100%;width:100%"></div>
<script>var jg_doc = new jsGraphics("myCanvas");</script>
</body>
</html>
You can see how the js_graphics object is used; basically you create a new jsGraphics object, passing in the div tag to be used as the canvas. This script needs to appear below your actual tag in the page so that the tag is there when the script is called. Aside from that, you see my createLineWithDOM method which takes a hex color, and the four x-y coordinates.
The RGBtoHex method converts the x/y integer values of the point on the canvas to a hexadecimal color. This is just one example you could do a lot more with Walter's Javascript graphics library, including drawings, stock charts, and more - all on the client, in the browser. If you are ambitious, you could even use an Anthem or ATLAS Panel as the canvas and have a multi-user whiteboard where a timer callback reloads the contents of the div.
Here is a link to a live page.
Interestingly, this doesn't render as fast in Firefox, it seems to labor over all the script, but it still looks fine. If you download the code, you may want to fiddle around with the parameters and change some values to see the nice Martin fractal effects you can get!
Download the zip file that accompanies this article |