Teenage Superhero
October 17th, 2008. Categories: Projects.
Teenage Superhero Full Map
Teenage Superhero is my most recent website artwork. It’s a single-page website invoking the capabilities of Infinite Canvas, and tells the short story of a very self-centered, presumably female, teenage superhero.
For those unfamiliar with the term, Infinite Canvas is a webcomics concept. Unlike the constraints of print dimensions, comics on the web (or in this case, a website) can extend infinitely in any direction. This concept was introduced by Scott McCloud in Reinventing Comics.
I’ve been using Twitter since the beginning of September, and the inspiration for this project came from wondering what the Twitter feed of a superhero or other fictional character would be like. I’m a big fan of the stream-of-consciousness capabilities Twitter has, so I wanted to arrange each thought into a large map that wanders around the canvas like the mind wanders from thought to thought.
To look at this site, the browser window is used as a viewfinder to observe a small part of the map at a time. There are handy arrows that point you in the direction you need to scroll next. (I reccommend using the mouse scroll button to scroll up and down, and using the mouse pointer to scroll from left to right, OR press down on the mouse scroll button to get the icon with four directional arrows, and just drag the mouse around as you read.)
Excel Map
To build this website, I first made the images that represent the character’s individual thoughts. When I had quite a few of them, I then made a map in pencil on graph paper, and marked the in-between blocks with the squares I knew would be images of arrows. I converted this to a digital version using Microsoft Excel, then used that as a visual guide to setting up the actual HTML code. The map is structured using a table.
