|
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 solutionsa Senior Programmer
/Analyst at in Orlando and a co-developer of the EggheadCafe.com
developer website. He can be reached at pbromberg@yahoo.com
|