Mr Speaker

mrspeaker's head in a monitor You find yourself at the entrance to the Hompage of Mr Speaker. In a darkened corner sits a trunk containing HTML5 games and some JavaScript tidbits. Next to it you spy a mastodon account. Exits are North, East, and .

Pixelmator save, Project reload.

End result: Hit save in Pixelmator, web page automatically reloads with new PNGs.
Tools: Pixelmator (image editor), Grunt + LiveReload (task runner), Automator (Mac automation thingo), Bash (Bash).

I'm generally not a fan of automating tasks, unless the task is consistent over multiple projects and over long periods of time. Automating things is fun - so you quickly lose track of how much time you reeeaaallly spend on it and, more importantly, automation tends to be subject to "digital decay" - project structure changes, build tools update dependency versions (or disappear entirely), things require maintenance. Finally, the build tools and scripts become part of your code base: which is a cause of incidental complexity. Anyone touching your project needs to not only understand your code, but also all the extra cruft around it to "save time".
Read on for more »

Into the third dimension

My loyal long-term readers (by whom I mean Anton) would know my technological aesthetic bent strongly favour the 1980s. Seeing as the third dimension was not discovered until 1992, I have thus far had little inclination to bother with it. But things have changed: now that the 90s are suitably retro I feel it's finally time to gently prod at the edges of this strange new plane...

Read on for more »

Pix Up, Look Sharp: a pixel resizer for Pixelmator


Pixelmator is a fantastic image editor for Mac, but it lacks the ability to stretch an image via a "nearest-neighbor, big pixels please" method. I know, right?! Anyhoo... I made a Quartz Composer called plugin Pix Up, Look Sharp that does it for you, allowing you to set the width and height scaling amount.

To use it, simply drop the plugin in your ~/Library/Compositions/ folder and it'll appear in Pixelmator under "Other" in your effects browser. I can't figure out how to resize the destination output area from within Quartz itself, so you first have to stretch your canvas to accomodate the new pixels before you run the plugin. Sorry 'bout that. Hopefully pixel stretching will be included in a future version of Pixelmator - but until then: Pix up, Look Sharrrrp!

DHTML Lemmings: an awesome hack

That image is the punchline to the question I awoke with in the middle of last night: "How the FLIPPIN' 'ECK did that guy do destructible terrain for DHTML Lemmings... in 2004?!!!". I lay there for some time as thoughts raced through my mind: There was no canvas element in 2004. No WebGL. In fact, there was no direct pixel access of any kind! (Not counting black and white XBM images, which had been killed off by then anyway).

Eventually I was forced to get out of bed and take a look. The answer, as pictured above, was a piece of creative brilliance: each level is a simple jpg image that sits in the background. As diggers dig down they add "holes" - small black images - to the page. every few pixels dug requires a new hole image.

Destruction via creation! That's the kind of lateral thinking that'll get you places.

Short function syntax is here!

It's happened. It's finally happened. Short function syntax is here! At least, if you're running the nightly version of Firefox (which I am now, due to my promise to adopt the first browser to introduce short function syntax).

Short function syntax replaces the lengthy function keyword with a symbol =>, and the almost-as-lengthy return keyword with the much shorter nothing (for one-liners).

However, this change represents far more than a few saved keystrokes: it marks the beginning of JavaScript as a serious functional programming language. Read on for more »

#Random Hex colour

Want a random colour between white and black?

"#" + (Math.random() * 0xffffff | 0).toString(16)

That is all.

[Update: after I posted this I thought... i bet this has been done a zillion times already. It was, and by Paul Irish in 2009 no less. Additionally - it doesn't work. The best looking one there was:

'#'+('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6);