Electricomics – the importance of Open Source

I gave a talk to the Bristol Java Developers meetup a couple of weeks ago, on the topic of Electricomics. This is a rough write-up of the key points.

I have no official connection to the Electricomics project, although I do communicate with them, and have contributed bits of code, where time allows. The opinions expressed here are my own.

Quick Links

Electricomics Project http://electricomics.net/

If you want to get a feel for what electricomics looks like, then I suggest the following:

  • if you do have an ipad, install the electricomics app from the app store
  • if you don’t have an ipad, download and install the Web Reader to your Windows, Mac or Linux machine
  • browse the library of titles (I recommend a couple in particular near the end of the article)

If you want to try making an electricomic, download and install the generator to your Mac, Windows or Linux machine. Read on and I’ll explain what all these things are, and how they fit together.


I want to cover three main points in this talk:

  • what digital comics are
  • how the Electricomics system works
  • what’s different (if anything) about coding when your audience are “creative” people

So, I started with a quick preamble on what are comics (as opposed to film, games,novels, etc.), taking in the Bayeux Tapestry, Trajan’s Column, Superman, Garfield and all the usual suspects (and specifically excluding the largely-great-fun Marvel supehero movies and their not-so-fun DC/Warner counterparts). Comics is a form, not a genre. And so on.


A key characteristic of print comics is the use of still pictures to create an illusion of motion, movement, the passage of time – both within and between panels. The obvious “enhancement” that a digital treatment can offer is to add animated movement (and sound) – creating some sort of movie-comic hybrid. (The second most obvious is to branch the story, creating a comic-game hybrid, but I won’t go down that rabbit-hole right now.) Hybrids are great, but the word “enhancement” suggests that comics are lacking something by not having movement, and I would strongly contest that. Novels aren’t “lacking” pictures, after all – less is more, storytelling is about what you don’t show as well as what you show, and so on.

So, if we’re going to do things in a digital comic that just weren’t possible in a non-digital one, let’s ask ourselves these questions:

  • what are the full gamut of these things that I can do? If I look beyond the obvious choices (sound, movement, bigger/infinite pages), what else can I find?
  • having chosen a thing to do, does doing that thing (versus not doing it) impact the storytelling in a good, bad, or just different way?

And let’s recognise that the full gamut is very big indeed, and never likely to be fully explored. Our initial tentative explorations will resemble the early films/movies that took their grammar and structure from theatre, before bold experiments like dolly cameras, fast-cut edits and steadicams changed the game, and quickly moved from experimental to mainstream. The same will probably happen to digital comics. Change will be non-linear and take us in unexpected, unpredictable directions.

Quick shout-out to Dan Merl Goodbrey, Scott McCloud and the others who’ve already been exploring for well over a decade!

And a quick shout-out to comics that have tried to overcome the limitations of the physical form while remaining physical, such as Gurowska, Ruszczyk & Tuwien’s Locomotiv “book” and my What Is Home? exhibition (shameless plug!)

Here and Now

Comics are being changed by digital tech in many ways:

  • tools for creating comics: Manga Studio, as well as use of more general tools like Photoshop, Gimp, Procreate, Artrage etc.
  • tools for creating digitally-enhanced comics:  MotionArtist, Madefire
  • marketplaces for consuming comics digitally: Comixology, Sequential, Marvel Unlimited, and many indie platforms too. Also good old-style webcomics.
  • tools for reading comics digitally: Comixology guided view, Marvel’s experiments with recognising and zooming in on speech bubbles on phones

Electricomics’ ambitions cover quite a range of these areas, but for now, it’s principally a tool for creating and reading digital comics, with an embryonic marketplace thrown in. Very importantly, it also proposes a standard for digital comics.


In this section, I’ll walk through the constituent parts of the Electricomics project, and describe how they fit together.


The first tool in the toolkit is the Generator. This is a GUI that allows easy assembly of “flip-book” style digital comics, with one or more image per page, and a simple tap-to-go-forward (and back) interaction. The generator opens the door to non-programmers, but doesn’t really unlock the full potential of the form – you still need code to do that at present. But people have used their ingenuity to do some pretty clever storytelling within the constraints of the flipbook.


