pixel font inspired by the williams electronics classic arcade game robotron 2084.

update: this package now also includes the alternative small font, also used in the game for status messages.

designed to be used aliased at a size of 8 pixels (or multiples thereof).

tags: pixel font

an admittedly hacky hommage to Brendan Dawes' Cinema Redux, using HTML5 video and canvas to take snapshots of a movie and collate them as a stacked filmstrip.

unfortunately, unless the video is hosted on the same domain, it's not possible to save the canvas back as an image because of its ridiculously restrictive security policy.

tags: html5 canvas video

incomplete proportional pixel font based on the nitrome game cosmic cannon.

designed to be used aliased at a size of 16 pixels (or multiples thereof).

tags: pixel font

a refactored version of my old ambilight experiment. at the time, i used a variety of technologies, including jQuery, the jQuery Color plugin and PHP's GD library functions – with an obvious roundtrip to a server running PHP – to simply find the average colour of an image and then animate its background accordingly. flash forward to today, and i can do pretty much the same thing (in modern browsers) all on the client, using just <canvas> and CSS3 Transitions.

interestingly, my very naive averaging (simply adding all red, green and blue values of each pixel and then dividing by the number of pixels) gives slightly different results compared to the original ambilight experiment (note the first and fifth image in particular).

from the original experiment's description:

a quick eyecandy experiment, inspired by brendan dawes' ambiflickr sketch and dave shea's fountain redesign (both strangely from 2006).

tags: ambilight javascript html5 canvas css3

i-dosing – the digital drug terror that's sweeping the nation...quite.

here's a simple implementation of binaural beats using pure data (PD). enjoy, and remember kids: don't get high off your own supply.

tags: pd pure data

stencil-like pixel font based on the old amiga game dogs of war.

designed to be used aliased at a size of 16 pixels (or multiples thereof).

tags: pixel font

slightly expanded version of the bitmap font used by the group hoodlum on the bootup screen to a cracked amiga version of second samurai i happened to have...

designed to be used aliased at a size of 16px (or multiples thereof).

tags: pixel font

tired of the usual "hello world" demos, i made a trivially simple "hello cthulhu" widget to show opera 10.50's standalone widget engine.

Hello Cthulhu image found at www.nyder.com/cthulhu/cthulhucomic.html...apparently it's by Meathouse Audio Grafik.

tags: opera widget

following the recent custom of nostalgically recreating vintage games to show that our web browsers are now as powerful as an old amiga, here's my first proper play with the HTML5 <canvas> element.

at this stage it's of course nowhere near a proper game, but i thought i'd release this early version for now...

tags: html5 html canvas game

a small winterboard theme for use on jailbroken iphones that replaces the unlock, answer and power off sliders with buttons that can simply be tapped to activate.

although there are already a few tap to unlock winterboard themes out there, i wanted something that looked a bit more "native" to the default iphone user interface...here's a screenshot of the result.

to install, unpack the zip archive, SSH into your iphone, copy the Native Tap to Unlock.theme folder to /private/var/stash/Themes.xxxxxx and activate the theme in winterboard.

update: this theme is now available from the iphone-planets repository via cydia.

tags: iphone winterboard theme

google analytics is a pretty powerful, and free, tool for website stats analysis. however, one of its main drawbacks is that it can only track pages that specifically call its tracking script. links to documents (Word, PDF, etc) and links to external websites are not tracked out-of-the-box.

this small script dynamically attaches the necessary explicit calls to google's tracker functions to any document or external links found in a page.

by specifying a prefix for external and document links it's possible to log any clicks in specific "fake" directories in the analytics reports.

for instance, with a prefix for external links set to /stats/external/, a link to http://www.foo.com/somedir/ will appear in google analytics as a click to /stats/external/http/www.foo.com/somedir/. by default, the prefix for document links is simply /, meaning that a link to /somedir/file.pdf on your site will be logged in its "native" location. if you prefer to see all documents logged separately, it is of course possible to change the prefix to something like /stats/documents/, so the above document would appear in the stats under /stats/documents/somedir/file.pdf.

in addition, this script fixes google analytics' site overlay view. if the overlay is detected (given away by the presence of a script element with id="_gasojs"), the href of document and external links is rewritten dynamically, ensuring that the correct percentage and click count are displayed in the overlay. the links are also "neutered" (their default behaviour is suppressed), so you don't accidentally click away from the overlay.

for debugging purposes, if you're running firebug in firefox, the script also writes to the console when a tracked link is clicked. this feature is commented out by default.

i originally wrote this back in april 2008, and it has since been used in production on a few high-traffic sites with excellent and reliable results. many thanks to stuart langridge for giving it a quick code review and suggesting some excellent optimisations.

tags: analytics javascript google

a quick eyecandy experiment, inspired by brendan dawes' ambiflickr sketch and dave shea's fountain redesign (both strangely from 2006).

it uses jQuery, the jQuery Color plugin and PHP's GD library functions.

average.php is a small PHP script that loads an image, resizes it down to a single pixel (thus averaging all the of the original image colours down to a single colour), and then outputs the RGB values of this pixel as a JSON object.

this PHP script is called by the ambilight.js function. when given an image DOM object and a speed value in milliseconds, this function makes a JSON call to the PHP script, receives the JSON object with the average colour for that particular image, and then animates the background colour of the image's parent object at the specified speed.

in the example page, jQuery iterates over all images with an ambilight class once the page has finished loading, and fires off the ambilight function for each of them. however, the function could be called at any time (for instance, on focus/hover or click).

if the page of images was generated dynamically from a database or set of known images, it would of course be far more efficient to pre-calculate the average values necessary for the animation. this is mostly a little thought experiment, but could also be used when the images themselves are not known at the outset (for instance when pulling images from a third-party site like flickr, as in brendan's original sketch).

tags: ambilight javascript jquery php gd

another simple aggregation experiment which uses my PHP feedreader class to fetch the latest tweets from my twitter account via the simple twitter API functions and present them using a custom XSLT

tags: twitter experiment xml xslt

out of boredom, yet another experiment using uses my PHP feedreader class, running the audioscrobbler recent tracks feed of my last.fm account through a custom XSLT to output the last 10 tracks played.

tags: lastfm experiment xml xslt

a simple firefox extension that lets you add buttons for firefox 3's built-in zoom functionality to the toolbar, for easier user access. this is a redevelopment of my firefox text size toolbar - sadly, text resizing itself has been removed from version 3 altogether...

the magnifying glass icon is part of jonas rask's danish royalty free icons set.

tags: firefox extension