I'm a visual artist, web designer, and art educator in Corner Brook, NL, Canada.

Posts tagged “Digital Art”

Internet Walk

index of first lines at Reese Bullen Gallery

index of first lines at Reese Bullen Gallery

My digital print index of first lines is currently being shown in the art department faculty & staff show at Reese Bullen Gallery, Humboldt State University, in Arcata, CA. I’m currently teaching Web Media & Design here at Humboldt.

Here’s the artist statement you can see on the wall there:

I am interested in adapting digital photographic data into information systems usually associated with language and literature, such as an index of first lines.

Occasionally found in anthologies of poetry, an index of first lines lists poems alphabetically according to each first line, eschewing authorship, title and chronology. A reader might not always recall the title or author of a poem, but is likely to remember how it begins. I’ve always found indexes of first lines amusing as exercises in found poetry – reading the lines sequentially often results in a charmingly garbled, wandering diatribe, full of false starts.

index of first lines contains the first row of pixels from every image created with my first digital camera, from the day I bought it until the day it died. The lines of pixels are stratified in chronological order, with the earliest photo at the top. The resulting image contains 2048 × 5197 pixels (my camera produced images that were 2048 pixels wide, and there are 5197 photos).

Software tools such as Photoshop often impose a film-photography metaphor onto digital imaging. To get away from such metaphors, I use computer programming to manipulate digital image data in a way that is intrinsically digital. In this work, a PHP script was used to copy pixels from thousands of photos on my hard drive and compile them into this image.

index of first lines is a product not only of a digital camera, but of computer code. It is composed of a series of sequential images that are never perceived individually. Like an index of poems, its usefulness as a reference device depends on my memory. Taken out of context, it has a certain surreal quality.

While it’s impossible for me to identify individual photos, looking at this image does bring back memories. Thicker bands of colour indicate distinct sessions of photographing, when I snapped many photos with similar backgrounds. For instance, a certain band of white near the centre is the trace of the overcast sky on the afternoon I first visited Stonehenge. In this way, index of first lines is a cross-section of my memory, or at least my photographic habits. Examining it is an act of reading.

The faculty and staff show is open from September 13 – October 4, 2012.

Paint buckets and particle physics

“We don’t need more media ecologists raising their fists in boosterism or detraction, painting overly general pictures with broad brushes. We need more media entomologists and media archaeologists overturning rocks and logs to find and explain the tiny treasures that would otherwise go unseen. We need more media particle physicists and media nanotechnologists explaining the strange interactions of the tiniest examples of various media, videogames among them.”

— Ian Bogost, from How To Do Things With Videogames

“Today, as more artists are turning to new media, few are willing to undertake systematic, laboratory-like research into its elements and basic compositional, expressive, and generative strategies. [...] Those few who are able to resist the immediate temptation to create an “interactive CD-ROM,” or make a feature-length “digital film,” and instead focus on determining the new-media equivalent of a shot, sentence, word, or even letter, are rewarded with amazing findings.”

— Lev Manovich, from The Language of New Media

This morning I finished Ian Bogost’s “How To Do Things With Videogames”, and this excerpt from his conclusion reminded me of Lev Manovich’s similar appeal to new media artists to do a little labwork. I am quite drawn to the idea of systematically exploring what distinguishes digital media from other media. I’ve tried to pursue this in projects such as index of first lines (which is currently being shown at Reese Bullen Gallery here in Arcata) and The Complete Works (after bpNichol).

In 2005 I coded a very basic raster image editor, pixelpad. I had just finished art school, and was thinking about what it meant to be a digital artist. For me, coding an image editor was an exercise in getting to know my materials, akin to a painter learning to mix his or her own colours. I can’t say that I was “rewarded with amazing findings,” but I definitely learned a lot, and it made me question some of my assumptions about what I was doing.

