Private Reserve is my own little area, apps and tools I make to learn and explore.
Tracky started out as a Keynote file carrying Google Earth screenshots tracking elevation data, distance and time of my runs. Not very practical.
Now with a GPS watch I can use Garmin Connect, which gives me JSON access to my run data and lets me export a GPX file of it all. Much more practical.
Tracky started out as a Keynote file carrying Google Earth screenshots tracking elevation data, distance and time of my runs. Not very practical.
Now with a GPS watch I can use Garmin Connect, which gives me JSON access to my run data and lets me export a GPX file of it all. Much more practical.
The goal of this tool is to create a visual catalog. Something you'd thumb through and see things quickly with bold visual cues. What shoe was I running, what key element was important that day—that sort of thing. Those would be the main visual elements triggering visceral memory of that day. Like in the demo below where I was testing a different type of shoe to see if it works for me.
Garmin Connect provided data is: Date, Weather, Distance, Average Speed, Max Speed, GPX file for the track. I added the shoe info (image caption), name and surface types.
The square format wasn't just for social sharing sites but also to make inexpensive little square photo books for each year that can be stored easily. Blurb and Apple both offer nice quality "tiny-books" that fit the bill.
As a database-ish option I'm writing out a JSON file with the data that goes on each card, just in case I have to re-render one at some point. The HTML / CSS portion is really just JavaScript that loads the JSON and writes the result out to a file via a CANVAS-to-file route. You take a DIV, image it in a CANVAS 2D context and save the CANVAS to a PNG file. I'm sure there are more elegant ways to handle it but it works for now.
The stuff that still gives me headaches is GLSL shader writing. A boundless world where you have to find your own path of doing everything. Like inventing walking so you can walk from A to B.
Quartz Composer (free with every Mac) provides a fairly nice real-time environment to see if your code makes sense. Well at least it shows you if it works and what it does.
The GLSL shader blurs the image in the areas painted white in the masking image. It doesn't look 100% like a Gaussian blur. At this point it's somewhere between a box blur and a linear blur. I might keep it as I kinda like it. Also I like the control I get over the falloff via the masking image. And one day I may understand why it works like that.
The PNG rendered overlay gets overlaid in the same shader (for now) with an overlay function. And yes the little cloud icon is spared from that with a little (hardcoded, bad idea, I know) mask. More details on compositing stuff like that are in this great book: The Art and Science of Digital Compositing by Ron Brinkmann.
