My blog has been moved to ariya.ofilabs.com.

Saturday, November 27, 2010

Box of Marbles meets Device Orientation

Remember my Box of Marble demo?. It was a native Qt/C++ application running on Maemo-powered Nokia N900.

With the wave of DeviceOrientation Event Specification implementation, now it's possible to have the demo as a web app, running just inside the web browser. In fact, this is what you can see from this demo: ariya.github.com/js/marblebox.

Right now, it works with iPhone or iPad or iPod Touch running the new iOS 4.2, due to the brand new DeviceMotionEvent support. If you own a MacBook with accelerometer and you use Google Chrome, that works as well (tilt your laptop to see the gravity effect). But fear not, with the recent support to hook the acceleration data from Qt Mobilty to QtWebKit, don't be shocked if the next Nokia phone with built-in QtWebKit sports this feature as well.

While my previous demo uses Chipmunk physics engine, this web version relies on box2d-js instead, mostly because I am too lazy to port Chipmunk to JavaScript and also I want to try something else. If you are curious about the code, check the usual X2 repository under javascript/marblebox directory. Enjoy!

2 comments:

Denis Dzyubenko said...

works very weirdly on the macbook pro 2009, it gets _some_ accelerometer data, that is for sure, but the orientation of the marbles do not match the orientation of the macbook in any way.

Ariya Hidayat said...

@Denis: Check http://ariya.github.com/js/accelerometer/ and see if the data matches the orientation (see also the W3C spec draft).