I had an idea for another Pebble watch face, this time using proper animation.
The Idea
An ePaper display like the one on the Pebble watches needs very little power to preserve a static display, but requires power to update the display. My last few watch faces drew updates onscreen every second, which uses a lot of power. I wanted to make something that was still visually interesting, but that updated itself less frequently.
I wrote up an idea after the Hackathon, which involved displaying a table (or bar) with a drink on it. The drink would drain and refill over time. This would hit the sweet spot, very interesting animations every few minutes, but leave the ePaper display unchanged much more of the time to let it conserve power.
I decided to name it “Nepenthe”, after the potion of comfort (and forgetfulness) referenced in Greek mythology (and in Poe’s “The Raven”).
Vector Animations, at Long Last
In previous work using vector images, I managed to create simple panning animations by tiling and positioning vector images. This time around, I wanted to see if I could actually make the animation sequences the Pebble SDK supports.
The original tool to make sequences was a script embedded in an example repository. This hasn’t worked for ages, and isn’t likely to. There’s a decent tool to create still PDC images from SVG files, but it doesn’t support “sequences”.
Thankfully, on the Rebble Discord I discovered this new tool someone developed as part of a larger project. That was the missing piece I needed to actually make animation sequences.
Their tool takes a series of PDC files representing “frames” and combines them into a single “sequence” that can be played using the Pebble SDK.
The Process
The code this time was largely a matter of adapting from previous work I’ve done and the Pebble examples of how you can “play” a sequence, so I won’t go into that today. Most of the new process this time was actually focused on making the animations.
This means I got to spend a lot of time in my happy place, sketching in Inkscape. After a few minutes, I had a single frame representing a glass of beer:
I created an animation by moving the top of the “head” and beer down and saving to a new file. I found the thumbnail view in the Gnome shell very useful for visualising the progression:
I went through various revisions. The limited palette makes it nearly impossible to make images that have alpha effects, as you might want if you’re superimposing a glass on a background. To work around this, I used only highlights, shadows, and 100% transparent sections. I also made good use of outlines in a limited range of black and gray.
I have to say, the process is my equivalent of mindful knitting. Coming up with a change requires you to figure out what you’re moving, how far, what you can align with, something you can repeat reliably across 15 files. It’s a little bit of active thought and a lot of careful repetition, and I can see myself doing this a lot.
The Results
Although I have very many ideas for other animations, the first animation looks like this:
That’s just the start. I want to make a range of beverages for each time of day, and add the option to rotate between them.
I also want to improve the background, perhaps make it a study, with a window and some light effects depending on the time of day. I may even double down on the Poe references and add purple curtains closer to midnight.
Anyway, I’m sure I’ll get back to this soon, and hope to publish to the Pebble store once I have a few more animations. Thanks for reading this far.
As always, the code is available on GitHub if you’re interested. Stay tuned to see whatever’s next.