pixelpad was hacked together with JavaScript and PHP, and used HTML <div> elements for pixels. It was pretty easy to get started, and I quickly added a lot of small details like the thumbnail preview, a pixel grid that could be switched on and off, a resizeable canvas, and shortcut keys.

Coding the fill tool was pretty challenging, and I remember questioning whether I really understood how a “paint bucket” tool worked. The logic is something like “when the user clicks on a pixel, check whether each adjacent pixel is the same colour; then repeat as necessary, checking whether each pixel adjacent to the previous pixels (which have not already been checked) is the same color; when all adjacent pixels have been checked, fill all appropriate pixels with the current colour.” In 2005 I knew a lot less about coding than I do now, and I remember my browser freezing up dozens of times as I accidentally created infinite loops. I also had to figure out small details, such as whether diagonally adjacent pixels should be included. In the end, I got the fill tool working to my satisfaction. I never did get the “generate png” function to work properly.

A screenshot of pixelpad.


Get Adobe Flash player

I’ve been making interactive digital art since I was a kid, most recently in the form of HTML5 games. I’ve used a lot of different languages and software over the years, including GW BASIC, Mario Paint, Klik & Play, ImageReady, HTML and JavaScript. For a long time, especially as an undergraduate student, I used Adobe Flash to make interactive web artworks, such as speechballoon. Here’s a collection of even older work that is mostly done with Flash.

I gradually moved away from Flash. I remember being really frustrated with Adobe’s shift from ActionScript 2.0 to 3.0, where the language changed so much that it felt like I had to relearn it from scratch. As I learned more about programming and publishing things on the web, I resolved to spend my time learning more open, standardized technologies such as JavaScript, which are more community-driven and not as subject to the whims of a single corporation.

However, Flash is part of a class I’ve been asked to teach this fall, so I’m spending part of the summer refamiliarizing myself with Flash CS6. At first it was a little disappointing. I was surprised to find that the brush tool in Flash seems to work exactly as it did in 2004; the inability to make the brush larger except by zooming in and out feels awkward and outdated. I had also expected that Adobe would have ironed out some of the discrepancies in the Flash interface compared to other Creative Suite products, such as the colour selection tools in Flash being totally different than the ones in Photoshop and Illustrator.

Aside from these frustrations, though, I’ve been surprised at how easy it is to pick up again. There’s a fluidity to drawing in Flash that I’d forgotten about. It’s not the interface itself, which I find a little clunky compared to Illustrator or Photoshop. It’s the way the software simplifies vector drawing, especially compared to Illustrator. In Illustrator, each vector brushstroke remains a distinct shape and is listed in the Layers palette. This discourages me from drawing rapidly and freehandedly as I might on paper, because doing so generates dozens or hundreds of individual little vector shapes which I am tempted to micromanage, naming and grouping everything. And so in Illustrator I’m drawn to the pen tool, where I can draw precisely, but with much less spontanaeity. With Flash, multiple vector shapes drawn on a layer simply merge together. This abstracts away some of the messiness of freehand vector drawing, and so I simply draw.

So having dug out my old drawing tablet, I’ve been drawing, animating, and making some new interactive sketches. The one above is called Highrise.

Of course, even Adobe admits that Flash is not nearly as ubiquitous as it once was. It is also buggy beyond all reason; as I attempted to resize and export the above drawing for this blog, Flash CS6 crashed twice. But spending some time with it again has made me realize the usefulness of a visual interface for quick sketching and prototyping. I’d love to see new drawing and animation tools emerge that are geared more towards working with HTML5.

The Complete Works (after bpNichol) on Lemon Hound

My digital image / poem The Complete Works (after bpNichol) is featured on Lemon Hound today. I originally posted the work on my previous blog, oughtful. Thought I’d post the work and statement here as well.

As a visual artist who is interested in poetry and experimental literature, bpNichol has long been a source of inspiration. The Complete Works from An H In the Heart is one of my favourite poems; I love the way it epitomizes bp’s playful exploration of combinatorics, meta-literature, typography, and visual systems.

