Electricomics 103 : First Code Dropped, Thoughts on Visual Styles & the Comics Ghetto

UPDATE: Wrong end of stick fully grasped here. The file "hammer.js" is a third-party event library, coincidentally with a similar name to the title of the story.

The source code for the first electricomic is up. This is "Grandfather's Hammer" by Daniel Merl Goodbrey, electricomics' co-conspirator and long-standing (long-standing as in, back into the last millenium) guru of non-linear digital comics. It's not one of the stories from the demo app.

Aesthetics

For the keen techies, I'll dig into the code a little bit at the bottom of the article. First, let's have a look at the end-product. It's a simple, meaty, powerful story, and a near perfect example of how the simplest of graphics can serve storytelling. Leaving aside the fact that it's electronic, it's top-notch. (Note to our international readers, that translates as "very, very good").

The narrative is linear, unlike a lot of Goodbrey's work. Nonetheless, there are two innovative features to the storytelling that I'd like to point out here.

Use of Space - the majority of the story's a conversation between grandfather and four grandchildren, with a "flashback" sequence depicting other events, in the middle. Early on, the convention is established whereby each character has their own space on the page, but not all characters are present on every page. There's therefore a lot of white space, but also a neat rhythm to the story. This would work fine as a 30-page printed book. As a digital comic, the structure has some extra impact, as the page transitions preserve position more accurately, so when Grandfather looks from left to right, it's almost like a flipbook animation.

Graphic Style - the graphics here are minimal, and beautiful - both as static pictures, and as a narrative. Shapes are used to convey characters' emotions and thoughts, nothing else. (The colour and texture are decorative, it's not completely spartan.) If Mr. Goodbrey permits, I'll post a couple of images here, in the meantime, go here to see a sample of the art. The closest things I can think of in comics are Lorenzo Mattotti's expressionist works, and the minimal lines of Simon Moreton.

After reading this, I'm struck by how the official demo Electricomcs' artwork all looked like conventional comics, being either scanned physical art of digital art made to look like coloured in pen & ink. All of it was high quality, for sure, but it all said "comic" very loudly. Goodbrey's abstracted stuff, in contrast, is more reminiscent of data visualisations or editorial illustrations for a popular science magazine.

In my previous post, I made the point that electricomics are not really comics, nor are they movies or games, they're something else, a new hybrid. Ironically, "Grandfather's hammer", which probably diverges from the narrative form of a print comic less than any of the demo stories, looks less like a comic, and may therefore be more accessible to a mainstream audience, because it doesn't follow the visual tropes of traditional comic books.

It's a great shame that the public perception of comics is what it is (in the Anglophone world at least). There is much cause for hope - publishers like Top Shelf, Self-made Hero, Jonathan Cape, Fantagraphics, Blank Slate; events like The Lakes International Comic Art Festival; bookshops like Page 45, Gosh! and Astral Gypsy; groups like the Applied Comics Network  (random off-top-of-head picking here, apologies to many others I've omitted)- are all doing a lot to reintroduce comics to a broader mainstream, and the stigma is much less than it used to be, even five years ago. Final shout-out to Karrie Fransman here - I attended her Guardian masterclass recently, and breaking out to reach a much bigger audience than current comics-readers was a major discussion point. A lot of creators have been deliberately pushing at these boundaries too, of course, or choosing to ignore them.

(Quick aside: I just wrote "comics reader". Isn't it weird that that doesn't look odd. I don't describe myself as a "television watcher", "novel reader". I suppose "moviegoer" is a word, and "gamer". Time to shrug and move on, I think...)

Electricomics don't need to carry the "comics" stigma. Electricomics don't need to distance themselves from that stigma either, and can help play a part in the de-stigmatisation process that's already underway. It's great to see, in "Grandfather's Hammer", such boldly un-comic-book artwork being used so well.

PS: "Electricomics 103" I ask you! I'll get fed up of this idiotic naming scheme soon, I promise. :)

Techie Stuff

What have we got to play with here, then? Let's ask the computer for a summary...

dave@deimos electricomic-hammer (master) $ tree .

.

├── README.md

└── hammer.elcxproject

    ├── comic.json

    ├── cover.png

    ├── css

    │   └── style.css

    ├── images

    │   ├── hammer30001.png

    │   ├── hammer30002.png

    │   ├── hammer30003.png

    │   ├── hammer30004.png

    │   ├── hammer30005.png

    │   ├── hammer30006.png

    │   ├── hammer30007.png

    │   ├── hammer30008.png

    │   ├── hammer30009.png

    │   ├── hammer30010.png

    │   ├── hammer30011.png

    │   ├── hammer30013.png

    │   ├── hammer30014.png

    │   ├── hammer30015.png

    │   ├── hammer30016.png

    │   ├── hammer30017.png

    │   ├── hammer30018.png

    │   ├── hammer30019.png

    │   ├── hammer30020.png

    │   ├── hammer30021.png

    │   ├── hammer30022.png

    │   ├── hammer30023.png

    │   ├── hammer30024.png

    │   ├── hammer30025.png

    │   ├── hammer30026.png

    │   ├── hammer30027.png

    │   ├── hammer30028.png

    │   ├── hammer30029.png

    │   └── hammer30030.png

    ├── index.html

    ├── js

    │   ├── comic.js

    │   ├── electricomics.js

    │   ├── hammer.min.js

    │   ├── jquery.min.js

    │   ├── picturefill.min.js

    │   ├── raf.js

    │   └── storage.js

    └── project.json

4 directories, 42 files

So there's a standard electricomics javascript library, a "comics.js" containing some more boilerplate code and a little bit of orchestration for this particular story a minified "hammer" library (that I haven't dug into at all), presumably bespoke to this project, and the standard HTML structure defined in the electricomics living standard. According to the README, the project can be loaded into the composer (not released yet), or downloaded into the app (interesting! I didn't realise that it did that.) But the quickest way to read it is to open index.html in a web browser - I did so from the file system, not even mounting it on a web server.

The app is quite a straightforward structure, telling a linear story, with advances from page to page via tap/click. This is reflected in the <ec-page> elements in index.html - the narrative structure's fairly easy to discern from the markup. As I said, the javascript is minified, so no idea what that is doing, yet.