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を追求してみます。

“Leap Motionで空中スワイプ” への3件の返信

  1. 初めまして。私、大学でプログラミングを学んでいる者です。
    現在leapmotionを利用した卒業研究を行っており、記事を拝見しました。その中で空中でスワイプするアプロケーションが私の想像している完成形に近い物で勉強になりました。しかし私の勉強不足でスワイプをするコードがなかなか完成できずにいます。もしよろしければコードを教えていただくことは可能でしょうか。難しいようでしたらご返信をいただくには及びません。
    どうぞよろしくお願いいたします。

    1. はじめましてtakagi様。
      コードが手元にありました。下記にアップしています。
      https://github.com/KodaTemari/leap
      index.htmlの67行目以降にプログラムを記述しています。
      ただ、解読が難しいかもしれません。。
      参考になれば幸いです。

      1. koda様。迅速な返信ありがとうございます。
        おかげさまで卒業研究が前に進みそうです。
        本当にありがとうございました。
        これからも投稿楽しみにしております。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)