October 30, 2011
Today I whipped up a new mobile version of the gears sketch using audiosprite.js and CSS animations. Check it out here. I’ve been using Processing.js for many of my recent sketches, and while I’ve largely been happy with the results, performance in mobile browsers tends to be poor, especially when multiple elements are animated. It occurred to me that because mobile safari, and the android browser, are webkit-based, CSS animations could probably accomplish many of the same effects with better performance. *At the moment this does not work well in desktop browsers. While the audio and animations aren’t seamless, this is a functional version of the sketch that performs reasonably well. If you have access to a webkit-based mobile browser (especially android, which I haven’t had a chance to test), I’d appreciate if you can try the sketch out and give me your input.

Today I whipped up a new mobile version of the gears sketch using audiosprite.js and CSS animations.

Check it out here.

I’ve been using Processing.js for many of my recent sketches, and while I’ve largely been happy with the results, performance in mobile browsers tends to be poor, especially when multiple elements are animated.

It occurred to me that because mobile safari, and the android browser, are webkit-based, CSS animations could probably accomplish many of the same effects with better performance. *At the moment this does not work well in desktop browsers.

While the audio and animations aren’t seamless, this is a functional version of the sketch that performs reasonably well. If you have access to a webkit-based mobile browser (especially android, which I haven’t had a chance to test), I’d appreciate if you can try the sketch out and give me your input.