Beyond slidebox: A Box2D Physics Engine for Ionic + Multi-Touch + inertia

demo
1

Hi,
since Collide is not here yet and seems lacking real physics, I decided to make a proof of concept for modules to extend Ionic with Natural UI concepts.

DEMO: Codepen / mikkokam (Run in Chrome or a real mobile device.)
FULLSCREEN link to use on a phone or tablet: http://codepen.io/mikkokam/full/Geotz

Goals: enable drag, throw, or manipulate any DOM element using multi-touch with inertia or accelerometer data. Basic implementation should be declarative, using only attributes in HTML elements to enable them to do all this.

Abstraction for UI design:

Input: one or more touches, x and y. Optionally combined with accelerometer data.

Output: transform a DOM element by any combo of ‘translateX’, ‘translateY’, ‘translateZ’, ‘rotateX’,‘rotateY’,‘rotateZ’,‘scale’, ‘scaleX’,‘scaleY’. Can take multipliers and functions. This enables the user to drag an element in 3D-space.
Adding stops and limits helps create “states” for the elements: a 90 deg tilted card could reveal options underneath, or there might be some other snap for the 3D drag to guide the user.

Further: Watch for collisions; track elements and make them bounce.
Ideally trigger events to chain actions or cause reactions.

The proof-of-concept was quite rapidly created during some spare time last weekend.
This is a MVP, so the implementation is not pretty. (OK, it’s a hack).

GITHUB PROJECT:

I think this could enable nice interaction possibilities (not just triggered “spring” animations like everyone else is doing) - where the user can interact with the elements directly.

9 Likes
2

I haven’t had this going on a device, but it’s difficult to put down in a browser - impressive.

1 Like
3

Thanks - I think this kind of UI’s based on direct manipulation and intuitive physics are engaging.

Test the tiltable on a phone or tablet. It could be used for any element - like a background picture or a video. Was testing the possibilities of this today with a bit more content than orange boxes and balls, with a full-screen 3D-tiltable (accelerometer) video and physics-based UI elements on top of it. Now it is a bit frustrating to go back designing traditional master-detail lists or tab-pages. Or any other click/wait GUI.

Have to find some time to test these in a real project.

4

I embedded it in a webview inside the Titaniun tool, and it run smoothly on a S3 and Xperia E3 handsets.
nice porting to use for some other applications.