Hard to look at B&W photos these days without suspecting the hand of Nik Software behind the curtain.
I'm a bit annoyed at the realization that my most-recent post on fiddling with HTML5 canvas in Moveable Type looks and behaves in a way that's terribly similar to the page header on the official Google blog. I must have seen that before... we rarely know where our ideas and parts of ideas come from! Or is it merely "parallel evolution"? Still, it's not as if I'm launching a product, and hardly expect Google's IP lawyers to appear on Botzilla any time soon (hi guys).
And I like their "version" of the interactivity -- ONLY let the mouse have an effect when moving. Will have to check that out on a tablet.... of course, when they're creating a brand presence for a company with.. what, 30,000 employees? you would only expect that they'd take a little more time on polishing than my slice-of-a-Saturday attempt. Pat on the back, lads.
While not posting for a few days, I've been scraping at Botzilla's underlying CSS structure, so that I can rebuild it once more with CSS that will allow a fairly seamless multi-screen experience -- PC web or mobile phone/tablet. This has meant I've already had to update (internally) my use of jquery to use jquery-mobile, have started playing with Modernizr for those stodgy users who insist on running IE, and trying to make peace with myself over the idea that photos that I felt barely look okay 800+ pixels across will just have to be acceptable at mobile-phone sizes.
More to come as this gels.
One more for a Saturday -- see if you can push all the balls off-screen at once! (and no, it won't try to sell you car insurance)
Everything here, on the JS side, is set up using a shared array of initializer functions, just like the previous entry on that topic.
Next step might be to re-cast it as SVG... amazing that SVG seems really powerful, but compared to <canvas>, theres' almost no really good documentation...
The state publishes a PDF containing the 2012 California Dept of Transportation Bicycle-Related Roadway Standards. It contained, across several pages, all of the current standards for bicycle-related signage (and much more). I've collected the signs together here for easier web reference (fabric patterns, anyone?).
Note that the vague legacy "Share the Road" sign seems to be fading out, to be replaced by the much clearer "MAY USE FULL LANE." About time!
Following up on the previous post, here are the details on a simple way to add multiple dynamic scripts to a Moveable Type index page.
Like the previous post, try using your mouse on this one! Can you slow down the particles?
Basically, we just need to add an (initially empty) array of function references to the page templates, which we'll use to capture each blog entry's unique scripts (rather than letting them launch themselves), and then iterate on that array for the entire page, once it's loaded and ready.
I'm using jquery, so I declare the array and my $(document).ready() function like so:
var gRActions = new Array(); // initially empty array of functions... $(document).ready(function() { for (var a=0; a<gRActions.length; a++) { gRActions[a](); } });
Then in each blog entry, I write the same anonymous javascript function as I might write for $(document).ready(), but instead I just push it into gRActions:
gRActions.push(function() { draw_canv739(); setInterval(draw_canv739,30); });
Now the page, regardless of how many blog entries it might contain, will include all of them in its page initialization. Remember also to make sure that any "global" javascript values (including function names!) in this entry, and all HTML elements like <canvas>, have unique names so that they won't collide with other blog entries, should they for some reason both be presented on the same HTML index page someday.
Also, as we've learned from the previous post: put some human-readbale text into the post before the scripting portion of the post, otherwise Facebook becomes confused.
With a little fiddling it's easy enough to use <CANVAS> (and jquery) in tandem with Botzilla's somewhat elderly (and modified) installation of Moveable Type.
Minor tricks:
Despite my belief that Facebook has been a large-than-deserved time sink for myself, I've finally managed to add proper "like" buttons to these pages. Took a little reminding myself how javascript worked, but now every entry has its own "like" button so that, well, so that Facebook can sell more ads.
I've also been poking at Google Currents as a distribution mechanism for mobile devices, in addition to puzzling over how to make botzilla itself tablet-friendly and how to best reduce all photos to 400 pixels (to bend the old saw about cameras, "the best photo gallery is the one in your hand"?).
What's a bit of a puzzle to me is how to best incorporate either of these with some of the other aspects of botzilla that I'm looking to enhance, especially heavier use of <canvas> tags using animation and where possible WebGL. Given that Facebook looks for static images to grab as thumbnails, and that Currents runs off of RSS, how to best show-off fun animation and interactive imaging experiments?