This week’s update is a short one, not to mention tardy (why do I want to giggle like a small child hearing a rude word whenever I think of “tardy”?)
This week I set aside plot and voice and character and conflict to focus on a different kind of writing: coding!
I spent the week building a small Life layout engine for the web. The layout engine operates on a regular webpage. Whenever it sees a <pattern-anchor data-pattern-id=“my-pattern-id”></pattern-anchor> element, it looks up my-pattern-id, then renders the pattern on the page so that it is near the anchor, but does not overlap the text (at least, not to start with).
The game advances only when the page is being scrolled. This means that when users are trying to focus on the text, there won’t be distracting animations.
I’m most excited about the graphic possibilities on desktop, where I imagine laying the patterns out in the margins so that the main flow of the text is uninterrupted. I’ve decided to put off building the desktop layout for now because I expect most people will read this story on their phones. Perhaps if I have time (ha!) as this project draws to a close, I’ll attempt a desktop mode.
There’s still SO MUCH I need to fix (not least that the Life update rule is either broken, or not being rendered to the canvas properly), but at least I’ve got a start!
A very broken implementation of Life driven (badly) by scrolling the web page. Don't worry — I promise the final version will be better than this!
Technical details for the nerds on this thread (hi friends!):
The Life grid is rendered into a canvas which covers the entire webpage. This grid can be reasonably large, depending on how much text is in the webpage, so after briefly experimenting with a matrix-based implementation and finding it slow, I’ve decided to use a sparse representation of the Life grid — just a list of grid positions representing the live cells. This should work well for this particularly use-case, which will have relatively few live cells. The alternative would have been to calculate the Life transitions in WebGL, but that seemed like more complexity than I’d be able to handle quickly.
The code is here for anyone who wants to take a quick peek (it’s written in Evan Czaplicki’s lovely Elm).
As soon as I reach a good stopping point with the code (read: as soon as I get the update rule working properly!) I plan to switch back and spend the whole coming day on writing. Next week’s update will be focused back on the world of prose!
Justin