TagCanvas with accelerometer support

I recently (October 2010) discovered that FireFox and Webkit browsers now support triggering events from the accelerometer (motion sensor) built into a lot of modern laptops and mobile computing devices.

I have created a modified version of TagCanvas which rotates with these orientation events (just for a bit of fun - it's completely useless). Try tilting your laptop left and right, back and forward to control the rotation of the tag cloud.

Icon 01 Icon 02 Icon 03 Icon 04 Icon 05 Icon 06 Icon 07 Icon 08 Icon 09 Icon 10 Icon 11 Icon 12

If you want to try it out or play with it yourself you can download the full source from here [tagcanvas-accel.js]. This is version 1.3 of TagCanvas with some minor changes added to translate orientation data into the mouse coordinates that TagCanvas expects.

Supported browsers

The browsers that this currently works with are FireFox and Chrome/Chromium. Support also depends upon your combination of hardware and operating system. The only hardware I know for sure that this works on is a Macbook Pro. If you're using a desktop PC, this is really not going to work.

How this works

Chrome and Chromium are based on Webkit, which follows the W3C DeviceOrientation Event Specification. Orientation about the x and y axes is given in degrees, in the beta and gamma properties of the event.

FireFox currently uses a different method for orientation events: MozOrientation. Orientation about the x and y axes is given as a number between 0 and 1, in the x and y properties of the event.

Have fun!

This site uses cookies - details here.