In The Complete Works (after bpNichol), I sought to translate bp’s poem into the realm of digital imaging; in the same way that bp’s poem consists of every character on his keyboard, my image proposes every possible pixel colour. Wanting to echo the aesthetic of bp’s typewritten text, I displayed the image as if in an old Mac OS window.

I made The Complete Works (after bpNichol) in 2006. At the time I was working on “index of first lines”, a digital artwork in which I used PHP code to compile the first line of pixels from thousands of my digital photos. Much of my digital artwork involves mashing systems together, applying the rules or elements of one system to another to see what new systems emerge.

bpNichol’s The Complete Works, from An H In the Heart:

Game On Spotlight: Favimon

This is a guest blog post I wrote for Mozilla Labs. It’s on the Mozilla Labs blog, and I’m cross-posting it here.

Press Start

Favimon is a browser-based game which lets you battle your favourite websites, building a collection of favicons in a never-ending quest to conquer the web. It was awarded Most Original in the Mozilla Labs Game On 2010 competition. My name is Matthew Hollett, and Mozilla has asked me to write something about how I made Favimon.

I am a visual artist, working primarily with web-based art, digital photography, and other new media. I completed a MFA at NSCAD University a few years ago, and am currently teaching in the visual arts department at Memorial University in Newfoundland, Canada. I am also a freelance web designer.

My interest in digital art and interaction design was sparked partly by the games I played growing up. From travelling continents by cannon in Secret of Mana to mixing pixels in Mario Paint, video games let me explore and be creative. I filled sketchbooks and screens with drawings, and made a few games using software such as Klik & Play. During university I got out of gaming for a while, focussing on making art, writing, and learning to design and code websites. Now I teach university classes about making art with computers, and spend most of my time thinking about and making new media art. It’s through this visual art lens that I’ve found myself drawn to games again, this time as a creative activity. Game design allows my interests in digital art, storytelling, interaction design and web development to converge in a satisfying way, so making games has become one way that I get to play games while indulging my creative urge.

I have no training as a programmer, but have been tinkering with HTML and web development for long enough that I am quite fluent in HTML, CSS, JavaScript and PHP. I started learning jQuery a couple of years ago, and it’s made working with JavaScript such a joy that my ideas of what I can do have expanded considerably. I often build myself little browser-based tools to make my work easier – for example, I recently made a little app that lets me quickly swap photos around to see which pairs work best as diptychs.

Favimon.com versus Mozilla Labs


A Wild Idea Appeared!

My computer is littered with little text files that I use to record lists, notes, and ideas. Favimon began as a note in my ‘art ideas’ file: “A website which lets you collect favicons from other websites. Each favicon could be assigned stats based on characteristics of the image (like Barcode Battler).”

The idea sat there for about a year and a half before I found it again. In 2010 I started working on my first jQuery game, a Zelda-like exploration game called Probable System. The game is drawn entirely with text, and is inspired by the work of bpNichol, an experimental Canadian poet. After working hard to get Probable System ready for a gallery exhibition, I wasn’t really looking to start a new project. But I happened to reread my note, and it occurred to me that I could pair the favicon-collecting idea with a Pokémon-inspired battle system. The words “favicon” and “Pokémon” naturally portmanteaued into the name “Favimon”. Once I had the name, I knew I had to do something with the idea.

In my art practice, I often work with networks and systems – my photographic work has involved documenting places that are littoral zones between urban infrastructure systems, such as pedestrian walkways and traffic islands. I walk around with a camera a lot, and am drawn to marginal landscapes, places where a city gives way to wilderness. I tend to approach digital media in a similar way, and have found that mashing systems together – applying the rules or elements of one system to another – can create new systems where interesting things can happen. You can think of Favimon as a mashup of the favicon system with a battle-based collecting game, which creates a situation where the player’s collection can never be complete – there are millions of favicons, and they are constantly changing.