The generator outputs a single file in the ELCX standard format. Any electricomics reader can read these files. The outputted file contains a lot of boilerplate code supporting the “flipbook” format, but crucially, the actual spec for ELCX is much simpler, and supports a much wider range of interactions than just click-to-turn-page. The sample electricomics created for the release of the project use much richer interaction models, and couldn’t be created by the generator.


Any ELCX file, whether created by the generator, by hand, or by some third-party tool that hasn’t been invented yet, can be read by the Electricomics reader. The original reader supported only the apple ipad (good starting point – fixed screen size, small range of devices to support, popular with creatives).


Subsequently, the “web reader app” arrived. This runs on Windows, Mac and Linux desktops and laptops, and can read any electricomic just as well as the ipad app.


The ELCX file is a zip file. It can be unzipped, and read from a web browser, either locally or via a web site, without using any electricomics reader app whatsoever. Here’s a quick look inside one – the 3 highlighted files are pretty much the entire contract with the reader apps, everything else is just standard web tech arranged howsoever the author wishes.


  • Comic.json provides author info, title, description, etc.
  • Cover.jpg is displayed in the reader “library” page
  • index.html is loaded as the starting point for reading the comic

The key thing to note about the design is that it’s paid a lot of attention to future-proofing:

  • the comics are essentially HTML, CSS and Javascript, the core technologies of the web. These won’t go away any time soon.
  • the readers simply load and run the index.html page. The boilerplate flipbook code is built on long-in-the-tooth jQuery, but there’s no barrier to creating a comic using react, angular, d3 or whatever other web tech stack you want
  • the format is open – other tools that create electricomics can be added to the ecosystem
  • other comics-related web tech can be adopted. Shout out to Pablo Defendini’s Digital Comics CSS layout system here, which can build complex layouts for web comics that adjust to laptop/tablet/phone form factors very nicely.

Coding for “Creatives”

The intended audience for a comics-making software are pretty much like that for any other piece of software. They want it to work reliably, and not get in the way of what they’re doing. Also, they don’t yet know exactly what they want – but even more so than most customers (and maybe for better reasons). As noted earlier, digital comics are just starting out, and things will change, unpredictably. So the future-proofing noted above is a smart move.

The audience will vary in their technical skill.


Making good comics is already a multi-disciplinary thing (writing, drawing/painting/making images), combining the two effectively, and so on and so on) – we can’t expect much of the intended audience to know how to code. The current system offers something for everyone:

  • blue: use the gui generator, and your ingenuity to work within the flipbook format. Shout out here to Tompte’s “The Pataphor of the Sun” (uses animated gifs) & Lars Schwed Nygard and Torgeir Trapnes’ “The Birds of Twilight Park” (very effective use of layout). Download the web reader, both are listed in the store.
  • green: the boilerplate flipbook code allows HTML attribute editing to rewire the next / previous pages. My animations library for electricomics does the same.
  • yellow: ability to modify or replace pretty much anything

Recommended Next Steps for the Project

Innovation’s going to drive the digital comics landscape forward (that’s innovation of storytelling techniques, not technological innovation of the faster-processors-more-memory sort, although some tech innovations like VR could do interesting things). Techniques tested out in the arthouse/experimental fringe will migrate into the mainstream as the tools mature, and audiences learn how to digest new grammars, forms and structures.

Because the Electricomics system is open source, no formal plugin mechanism is required to allow coders to get into the guts of the system and start playing. However, I’d suggest a plugin system to allow custom interaction models, layout models etc., as a good thing to add in, as this will narrow the gap between techie and non-techie users.

Plugins are essential, in that it broadens the ability to innovate to the entire user-base. Photoshop (and it’s open source shadow Gimp) is a success because it allows user customisation of brushes, textures, behaviour etc. I would argue. Neither madefire nor motionartist offer plugins, from what I’ve seen (correct me if I’m wrong here, I’m not hugely familiar with either) and no matter how many new built-in features and tools a vendor adds, innovation will be stifled by sticking to the provided toolset.

A creative tool can’t afford to be stuck in the present day, it has to have an eye on tomorrow, and enabling the entire user base to participate in shaping that future – whether by open source, plugins or both – is the only way to achieve that.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s