I'm a visual artist and writer in St. John's, Newfoundland, Canada.

For more frequent updates, follow me on Instagram or Medium.

Recent Posts (page 15 of 15)

Make No Wonder and Random Islands

  • Random polygon islands 1
  • Random polygon islands 2
  • Random polygon islands 3... one big one.
  • Random polygon islands 4
Random polygon islands 1

Random polygon islands 1

Random polygon islands 2

Random polygon islands 2

Random polygon islands 3... one big one.

Random polygon islands 3... one big one.

Random polygon islands 4

Random polygon islands 4

I found out recently that I have been awarded a Professional Project Grant from the Newfoundland & Labrador Arts Council to work on an interactive digital art project. My proposed project is to create an ecology-themed game artwork, tentatively titled Make No Wonder. I’ve posted a little about it on my Projects page.

This project is a progression from a couple of previous art-game projects, Probable System and Favimon. Probable System is an exploration game that takes place in a typographical world inspired by Canadian experimental poet bpNichol (it can be played online at probable.ca). Favimon lets you collect and battle your websites based on their favicons in a never-ending quest to capture every website, and can be found at favimon.com. In February 2011, Favimon won the Most Original award in the Mozilla Labs Game On 2010 open web gaming contest. I wrote a long blog post about developing Favimon for the Mozilla Labs blog.

Make No Wonder will take place in a virtual archipelago, allowing the player to explore the environment, gather resources, and gradually build bridges, rafts, and other forms of technology. As players explore, their actions and traces permanently affect the ecosystems of the islands, encouraging them to think critically about their choices. The artwork will investigate ecological concepts such as biodiversity, resource management, and invasive species. The game will be coded in HTML, JavaScript and PHP, and will run in a web browser. I have a ton of ideas for things that I want to work into the game, some more challenging than others. I’ll be writing about the project here as I work on it, including posting some code and links to interactive demos.

The images above are from some early sketches for Make No Wonder; I wrote a little script that generates random polygon-based islands on a square grid. I’ve been experimenting with the Raphaël JavaScript library for this project. It’s a great way of working with SVG (vector graphics) in JavaScript, but it’s been a bit finicky trying to get it to play nicely with jQuery, and it slows down considerably when dealing with hundreds of SVG paths, so I may not end up using it for the final project. Still, it’s been handy for quickly prototyping things. I’ve actually done a lot of work since generating the polygon islands above, and have been experimenting with hex grids instead of square tiles. Hexes can be very unintuitive from a coding perspective, but they allow for a less boxy-looking landscape, and movement across hex tiles feels more natural. It probably also helps that I have been playing a lot of hex-based games such as Settlers of Catan and Slay. One inconvenience about hex maps is that movement in six directions doesn’t map nicely to arrow keys, but I want to work with mouse-based interaction for this project anyway, as it will be easier to translate into a touch interface.

I’m really thrilled and honoured to have received the Arts Council grant. I put a lot of work into my application, but wasn’t sure the committee would go for it; the idea of games as artwork is still something that has not gained wide acceptance. I am incredibly grateful to the NLAC for granting me the opportunity to really focus on this project over the summer, and am looking forward to documenting the project here as I go.

Summer So Far

Mid-June and I am in the middle of many things. Working regularly on a content management system for The Humber River Basin project, as well as several freelance web design projects, so I’m spending quite a bit of time tinkering with WordPress code. A day spent designing and coding never feels wasted, and is considerably easier with an open window, good music, and a cup of tea or two.

Part of what I really enjoy about web design and writing code is the way that each previous project builds on the last; each time I start a new site or WordPress theme I am building on previous work, so each ends up better than before, and I’m always learning how to do new things. For the projects I’m working on now, I’ve been looking into creating customized options pages for WordPress themes, and using custom post types to make it easier to create separate types of content for clients. I’ve also been updating how I code and style some common elements like search boxes and tag links.

Setting up this blog is something I’ve meant to do for a while; I’ve had various blogs on this site, but haven’t had a space to post about art exhibitions, web design or other professional practice stuff for a while, so this is for that. More importantly, it will also be a space for sketches and notes as I work on Make No Wonder, a game art project for which I have received a Newfoundland & Labrador Arts Council grant. My photoblog has been mostly gathering dust since I got back to Corner Brook… I have some photos to add, just haven’t had a chance to put them up yet.

I also plan to post code snippets, links, and other stuff I’d like to have around as a reference for myself and others. I’m going to retroactively post some stuff that happened over the past year, too, so that there is a record of it somewhere.

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.

“Book Return” Exhibition

  • "Island of Sheep" (front)
  • "Island of Sheep" (back)
  • "Remote Sensing"
  • "Book Return" at Ferriss Hodgett Library, Grenfell Campus
  • "Island of Sheep" in the exhibition
  • "Remote Sensing" in the exhibition
"Island of Sheep" (front)

"Island of Sheep" (front)

"Island of Sheep" (back)

"Island of Sheep" (back)

"Remote Sensing"

"Remote Sensing"

"Book Return" at Ferriss Hodgett Library, Grenfell Campus

"Book Return" at Ferriss Hodgett Library, Grenfell Campus

"Island of Sheep" in the exhibition

"Island of Sheep" in the exhibition

"Remote Sensing" in the exhibition

"Remote Sensing" in the exhibition

Book Return is an exhibition of bookworks created by participants in Printed Matters: The Disembodied Book Made Whole (again), a workshop by visiting artist Scott McCarney. The exhibition is on display at Ferriss Hodgett Library, Grenfell Campus, Corner Brook, NL.

I really enjoyed Scott’s workshop, it was an intense week of studio time, and the physical act of dissecting and reworking old books was a refreshing change from my mostly digital practice. I tried a few different things during the workshop, and showed two bookworks in the exhibition, Island of Sheep and Remote Sensing. I made Island of Sheep rather spontaneously out of an old novel whose cover caught my eye – turns out John Buchan was not only a novelist but served as Governor General of Canada, and wrote The Thirty-Nine Steps, famously filmed by Hitchcock. The novel Island of Sheep was a sequel to that book, and a bit of an adventure story. Inspired by the paddler on the cover, I cut a series of waves from the pages that extended back into the book, creating a scene with some depth. I liked the effect but it didn’t feel finished, at which point I found a perfect passage in the text: “There was no time to waste, so I plunged at once into my story.” I cut a slot into the bottom of the book to reveal the text, and added another small hole at the top, which helps to activate both the sky area and the back cover. This work was created entirely by cutting into the original book.

For Remote Sensing, I found a fantastic old book about remote sensing (aerial photography and such). I had a few different ideas about how to work with this volume, which was full of beautifully precise maps. The “remote sensing” theme also seemed to suggest a process which would not involve damaging the original book. I eventually decided to scan every page of the book that had a map, digitally combining these images by superimposing all the map sites according to their original positions in the text, creating a sort of geographic cross-section of the book. I composited this map with a scan of the back cover of the book, which had a wonderfully distressed landscape-like texture, and made a large print of the work for the exhibition.

Content ©  2017 Matthew Hollett. RSS