graph paper days and in-browser transparent png via p5.js

My personal blog ( http://kirk.is ) has been long overdue for a makeover.

For posterity, you can see it's pre-makeover look on the Internet Archive Wayback Machine. I can always tell old HTML of mine when the tags are in all-caps. (<A HREF="http://kirk.is">like this</A>) I've switched, of course, but I still secretly think all caps tags were a bit more readable, standing out more from mixed-case content than the modern xhtml-influenced style.

So I wanted my (15 year old!) daily blog to look like the modern web, which also included simplifying it and making Alien Bill Productions my main "creative works" repository. For what it's worth, I've decided on the simplicity of kottke.org as my main layout influence... but I thought I'd like to make a nice logotype for the header, one influenced by the graphpaper font doodling of my highschool years. (And more recently: graph paper moleskine notebooks are kinda hipster awesome, carrying and using one makes me feel like a more creative person.)

I made a p5.js program to generate some experimental layouts -

The bottom two are the same as the first two, but with a shaded background effect. Ultimately, I'm going to run with the third on the list.

The code is hacky. I switched to p5.js after starting in processing because JSON is so much easier to tool around with than Java HashMap static initializers... The shading is a bit handcoded, because I wanted to let the "graph paper" background show through, so the hidden line removal was trickier than if I draw lines at every vertex and then made the letter fronts opaque polygons.

When I decided to make a version to use on the site, at first I thought I'd just do a screen grab of the webpage, but that meant the transparency info was lost. I was surprised and delighted to see the p5.js has support for generating transparent pngs, that can then be automatically downloaded as a file. The trick is to use clear() instead of the usual background(255) and then do something like saveCanvas("MyImage","png") - and of course, you don't want to put that in a draw() routine being called 60 times a second!

(Oh, and for what it's worth, I updated this blog's p5.js boilerplate to have two examples: one (quick-hack-friendly and more "Processing" like) that pollutes the global namespace and slaps its own canvas on the webpage, and then one that's my original sample code that plays more nicely with a more complicated webpage - everything is properly namespaced, and you can control the canvas tag CSS etc, but you have to prefix API references.)

Anyway. Making a jpeg or transparent .jpg is one of those "oh, I didn't realize a browser could do that" kind of things, like the copy and paste in image right into chrome trick.

UPDATE: Here's one I made just now (October 2016) for this site: