Expanding on the core JavaScript/programming concepts we learned last week we'll continue our exploration of "algorithmic composition" by taking a look at an internet art piece called A Tribute To Heather (2013) by Evan Roth.
A Tribute to Heather consists of ten compositions created by embedding a single animated GIF in a website hundreds of times to produce a rich tapestry of color and motion. The URL of each composition serves as its title, describing the repeated animation and the background color. Because file load times vary every time a One Gif Composition website is accessed, each viewing is unique.
The animations in A Tribute to Heather were sourced from Heathers Animations, a sprawling hand-coded archive of 90s-era animated GIFs and background images operated by its elusive namesake, Heather. Founded in 1999, the site maintains the ethos of the early web, eschewing author attribution and copyright concerns to offer a wandering taxonomy of thousands of downloadable images."
Museum of Moving Image
The "ethos" of the early web mentioned in the Museum's description of the piece refers to the "digital folklore" we discussed last semester (see the video below as a recap of this concept). Unforntuatley heatheranimations.com no longer exists but you can visit an archived version of it on the Internet Archive.
Today we're going to recreate our own "Tribute to Heather" in the style of Evan Roth by building on the core concepts we learned last week by exploring the browser's most fundamental API, the Document Object Model (or "the DOM" for short) which we can use to create dynamic HTML/CSS content.
Web browsers have built in "APIs" (application programming interfaces) which are collections of variables and functions that we can use to do all sorts of things. There are browser APIs for generating sounds, for getting data from other servers, for creating 2D graphics and 3D graphics, for creating Virtual and Augmented reality and so much more.
We'll be exploring some of these other APIs (as well as libraries built on them) throughout the quarter, today we'll start by explring the DOM API which is arguably the most fundamental of all the browser APIs. When the browser renders our HTML page, behind the scenes it also creates a JavaScript Object named "document" which represents our entire HTML page, with all it's HTML and CSS. This special "document" Object has all sorts of built in properties (internal variables) and methods (internal functions) that enable us to interact with the HTML/CSS content on our page. You can review some of the core concepts with netnet via the links below, but you can also learn all there is to know about this API at Mozilla's developer docs on the DOM.
The specific algorithmic compositions we'll be recreating from Evan's "A Tribute To Heather" series are hotairballoon-on-whitesmoke.com and blimp-on-deepskyblue.com. Remember, as we learned last quarter, you can right-click on any page and choose the View Page Source option in the context menu to view the code of any website, which means we can see exactly how Evan created these pieces, but because these pieces were made 10 years ago they written with some outdated JavaScript, so before we inspect Evan's souce code we'll be recreating his algorithms from scratch using more modern syntax and techniques by making use of the latest features in the browser's DOM API.