i-Dat 203 Negotiated Project

Original Proposal

Quickly defined, I originally wanted to create a piece of generative art that builds its behaviour based on a scripted interpretation of any given website. A lot of my inspiration for this concept came from the work created by the generative artist Stanza.

However furthermore I hoped to develop perhaps a browser 'plugin', similar to those that defend a browser from websites that create popups, which instead of blocking them displays the popup with its content modified by the generative art.

In effect the piece adds another dimension to the generative process, where the effect of converting the popup advert, a widely perceived contemptible aspect of web browsing, into an intriguing piece of artwork becomes the art itself.

View my original proposal.

Artist: Stanza

The work of generative web artist Stanza was one of the greatest influences and inspiration for this project, when I was introduced to the collection of pieces called Amorphoscapes that are essentially art pieces that are the product of a generative process. I was particularly inspired by the way pixels could be made to draw over a surface of text, and in addition by another Stanza piece that was created by the result of a generative modification of the familiar BBC news website.

Websites to Code

Transferring the HTML information of a website was made relatively easy by the fact that I had worked with a similar mechanism previously for a first year flash project. Available from Dan Efergan's teaching material is a downloadable php script that obtains the information from a website and converts it into a flash-ready variable.

Here is a demonstration of a typical page request (http://www.srjm.co.uk/) that creates a variable string from my own website's source.

levitated.net

With the basis of being able to transfer a website's HTML code into a form manipulatable in macromedia flash I started looking into how flash could be used to draw from code. When searching for iterative visual processes I came across Levitated.net (http://www.levitated.net/daily/index.html) which features many open source scripts that draw various things. It gave me the opportunity to study how actionscript could be used to images.

However one script in particular stood out for me, and that was the emotion-fractal, that takes a list of words and randomly prints them in a fractal-like process, eventually filling the entire page with words. From this I could create my own piece that filled the canvas of a webpage with words taken from its underlying HTML code.

Text Fractal

This was the final result of taking a website's HTML and displaying it through the code, again using my own website as a source:

Example of the text generated from my own website

Dadaist Cut Up Technique

This process is not too dissimilar to the dadaist cut up technique either, where the random selection of HTML arranged to create a new object is comparable to the way assorted words were randomised to create new poetry.

Displaying the Source

I had managed to create a generative piece that takes and reinterprets HTML code from websites however a clear objective I had set out from the beginning was to be able to see the original 'input' website underneath the artpiece. With the exception of a the very simple HTML <iframe> method, getting a completely separate website's content to display in my own was never going to be easy.

Using the existing PHP script for loading the HTML content from another website as a basis, I modified this so that it output the contents exactly as they are given rather than creating an inert URL encoded string. This required a lot of changes and research towards PHP string related functions, some of the things I used are listed here:

http://www.hudzilla.org/phpbook/read.php/4_7_5

http://www.wellho.net/forum/Writing-PHP/Adding-spaces-to-a-string.html

http://us.php.net/substr

function str_insert($insertstring, $intostring, $offset) {
    $part1 = substr($intostring, 0, $offset);
    $part2 = substr($intostring, $offset);

    $part1 = $part1 . $insertstring;
    $whole = $part1 . $part2;
    return $whole;
}

Resizing Flash

In either prototype an issue I found was that while the flash assumed the entire size of the browser window, the text fractal only filled an area of a fixed ratio meaning that especially wide or tall screens will suffer from white areas on either side. To fix this I did one of two things, I added the ability to set externally the size of area that the text fills (defaults have always been 800 by 600 pixels and the second was to simply change the embedding option of SCALE to exactly fit the entire area.

Flash before scaling showing clearly the white gaps to either side Flash after scale had been set to exactfit

Prototypes

Example 1:

The example prototype 1 uses PHP scripting to display the source page exactly as it would appear if the page was opened itself, with the exception of my own code being embedded on top.

Example 2:

Example prototype 2 uses a simple iframe to produce the cleaner result however, there are two seriously significant problems with this.

Iframes do not necessarily work across all the browsers as expected, and there is no gaurantee that they work at all. But also when an iframe does work as expected, although it will display an exact copy of the source website, certain details are lost such as having the title and webicon of the source site. The information from the website somehow feels less involved in the process with this method.

And finally, content such as flash files embedded into the source website appear over the top of my own fractal text which is a serious issue since I want to target popup adverts which heavily rely on embedded content like this.

Implemented as Popup

Demonstration on what a popup may appear like (avoid using any real popup blockers). These popups are saved versions of real ones found after disabling all of my blockers and a short visit to screensavers.com...

Simon R.J. Mutton