Subterra.in


Ever since I read the excellent Silo Saga at the start of this year, I’ve become a little obsessed with the idea of things underground. At the same time, I’ve really been enjoying making pixel art, especially for my Avatar Museum. So when I had the idea for the story behind my newest project, the two seemed like a perfect fit.

The new thing is called Subterrain.

It’s a coming of age story about a cow who—

Ok, not really. Maybe the name is a bit of a giveaway as to what’s going to happen in the story. (I sure hope so, because I haven’t quite decided yet.) It’s a story about what happens when you dig down deep into the earth, in an alternate universe where everything is made of pixels.

How does it work? It isn’t animated. Instead, each week or so I’ll be uploading a new snapshot of the scene, and the story will unfold that way.

It’s best viewed on a desktop/laptop because that way you get to see things magnified through a lense, like this:

If you’re on mobile, you can pinch and zoom to see detail up close.

Anyway, I’m really looking forward to telling this story. I haven’t seen this kind of thing done in too many other places. So I’d love if you’d check it out at subterra.in.

Technical Stuff

How hard can it be to make a big pixellated image and show it on a website with a doohicker that lets you zoom in?

Oh boy.

First of all, you have to figure out how to tame Photoshop so that it lets you work with pixel art. I found these articles helpful: Configuring Photoshop For Pixel Art and Learn How to Draw Hand-crafted Pixel Art in Photoshop.

I also use the Dots (Pixel Art) iOS app quite a lot for drawing smaller, individual parts of the picture. It’s easy to use whilst you’re holding a baby, which is pretty helpful.

Once you’ve managed to create your images, you’re about halfway there.

  1. Images larger than 1024 x 1024 just won’t show up on iOS, so I had to figure that out, and slice each picture up into tiles instead.
  2. When you hover over the image, it uses the OKZoom jQuery plugin to display a zoomed in version in a loupe, which is actually a different image. This image is 5x larger than the original, because if you let it get scaled up from something smaller, it looks blurry and awful.
  3. Firefox won’t always quite snuggle tiled images up to one another, leaving 1px gaps between some of them, which looks awful. So to solve that, I made the background of the div that contains the images the large version of the image. This means that where there are gaps, they get filled by whatever should be there anyway.
  4. Of course the “hover to zoom” thing doesnt work on mobile. You have to pinch-zoom there. And on iOS, the big image doesn’t load, anyway. So I’m using Modernizr to detect whether you have a touchscreen, and if you do just popping up an alert to “pinch to zoom!”. The loupe is disabled in these cases.
  5. Oh yeah, the loupe messes up the page a bit when you put it so that part of it is off the page. So I’m using this code to partially stop that from happening:
    html { overflow-y: scroll; overflow-x: hidden; }
  6. There’s a pagination script which is the simplest way I could figure out to let people page through the story (you won’t see that till more than one scene is posted) without installing an entire CMS. It probably would have worked out simpler to install an entire CMS. Oh well.

Anyway, no more tinkering. I hope.