Leap Motionで空中スワイプ

Leap MotionのセンサーデータはJavaScriptで取得できることを、前回確認しました。

手の座標を取得できるので、手を払うスワイプ操作UIを作ってみます。

なんだか心地よい空中スワイプ

スライドショーをスワイプするアプリケーションを作ってみました。

自分の手が画面上に入り込み、さらにスワイプするときに、ちょっと重さを感じるような錯覚を受けます。

思ったより、おもしろい体験です。

Web基本構成で開発

leapjsのサンプル、css-visualizer.htmlをベースとして使いました。

HTML＋CSS＋JavaScriptというWebの基本構成で開発できるのが、うれしいところです。

手のひらのX座標は、

で、値を取れます。

今のフレームのhand.palmPosition[0]と、前のフレームのhand.palmPosition[0]を引き算すると、X方向の移動距離を求められます。

例：
今のフレーム　X座標:280
前のフレーム　X座標:300

X方向の移動 -20

もし移動距離が -10より小さかったら、スワイプと判断し、スライドイベントを発生させるようにしました。

値が小さくなる（マイナスになる）場合、右から左へスワイプしたことになります。

スライドも右から左へ動かします。

一方通行のスワイプ操作が良い

昔、反射式光電スイッチでジェスチャー操作を作ったとき、空中スワイプ操作の問題に直面しました。

手をスワイプして戻るときに、意図しない逆方向の入力が入ってしまいます。

手の速さ、手を戻すタイミング、戻す速さは人それぞれで、誰もが使いやすいUIとして成立させることは難しかったです。

それならもう、一方通行のスワイプにして、スライドショーを操作したほうが快適だろうという結論になりました。

しかし、他に方法があるかもしれません。

今後もより操作性の高いUIを追求してみます。