Opening Up the Electricomics Event Model

WARNING This is a technical discussion about the javascript code that powers Electricomics. If you usually come here to read my comics and look at my artwork (and thank you, I'm flattered that you do!), you might want to skip this one. See you on Tuesdays, my regular art-drop day.

So, a week ago, I put together my first Electricomic. This was generated using the Generator GUI program, no real code input on my part, but my intention was to use it as a playground for doing things with the code that the generator can't do. (I'm currently building a physical non-linear comic on a not-quite-infinite canvas, so my head's full of thoughts about doing comics that don't read right-to-left in a straight line/single path. I'll get over it soon, promise!)

Tonight I started mucking about with the code, in situ in the generated comic, and spent a happy hour or two refactoring, swearing and then feeling good because it behaved exactly as it did before I messed with it. Here's the commit, not much to look at yet.

The comic.js file is a client-side piece of javascript that orchestrates the core library code (in electricomics.js), configuring an instance of the comic, and adding the interactivity. (The actual page structure is encoded in index.html, in the <ec-panel> tags.)

Some of the demo comics ("Sway" by Leah Moore, John Reppion and Nicola Scott, and "Second Sight" by Peter Hogan and Paul Davidson) have interestingly weird non-linear plots, which the Generator won't generate (yet). All the generator will create at present, is a hard-coded interaction - single tap on the right-hand 2/3 of the screen to go forward, and on the left hand area to go back a page.


What I've done tonight is to un-hard-code this, moving that set of rules out into a separate object that gets passed into the comic when it's created.

And of course, that means something else could get passed in instead. Which could hold a non-linear navigation model. Which could use swipes, tilts, voice, etc. (I want to make a comic that you navigate by blowing on it - the mic could pick this up!) Which could really unlock the possibilities of this thing. And a library of standard navigation tropes that could be reused across projects would be great for the nascent community, rather than everyone either creating linear tap-to-progress stuff, or else hardcoding their own solutions.
Maybe eventually, we'll even figure out a plugin system for providing GUIs for these things, but that's a job for another day...
Have a look at the comments in the code. I've not got very far, and I think I've divided up the responsibilities in the wrong place. I'm going to carry on down this route, as time permits, and happy to talk about this with any other techies out there.

PS: I still haven't packaged this up. If you want to read the thing, then download fromGit and open index.html in your web browser. That's what Im doing.