100 Days: Gallery

A few months back, I collected all of the images and animations from my prior 100-day project in a gallery site. I tweeted the link at the time, but may have neglected to tie it back to this blog. Better late than never (this site’s spiritual tag-line):

As is the case with the majority front-end web development now, the app was made using a host of JS packages, but the main technologies used were: TypeScript, the AngularJS 2.0 beta, Sass, JSPM and Gulp. And although I use a fairly similar loadout at work, I was mainly interested in trying out Angular 2 on a small-scale project, given the enormous syntactic and notional differences between it and all 1.x incarnations.

I hosted the gallery’s source on GitHub, and while I wasn’t attempting to build a general-purpose gallery platform, I think it could easily be put to other uses. Give me a shout if you rework it into something else!

100 Days of Artifacts: Update

Approaching the halfway point through my 100 Day Project, I thought it might be a good time to reflect on the process with a critical eye, to call out some of my unconscious sneakiness and correct for bad habits.

Steering around inadequacies

It has proven a double-edged sword to post each item online. On one hand, I’d feel a deep shame to publicly miss a day or give up altogether; keeping everything private would remove that incentive to continue. But on the other hand, the prospect of posting something truly shitty is embarrassing, and so it has proven difficult to select concepts or media that I’m not already confident in.

This of course is absurd: the whole idea is to improve and expand my skill set. If I work only within safe bounds, I’m basically wasting my time. So… no more of this sort of thing!


Some of the pieces I’ve worked on have been more time-consuming to realise than others, and it’s hard to identify a clear pattern. I am probably homing in on a better understanding of which concepts/media have tight scope, and which might keep me up until 4am, but there are still surprises (in both directions, though usually for the worse).

This ties into my public posting issue, and the desire to not embarrass myself. (I am a shame-oriented individual.) One would probably consider it fair, in the spirit of the original project, after a taxing day at work and 3+ frustrating hours spent at a different computer, to down tools and admit defeat on that particular idea; sharing whatever I had to show for it at that point. Aside from the fear of public failure though, I get attached to the initial vision. If I stop and post a half-baked version, how can I revisit and finish it on a different day? That’s against the rules!

Ultimately, without being able to predict accurately how much “rabbit hole” there might be in a certain idea, I should at least be watchful for the emergent scope growth, and try to bend the concept back in a safer direction. After all, many interesting things have been discovered and created accidentally, or by taking an unplanned turn. Time is a force of resistance in my materials, so I should be working within that constraint, improvising if necessary.

Implicit motivations

I find it very interesting (and disconcerting), the degree of murkiness that can exist between behaviour and motivation. Quite often I’ll make decisions or form habits without first considering why, and if I then work backwards to the impetus, I might be surprised by the underlying reason, finding it lacking or foolish.

This exercise is certainly one of those murky examples, and I’m not yet sure whether it’s also rooted in “bad reasons”. Instead of a programmer, do I want to become an artist? An animator? Do I want to be be a fully independent game maker; a one-man, game-creating hermit, perhaps? I kind of do. But are any of those even feasible?

Maybe it’s nothing that significant, and more that I’ve felt inadequate about my artistic and design chops, needing to prove to myself I can match the more artistic of my developer peers (developeers). It’s most likely a mix of all these things, and whatever the case, if I take heed of these observations, I should come out the other side with a better skillset than I went in with, furthering most of those potential motivators to some degree.


There are a few notions that have been simmering in my brain since reading a fascinating article by a digital artist, about their decades-long progression from enthusiast to professional. The foremost concept that struck me was that the only thing that separates experts and amateurs is time and practice. It does seem obvious, but it’s never been intuitive to me. Being able to see this artist’s awkward, unconfident beginnings, and the evolution of their technique, to the point of producing beautifully crafted illustrations, really drove the point home.

The other, more technical item I took away from that article was the need to work from references while learning. This really opened things up for me, because I’ve always hated the prospect of making unoriginal content in any form. And yet, trying to be boundlessly creative while becoming familiar with a whole new medium is the perfect recipe for a gigantic fuck up. And I’ve cooked it up many times!

And so, for most of the illustrations I’ve made during this project, I’ve worked from photographs. It feels like cheating, still – and I am undoubtedly riding on the coattails of many photographers’ beautiful composition and planning work – but I have come to terms with it as a necessary part of the learning process. I would like to put together a basic gallery of everything I’ve made on the project, and when I do, I’ll be able to link to my references, easing my conscience in the process.