My artwork is often about finding things. With interactive art, I often try to include a means of exploration and discovery – I’d like to let the user experience the kind of enjoyment I get from walking around with a camera or wandering the web. I’ve never played Barcode Battler, which I understand is a pretty terrible game, but the idea of a system where you can discover characters in various media around you appeals to me. (A few people have mentioned to me that Monster Rancher works in a similar way, but I haven’t played those games either. I have also only ever played one Pokémon game, Pokémon Red.)

As a new media artist, I probably have a different perspective than many game designers – I don’t play a lot of video games, but I do look at a lot of net art. John F. Simon Jr.’s Every Icon, Olivier Otten’s selfcontrolfreak, and Rafael Rozendaal’s websites are artworks which resonate with me. I’m also quite interested in conceptual writing, such as the work of Oulipo and Kenneth Goldsmith. I play board games more than video games, usually Settlers of Catan and Scrabble. When I do play video games, it’s usually an indie game that I’ve heard people raving about, such as Minecraft or Braid. And I really admire thoughtful, explorative web games such as David Shute’s Small Worlds and the EYEZMAZE games.

Favimon Evolves

After coming up with the name Favimon, the game evolved rapidly as I worked on it for four or five hours a day for about a month and a half. One of my first steps was to register favimon.com – I sometimes do this when I think I have an idea worth pursuing, as the small financial commitment of buying a domain name motivates me to continue working on the project.

When designing interactive projects, I start by sketching prototypes on paper, then immediately start writing code – most Photoshop stuff happens later. Favimon evolved quickly as I started coding. I first imagined it as a toolbar, sitting at the top of the browser window so that you could collect favicons as you actually visited websites, but this wasn’t very fun and didn’t leave room enough for a complex game. My initial idea also involved using properties of the favicon file (such as the number of colours) to determine each favimon’s attributes, but I soon realized that the game worked better if the attributes were based on characteristics of the website itself, such as whether it was a blog or a shopping site. This led to the development of a database that associated sites with different classes.

Once I figured out the best way to retrieve favicons (using Google’s favicon API and Jason Cartwright’s getFavicon app), I started using jQuery to manipulate them, first applying animated effects and gradually adding more complex interactivity. CSS is used to display larger versions of the icon images without losing the pixellated effect, though of course the CSS properties which allow this (image-rendering and -ms-interpolation-mode) are not yet supported in all browsers. The databases associating URLs with classes and classes with actions are contained in PHP files, accessed via AJAX.

When a player enters a URL in Favimon, the game checks to see if the site is in the database. Each site in the database is tagged with classes such as ‘blog’, ‘webservice’ or ‘nonprofit’, and those classes determine the possible actions the favimon might have. Well-known sites such as Google and Facebook have their own classes, which lets me add site-specific actions such as ‘Googleplex’ and ‘Zuckerpunch’. I’ve also added site-specific classes for sites I really like – try minecraft.net, qwantz.com, or rhizome.org. There are a limited number of types of actions (damage opponent, heal, heal teammate, sleep, poison, and so on), but there are hundreds of different action names. It is possible to randomly find favimon with special classes such as ‘lucky’ and ‘shiny’ which are more powerful, and I’ve also been adding classes such as ‘santa’ and ‘valentine’ which can only be found at certain times of year.

Although I didn’t find out about the Mozilla Labs contest until after I had started working on the game, Favimon was always intended to be an HTML-based game, so it was an easy fit for the Game On competition. Years ago I used Flash to make interactive art, but now I much prefer open source, community-driven technologies which do not depend on the whims of a single corporation. Also, as a web designer I prefer to support web standards and accessible design. Any lingering interest I had in working with Flash has disappeared as I learn more about the possibilities of tools like jQuery and HTML5.

I am not a very clever programmer, but learned a few things as I hacked my way through developing Favimon. Since the favicon files are so small, it was easy to check for duplicate icon files using MD5 hashes. I spent a lot of time working on the timing of actions and fixing bugs (for a while, double-clicking an action would let you attack twice!). jQuery UI and plugins such as timers and qtip2 saved me from reinventing many wheels. The game really came together when I added the auto-suggest feature – it saves the player the trouble of trying to remember URLs, and it only suggests sites from the database, which are the best ones to collect anyway since they have themed actions.

