WEB2DNA - the art project

Written by Thomas Baekdal on July 24, 2006

When you one evening are bored out of your skull, and the only shows on TV are zillion year-old reruns, you get into a mood that can only be described as a Monty Python sketch gone wrong. If you then happen to start your favorite web development application you know that the results will be mad, pointless and utterly useless.

This is the case with WEB2DNA, a little thing I made this weekend while feeling particularly nutty.

WEB2DNA will take you website, analyze it, crunch it into too little bits and spit it out as a graphic representation of a human DNA.

Inspiration

I was heavily inspired by other nutty people - in particular two.

DNA11: A company that, ~~with a sample of your blood~~ by wiping the inside of your mouth with a swab, turns your DNA into works of art. It is a really neat but expensive concept.

Websites as Graphs:� A cool web app by Marcel Salathe that displays you website as a graph (or actually a series of dots connected to each other). This too is a really neat and fun concept that is very inexpensive (it is free).

WEB2DNA is basically a mix between the two.

How does it work?

The concept behind this is pretty simple. The system first retrieves the website, then it is parsed like WEB2RSS, stripping away everything that is not part of the body tag, scripts elements, and iframes.

It then analyzes the content. Words in the content are displayed as empty spaces (the gabs you see between the lines). The HTML tags are displayed as colored lines.

The brightness of the lines is determined by the importance of the tags in terms of structure.

H1 is brighter than H2, which is brighter than H3.
TABLE is brighter than TR, which is brighter than TD tags.
Images and flash elements appear as 70% white.
New HTML tags like STRONG and EM is brighter than older ones like B and I
UL, OL and DL is brighter than their child-tags LI, DT, and DD
DIV layout is brighter than a table layout

Basically a semantically rich site will appear brighter than one with messy old-style code.

You can also determine the richness of text on a site. A site that focuses on (text) content is one where the DNA patterns is large (filling many containers), but contains a lot of empty spaces between the lines (empty space is the individual words).

I mean, how does it work technically?

Behind the scenes, WEB2DNA uses the same methods to retrieve and parse the result as WEB2RSS. The only difference is how it is outputted. While WEB2RSS outputs an RSS feed (obviously...), WEB2DNA outputs the same, but displayed as tiny little pictures on colored backgrounds.

Technically speaking each DNA string is a 1x1px transparent GIF. It is displayed with a fixed width and height and colored using CSS (the background of the image tag). The images are then put into 10 vertical containers that is position on top of a background image.

The entire project took 6-7 hours to make. Most of it spent tweaking how the DNA string should be displayed, and doing complex mathematical craziness - like calculating the height of the images, when there are 3479 elements, being displayed in a box that can contain 70% of 2425 elements in 10 vertical containers. Or even worse, how do you display 37 elements in the same area without making them huge and ugly looking. It is pretty much the difference between displaying Google and NY Times.

Notice to Firefox users

WEB2DNA does not play very well with Firefox, because of some little known bug in how it handles huge chunks very small images and line-height. When the amount of images are low, and especially when they are more than a single pixel in height, Firefox displays the DNA image just as any other browser. But, when you display about 1200 small images next to each other, it goes completely wacky.
Instead of positioning each image neatly in a grid, it adds 1-2 pixels gabs everywhere.

Secondly, WEB2DNA is enhanced using un-supported CSS filter effects. This effect slightly blurs the image, making it look more real - but only in Internet Explorer.� This was not done because I prefer any particular browser, but because "I can".

So, for the full effect use something else than Firefox (this is art, not a browser war - so don't comment about it.).

Please note: WEB2DNA does not include URL error handling. If you enter an invalid URL the system will fail, spewing out a rather technical error message.