algorithmic gif compositions

a case study

A Tribute To Heather - Blimp

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 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.

hot air balloon piece by Evan Roth

The specific algorithmic compositions we'll be recreating from Evan's "A Tribute To Heather" series are and 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.

Homework / Review

Here is the initial "tribute to heather" we made in class. Here is the circular version which makes use of the sine and cosine functions in JavaScript (which, like the "random" function we explored last week, is part of JavaScript's Math object). Here is a slightly more advanced interactive version wich makes further use of the DOM API's "events" system.

Below you'll find interactive examples where you can review all the core concepts of the Web's DOM API we covered in class with netnet (as well as some we likely didn't get to cover).


The DOM (document object model) API is the most fundamental browser API, it's how we manipulate our page's HTML/CSS through JavaScript and forms the foundation of any web application.

the DOM basics
removing/replacing elements
creating/adding elements

DOM Events

"event-driven programming is a programming paradigm in which the flow of the program is determined by events such as user actions, sensor outputs, or message passing from other programs or threads", the DOM provides us with an API for doing just that in the browser.

click event (basic)
other events
the event object
keyboard events
multiple click events