WEB2DNA - the art project

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.

Try

WEB2DNA - convert you website into DNA art (baekdal.com, July 2006)
WEB2RSS - convert almost any website into an RSS feed (baekdal.com, July 2006)

Comments

Folletto Malefico - Aug. 3, 2006

Great one!

This work fits perfectly in my background research of trying to "visualize" machine code in something "artistic".

Thumbs up. :)

I was asking "in what language is it?" but I noticed it by getting the app to an error :P

Thomas Baekdal - Aug. 3, 2006

Foletto,

-- I was asking "in what language is it?" but I noticed it by getting the app to an error :P

He he :)

It is made using very old-school ASP. My development platform of choice is Visual Studio 2005 Professional, so I am pretty much only doing ASP, ASP.NET, VB.NET or .NET 2.0 (and soon ATLAS).

My development style is focused on modular anarchism. I have made a lot of code-libraries that I can reference to cut down development time (e.g. getting data from an external source is a single line of code). But, if I run into a problem I often solve it using brute force. Fixing the problem first, making it "pretty" later.

Walt - Aug. 9, 2006

Just want to let you know that this works fine with the latest version of Firefox (1.5.0.6).

Great art!

Thomas Baekdal - Aug. 9, 2006

Wow, this project is really taking off.

The system has made over 77.000 visualizations - within the last week. That is more than one every 7 seconds.

It peaked saturday with a new DNA made every 3 seconds!!!

Thomas Baekdal - Aug. 9, 2006

Now more than 80.000 conversions :)

I have also recieved reports that the system has been down on both Saturday and Monday (for short periods of time).

My guess is that the server overloaded due to heavy demand. WEB2DNA was made for fun, and as such scalability was never even considered.

I apologise to those who experienced it!

Anonymous - Aug. 10, 2006

http://blog.naver.com/11250394

Thomas Baekdal - Aug. 10, 2006

Just updated the performance - the server was having a hard time keeping up. Now each conversion should be done twice as fast (less than 2 seconds for getting the website, analyzing it, converting it, and outputting the graphics).

...and we reached a staggering 90.000+ conversions. Amazing for a project that was done for fun one saturday evening.

Thank you all!

Felipe - Aug. 10, 2006

This is a so beautiful visualization! Congrats!

My blog's DNA is my new wallpaper! Thanks..

Stephanie, Oh - Aug. 12, 2006

I wrote your great WEB2DNA in my Naver blog's.

http://blog.naver.com/kulukulu7/80027349605

↑ click here~♡

MKColling - Aug. 12, 2006

Thank you. I have no idea what's going on; but both my blogs and both my sites have DNA profiles now. I hope nobody thinks they're psychological profiles because my own designs look repressed compared to MovableType's.

What chance is there that somebody else's websites could have the same profile as mine?

Thomas Baekdal - Aug. 12, 2006

Felipe & Walt=, Thanks!

Stephanie, Also thanks - but, I admit I do not understand a word of it :o)

MKColling, Each line represents an (x)HTML tag, all the spaces represents words found on the page.

"What chance is there that somebody else's websites could have the same profile as mine?"

Well, it should be pretty slim. For two sites to be indentical, they have to share the exact same HTML code - and the same amount of words between each tag. It does happen.

e.g. all the Zen Garden CSS sites have identical DNA.

http://www.mezzoblue.com/zengarden/alldesigns/

Thomas Baekdal - Aug. 15, 2006

Fixing stuff...

I have made several changes to the DNA system, to fix that some sites was displayed with zero lines.

The first fix, didn't go as planned, as it fixed some sites, but destroyed others... now a seconds fix is on place.

Sites made entirely using frames is not supported, nor will they ever be. The reason is that WEB2DNA does not know which frame is the main window.

Aaron - Sep. 25, 2006

When inputting my site to the Web2DNA project, I receive the following error:

msxml3.dll error '80070005'

Access is denied.

/web2dna/default.asp, line 49

Thomas Baekdal - Sep. 26, 2006

Aaron, it is because you entry page redirect to another page.

Try this instead.

Ghost Rider - Oct. 9, 2006

I was thinking if any library is available to draw web 2 dna.

Victor Stapelberg - Nov. 5, 2006

I absolutely LOVE DNA for a site . Would you allow to DISPLAY the site DNA on my website as a opening graphic?

I actualy would love to use it as a Menu

I think GOOGLE should BUY you out for millions and put a SITE DNA for all http://www sites so before one clicks he knows what waters he/she will swimm in..like my site visualsenses dot com is is graphic intensive so SOME may hate it some may WANT it ..Anyway THANKS for your creativity..I wish I was more IT and less ARTIST but still am VERY "IT" oriented Artist.

bye4now Victor

Doveymx - Nov. 12, 2006

I am curisous about your mathematical method - like calculating the height of the images,Could you share it? Thanks.

Thomas Baekdal - Nov. 13, 2006

To calculate the height of each element is basically just to divide the maximum amount of elements with the actual amount of elements - and then correct it to 1px if there are too many of them.

DNAstrHeight = 2910 / CountElementsH

if DNAstrHeight < 1 then

DNAstrHeight = 1

end if

DNAstrHeight = Round(DNAstrHeight,0)

With WEB2DNA there is an added catch that it also compares this to the 10 vertical containers available - only filling the ones it needs. But it does so by adding empty DNA lines respectively.

Alec - Jan. 30, 2007

Have you got two examples of extremes between a semantically rich site and one with messy old-style code to provide a comparison

Post comment - Jan. 30, 2007

Post comment works ecah time ONLY on the second mouse click on POST COMMENT

Anonymous - Jan. 30, 2007

Alec, Uhhmmm... no. Not as such. I do not know of any sites where the only real difference is the backend code.

Adrian Salamunovic - Jul. 7, 2007

Thomas,

Thanks for creating such a cool concept- it drives quite a bit of traffic to our site. It's cool to know that we provided the inspiration for this!

Cheers,

Adrian

Co-founder

DNA 11

http://www.dna11.com

Thomas Baekdal - Jul. 7, 2007

Hey Adrian,

Thanks a lot, but as you said, your amazing product was what made the idea come to life. So the thanks really goes to you as well.

BTW: Someday I need to get my own DNA portrait :)

WEB2DNA is by far the most popular thing on this site. It has been the number one visited page every single month. It is not as popular as when I launched it, but it still used by 200-300 people everyday - and that is pretty good for a single page that is almost a year old.

kimberly woods - Oct. 14, 2007

Hi,

How do i aquire a photo of my own dna ? is it expensive and can you zoom in more?

warm wishes kimberly

Thomas Baekdal - Oct. 14, 2007

Kimberly, Do you mean your real DNA - or the DNA of a website?

1: You can get a picture of your real DNA over at DNA11 - see here: http://www.dna11.com/gallery_portraits.asp

2: For a website DNA simply take a screenshot.