The Idea
Sketching during holidays is great. It makes me relax, process thoughts and pay more attention to my current surroundings.
But…
Presenting sketches digitally has always been a struggle. My analog sketches require lots of lightning post-processing, cropping and often lack consistency. Sketches can be rough, approximate and incomplete. Mostly it’s enough to capture the impression.
For my ultrarunning journey in Italy, I wanted to build something new. A lightweight application to tell a story with my drawings. The three major requirements:
- minimal material (best if only a pen and scratch paper)
- no computer needed
- the analog-digital process takes max. 5 minutes
The other component was the storytelling. I’m travelling, so the journey has to feel like it is continuously progressing. Not forcing myself into a social media format gives me the ultimate freedom to express myself.
I’ve always been fascinated how color can be used to show progression and build tension as seen below from the video game Journey.
Using one color at the time was looking very monotone. Multiple colors however posed a technical and UX challenge (violating the 3rd requirement). In the end, I’ve opted for two colors, automatically flood-filling the region around the top-left pixel location. The filling was realized with multiple skinning/dilation iterations to close small openings in the horizont. This often led to artifacts. But this is a feature, not a bug, and contributes to the overall style.
Example of Artifacts: The red shape exceeds the black borders by the morph operations (right)
Simplicity implies Consistency
Imaging yourself enjoying your holiday with lots of adventure. How much time do you want to spend to upload your daily diary? Probably less than 5 minutes. With this thought in mind, I stripped away all parameters of the application possible. However, the model has to remain still 100% “failsafe”, since the dockerized image on GC cannot be altered with my phone.
The overview screen also allowed me to edit and delete posts, where the static HTML was regenerated every time there was a change.
Cloud hosting
So far, all the code was hacked together on my local machine. To run everything on my mobile phone, the only way for me was to host the application in the cloud. All the code was dockerized and hosted to Google Cloud Run. All operations within the local storage were replaced by Google Cloud Storage.
Since I’ve never used this service before, I was quite surprised how seamless the integration is. The trickiest part is the setup of a service account to authorize the application to access the Clound Storage.
To save bandwith cost, the application kept hidden to the end user and acted as a static site generator, which generated a single HTML file with all the SVG image files.
Get the source and host it yourself: https://github.com/troxlepa/s_tagebuech
Realized Projects
Toscana Ultrarunning (DE)
Documenting a running journey only with my phone and some scratch paper.
