Essay
In my travels on the web, I discovered Walter Zorn's High Performance JavaScript Vector Graphics Library, and thought it might lead to an interesting essay topic...
Since the context of this essay is the web, I asked myself "what is the most expedient way to find out more information about Zorn's graphics library?" The answer, of course, was to find out who links to that page!!! (What do people think of it? What do people use it for? Has anyone done something truly outstanding with it? Do people love it or hate it? What related projects are out there? Should we care? Does anyone else? Why?!?! What?!?! How?!?!) Thanks to Google's "Backward Links" functionality, I did just that.
The results of my research should allow me to create a fairly clear picture of what Zorn's library is all about, why it's interesting, and what it represents. (That is, at least in the collective minds of vocal web denizens.) Zorn's solution has "hack value", as do many related things I mention below.
Zorn represents graphics as efficient rectangular DIVs. The person that created this page represents graphics as efficient triangular DIVs. Sadly, this isn't a library, it's just a working demo.
Someone else drew animated graphics in CSS and JavaScript. There are no images on this page, and it loads fast.
Kitya Karlson created a solution for graphics before Zorn. However, he decided to generate tables on the fly, instead of using DIVs.
Zorn's library was extended by someone here. He added layering, transparency/opacity, and sprites!
Other graphical effects can be created with clever use of DIVs and their attributes, as shown by Eric Meyer's Slantastic Demo, Lasse Reichstein Nielsen's Information on Border Slants, Star of Slants, Rotating Star, and Rotating Box.
One thing that may be difficult (or impossible) to do is register a click event on a line (or other graphics) that was drawn by any of these methods.
Dan Muresan describes Zorn's library as a compiler that turns graphics primitives into an assembly language of DIVs.
Powerful tools can be created using graphics libraries on the web. Someone used Zorn's library to create a digital circuit simulator. A Viso-like demo is available here, and a more flexible drawing application is available here. Both use Zorn's library. As might be expected, people are also building games with the library.
The Similie Timeline appears in many web pages related to Zorn. (An example is here.) I believe both Zorn's library and the Similie Timeline speak to a need that web developers have been crying out for. They want powerful graphics in JavaScript without using Flash, SilverLight, SVG, VMRL, or any other new tool (open or otherwise). Zorn even said it himself in a note at the bottom of his page. There are plenty of threads out there on the web started by people that want a simple and clean way to draw graphics on a web page. Most of them start by saying they might have to use Flash, but they'd rather not...
Doga Arinir wrote an article that describes the algorithm Zorn uses in his library. It is still unclear who invented the idea first.
As is true with some items available on the internet, Zorn's library has global appeal. Someone in China, presumably independent of Zorn, made a translated page for his library.
In this essay, I plan to explore the use of alternative graphics and drawing mechanisms in web pages, and compare the existing strategies that I've discovered. It's easy to display an image in HTML, but it's surprisingly difficult to programmatically draw arbitrary graphics. Yet this functionality seems to be sought after by many people.
