HTML5 canvas ambilight
description:
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
- completed:
- 04/11/2010