Tuesday, September 25th, 2007

gefingerpoken: Multi Touch Gestures

Category: Flash, Showcase, UI

Michal Migurski implemented the two-finger drag of a multi-touch interface in Flash:

(Please install the Flash Player plugin)

In his example he visually shows how the implementation calculates a third point of the triangle. He explains this all:

There are two main difficulties: figuring out how precisely the two contacts should act on an object, and then translating those into the appropriate placement, sizing, and rotation of the object. We start with two rules: the object can be moved and turned, but not skewed, squashed, or otherwise deformed, and the fingers should stay in contact with the same points on the object throughout their movement.

Both troubles can be solved with the use of affine transformation matrices, the closest thing computer science has to a true, working hammer. I’ve described before how to derive a complete transformation from just three example points, so we need to figure out where to place a third point to complement the two fingers above. If we assume that the line between the two fingers is the hypotenuse of a right equilateral triangle, the we can guarantee a stable position for the invisible third finger by working out the two legs of the complete triangle. See it in action above when you drag.

Posted by Dion Almaer at 6:16 am
5 Comments

++---
2.7 rating from 26 votes

5 Comments »

Comments feed TrackBack URI

Isn’t it like really basic ?
The “right equilateral triangle” thing is useless. All you need is the initial angle and distance between the two fingers/input, nothing else.

Comment by Mathieu 'p01' Henri — September 25, 2007

Would be kind of cool if it didn’t tell me to install the flash plugin that I already have installed.

Comment by Andy — September 25, 2007

A bunch of the javascript code that causes the SWF to display here has been html-escaped, that’s why the Flash piece isn’t showing up for people.

Mathieu – care to explain how you’d do it differently? Especially for cases where the two fingers start off vertically or horizontally aligned.

Comment by Michal Migurski — September 25, 2007

Yes, of all the blogs, Ajaxian posts can’t handle HTML code, it’s long been a problem.

Comment by Charles — September 25, 2007

In the meantime:
http://mike.teczno.com/img/right-triangles/RightTriangles.swf

Comment by Kalle — September 25, 2007

Leave a comment

You must be logged in to post a comment.