Javascript Animated Martin Fractals with IE and VML

By Peter A. Bromberg, Ph.D.

Peter Bromberg  

In 1998, a consortium led by Microsoft, Autodesk, HP and Visio submitted the VML (Vector Markup Language) specification to the W3C. I guess it must have died on the vine, because now it's been more or less dropped and we have a recommendation candidate for SVG (Scalable Vector Graphics) language. To date, it seems that only Adobe has taken up the gauntlet on this and they have an excellent free plugin.

While SVG is great and from what I've seen can be about 30% smaller than VML in file size, support for VML has been in Internet Explorer since version 5.0 and since about 96% of our site visitors here at eggheadcafe.com are using IE, I figured it would be a no brainer to use the IE native VML support and spare you the reader a 3 MB plug-in download. Maybe later on Microsoft will support SVG, maybe they won't cause they got their feelings hurt - who knows.

The advantages of both VML and SVG are that they are pretty sophisticated, XML-based graphics description languages. Both are "scriptable" in the sense that it's possible to use client-side ECMAScript or other scripting languages to dynamically generate, scale, rotate and otherwise handle the generation and display of very complex images.



If you are not familiar with VML, I suggest you fire up Microsoft Word. Generate a WordArt picture - make it as complex as you want, and then save the document as HTML. If you inspect the saved document you will see that no graphics file (jpg, bmp etc) has been saved for your WordArt image - instead, it's 100% described with VML right inside the HTML document.

My particular interest in this technology, besides the typical developer needs of being able to generate dynamic stock charts, database reports, and so on with a lightweight vector language that can be transmitted quickly over the wire and displayed in a web browser, comes from my long fascination with fractal geometry.

Fractals are complex mathematical objects that can be described totally by mathematical formulas. Perhaps the most famous fractals are those discovered by mathematician Benoit Mandelbrot, called the "Mandelbrot Set". But there are many other kinds of fractals. Fractal geometry, besides its fascinating corollaries in nature, the stock market and the cosmos, has also enabled software engineers to come up with completely new and useful algorithms, particularly in the area of image and data compression.

The exercise I describe here makes use of the Microsoft VML default behavior in IE, which makes it extremely easy to attach VML shapes and their respective attributes to an HTML tag on the page, and then to use scripting to dynamically display, adjust or alter these shapes.

The fractal type I'll show here, "Hopalong", originally appeared in A. K. Dewdney's "Computer Recreations" column in "Scientific American". They are attributed to Barry Martin of Aston University in Birmingham, England. 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)

As fractals go, it's a pretty simple formula; there are no imaginary numbers involved. At first I tried coding a Mandelbrot generator. It worked, but they require so many iterations that you would have to wait several minutes until a decent image would be generated. The Martin fractal formula, on the other hand, can be set do do 50 or 100 iterations, display the work in progress, and then a callback or setInterval function can go "back into the code" and continue the calculations where the graphics just left off. The result is a very pleasing display that appears as you watch, and which can get pretty complex with as little as 1000 iterations.

If you are impatient like me and can't wait to see it before we dive into the code, CLICK HERE.

OK! Under the hood we go (Congestion next 100 lines. Expect 15 minute delay.):

<html> <head>
<!-- set vml schema namespace with prefix "v"--> <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<!-- set the default behavior style for IE-->
<style>
v\:* { behavior:url(#default#VML);}
</style> <script>
// set our window "render continuer callback"
window.setInterval("Main();",10);
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(p, color, width, fx, fy, tx, ty) { var l, d, i; l=document.createElement("v:line"); l.strokeweight = width+"pt"; l.strokecolor = color; l.from = fx + "px, " + fy + "px"; l.to = tx + "px, " + ty + "px"; p.insertBefore(l, null); } // 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; window.status = "Iteration:" + i + "/ 2000." // here's one way to set a hex color to pass into the function (based on some current values) cl="#"+(q%255).toString(16)+(y%255).toString(16)+(x%255).toString(16); createLineWithDOM(pDiv,cl,1,ctrx+xnew*scl,ctry+ynew*scl,ctrx+xnew*scl+1,ctry+ynew*scl+1); } i=q; // after 2000 iterations, clear the screen and do a new one... if(i>2000){ i =0; pDiv.innerText=""; } } // this function "sets up" our screen div to "draw" on...
function doSetup(){ if(!document.all.pDiv){ pDiv = document.createElement("DIV"); pDiv.id = "Graph1"; pDiv.style.width = screen.availWidth; pDiv.style.height = screen.availHeight; pDiv.style.position = "absolute"; pDiv.style.top = 0; pDiv.style.left = 0; document.body.insertBefore(pDiv, null); } Main(); } </script> </head> <body bgcolor="black" onload="doSetup();"> </body> </html>

Well, doing this one was fun. There are lots of resources for VML and SVG on the web. JASC has a product similar to their Paint Shop Pro that handles SVG drawing. You can even render a bitmap in to SVG or VML. To view the working source, simply load the page from the link above and save it to your file system.

 

 

Peter Bromberg is an independent consultant specializing in distributed .NET solutions a Senior Programmer /Analyst at in Orlando and a co-developer of the NullSkull.com developer website. He can be reached at info@eggheadcafe.com