It wasn’t obvious at first which favimon the player should start with – I thought about starting with a site everyone would recognize, like Google, before realizing that conceptually it worked better if you started with the favicon for favimon.com. So that’s where the little yellow F character came from.

A favicon is often the last thing I make when I design a website. It’s difficult to represent an entire website with such a tiny image, and I think favicons are really underappreciated pieces of web design. While working on Favimon I’ve had a close look at hundreds of different favicons, and still occasionally find new ones which surprise me. A few of my favourites are zefrank.com, zeldman.com and harkavagrant.com.

Someone sent me this screenshot of their Favimon collection.


A Never-Ending Quest

Favimon is still in beta, and will likely be for some time. I don’t always make projects public before they are finished, but in this case it’s worked well, as the feedback from players (via Twitter) has been extremely helpful and encouraging. It’s also helped me prioritize as I develop the game. For example, when I first launched Favimon, there was no way to save your game, but this turned out to be by far the most-requested feature, so I added it sooner rather than later.

I first launched the game on MetaFilter Projects – MetaFilter is a great community, and pretty much my favourite website. From there, it was posted to the front page and picked up by The Daily What, Dorkly, StumbleUpon, and a few other high-profile websites. Favimon has attracted quite a bit of traffic over the past two months, to the point where my shared web hosting is starting to cave under the pressure – I am currently researching dedicated web hosting.

At the moment, the biggest issue with Favimon’s development is figuring out how the database of sites and actions should work. The database is used to assign themed actions to each site – if a site is not in the database, then it has generic actions like ‘Click’ and ‘Cookie’, which is not as engaging for the player. Obviously a custom-built database of thousands of websites is time-consuming and arbitrary, and a few people have suggested that I somehow tag websites automatically. I mostly agree, but haven’t found a satisfying way to do this yet. In the meantime, I keep tagging sites! Right now there are just over 2000 recognized URLs, an assortment culled from lists of popular websites and brands, sites I use a lot or have heard about, sites linked by other prominent sites, and sites that have interesting favicons. The custom-built database allows me a great deal of control, and gives the game a certain personality. But it’s difficult for me to quickly tag sites that are in other languages, and with thousands of entries organized manually, the list is quickly becoming unwieldy. So this is something I would like to resolve eventually.

My to-do list for Favimon includes adding a more complex battle system, improving performance on mobile browsers, and redesigning the visual interface. My goal is to make the game challenging enough to reward replay, without making it too complex for casual players. I’d also like to add more community features to the site, allowing players to communicate and contribute more to the project. Ideally, players would be able to battle each other, but this will require solving a few problems – for example, it’s difficult to prevent players from cheating, since all the save data is stored in cookies and can be easily tampered with. I am a little busy teaching at the moment, so most of these plans will have to wait until the summer.

For me, the most fascinating response to Favimon has been seeing players engage with the game in ways I never expected – saving screenshots of their collections to share with each other, using Favimon screenshots to illustrate web rivalries like Facebook vs. Twitter or WikiLeaks vs. the U.S. government, or posting videos of gameplay to YouTube and setting them to music. One of my favourites so far is a player who collected favimon in a certain order so that the icons spelled out ‘FAVIMON IS GREAT’! I’d like to further develop the game in a way that encourages experimentation and expression like this.

I’m happy to have been part of Game On 2010, and deeply honoured to have won the Most Original award! Thanks again to everyone who played, voted, tweeted, or sent suggestions or bug reports – Favimon wouldn’t be the same without your participation and encouragement, and I really appreciate it.

If you’re interested in keeping up with development or want to get in touch, follow @oulipian on Twitter.

Content ©  2014 Matthew Hollett. RSS