In July of this year, I attended CascadiaFest (previously CascadiaJS), a conference for developers with a focus on modern front-end web programming. Here, I learned of a neat initiative known as #The100DayProject, which had run from the previous April until just before the conference. A speaker there, John Brown spoke of his personal experience taking part in it, by completing ~100 awesome generative art sketches using CSS.

So even though I missed the date for the collective exercise (and it’s taken roughly a further hundred days of stalling for me to get here), there’s no reason I can’t start out on my own, in my own time. So here I go!

Today will be the first day: Monday, October 12th, 2015.
The final day will be: Wednesday, January 20th, 2016.

For my assignment, I will be producing one visual artifact each day. That’s about as restrictive as I’d like to be, since the obligations of life will conspire hard to make certain days more difficult than others. This means both the medium and the quality will vary considerably, but officially speaking, That’s OK™. I’m choosing to create things with a visual focus in an effort to become more confident in my artistic and design work. I may spend much of this period feeling even less confident, in light of grand failures, but there’s no other way to improve so: “No effort is bad effort”? Probably!

Some rules:

  • All submissions will be made through my Twitter account, linking out to the artifact itself, and using the hashtag #100DaysOfArtifacts
  • Submitting nothing for a given day is not allowed. 100 days; 100 things.
  • I may not work ahead to cover future days, nor catch up later on missed days.
  • The small hours of the morning can still be counted as the previous day’s submission, but in general nighttime should be reserved for sleep.
  • I must try new and uncomfortable things.
  • Rules can be revised as the project goes on, but only in the spirit of the initial impetus. Honor system.
  • If this is your first night at fight club… you have to fight.

That’s everything! Here’s the first night’s output:

Insanity Press

A while before leaving the UK’s blustery shores for a land more maple-y and hockey-rich, I decided I couldn’t say farewell to my best friend without marking the occasion. Kris, as he is known to most, has been my acquaintance for more than a decade, after insisting one day on following me home from school, then calling round for me the next morning to walk back. Sure, his family had just moved across the street from my house, but I was distrustful of this sudden and unsolicited act of friendship. Nonetheless, he persisted, my contempt gave way to fondness, and the rest is a beautiful and only slightly unsettling bromantic saga.

And so: armed with many years’ worth of SMS logs between the two of us (amusing to exactly two human beings in the known universe), I set out to compile a mini-anthology of our textploits, over the course of our friendship. This is what it ended up looking like:

The first and most arduous step was sifting through the stupefying quantity of raw material to find the print-worthy conversations. I didn’t have a word count in mind when I started out, and the quality threshold was a little hard to find, but I got there. I used a very simple XML schema to manage the data, which looked like this:

 <conv div="And then:">
  <msg name="k"><![CDATA[Just WALKED down ye olde ass sliding stairs.]]></msg>
  <msg name="a"><![CDATA[Changed times... *single tear rolls down cheek*]]></msg>
  <msg name="k"><![CDATA[My ass will never slide these streets again.]]></msg>
  <msg name="a"><![CDATA[*solemn nod* 'Tis a burnt out husk of an ass.]]></msg>

Once I had sifted through the eons of texts and copied them into my XML file, I was left with a script of about 12,000 inane words. I then started work on the visual design, and decided on a retro-pixel look, to compliment the great deal of gaming shenanigans we undertake. I made up some 9-slice resizable speech bubbles and accompanying 8-bit avatars, then started work on a layout system in AS3 (for compilation to AIR for desktop). A finished page looked like this:

I knew the final size of each page would be A5, per the printing company I’d chosen, so I worked with a 1:1.4142 aspect ratio and wrote some classes to paginate the full script into bitmap-after-bitmap of carefully placed speech bubbles. From here, I added some code to save each page sprite out to PNG, ran this, and was left with a set of 48 page images.

I then took to the Colour Lovers site to borrow and manipulate some of their lovely patterns and palettes, and ended up with a set of 24 pixel-art-esque background spreads to use throughout the book. I brought the backgrounds and the previously-exported page content together in Photoshop, then printed the whole thing to PDF, conforming to the print-shop’s format.

The print and binding shop I opted for was the Gloucestershire, UK-based Inky Little Fingers, who did an excellent and speedy job of printing the books. I was pretty short on time amidst the many tasks involved in moving country, so I decided not to have a proof printed in advance of the final set. Sadly, as it turned out, the matte finish I picked for the front/back cover desaturated the design somewhat. To contrast to the printed shots above and below, here’s the original cover image. It would have been good to crank up the contrast and vibrancy to compensate for the finish, but as that was my only issue, and the rest of the book turned out great, I have no complaints.


I'm Adam Vernon: front-end developer, free-time photographer, small-hours musician and general-purpose humanoid.