ambilight

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

completed:

20/09/2008

modified:

20/09/2008