ProcessingやWindows 8.1アプリでLeapの空間ジェスチャを使うには：PC制御UIの最先端Leapアプリ開発入門（3）（1/4 ページ）

画面タッチやマウスなどのように“触れる”ことなく空中ジェスチャでPC操作が可能な新しいデバイスLeap Motionを使い、これまでにないアプリを開発しましょう。今回は、ゲームループやLeapのジェスチャ3種Circle、Swipe、Tap、ProcessingのLeapジェスチャアプリ、そしてMVVMパターンで指の数を検出するC#アプリについて解説します。

[密葉優，＠IT]

　前回の「ProcessingやJavaScriptでLeap Motionを動かす」では、Leap Motion（以下、Leap）を使って、指先の座標を取得して、座標に合わせてオブジェクトを表示しました。今回はLeapを使って、さまざまなジェスチャを利用してみましょう。

　今回は、前回に引き続きProcessingでLeapアプリを作りますが、もう1つ最新のWindows 8.1でも動くLeapのWindowsストアアプリも作ってみます。

ゲームループとジェスチャ

　基本的にLeapのようなセンサデバイスは、動作している間は絶え間なく情報を送り続けます。ユーザーの動きに合わせて、いまこの瞬間のセンサの情報を使って…… といった処理をするアプリは、ゲームループととても相性が良いです。

　ゲームループは、最初に「初期化処理」、次に「無限ループ」、最後に「アプリ終了処理」の3部構成でできていて、無限ループの中でアプリ実行中の処理を行う仕組みです。アプリ実行時の処理は1秒間に30回、つまり30fpsほどあれば、ユーザーはとても快適に感じます。

　Processingはゲームループでできていて、センサを扱う処理はアプリ実行時であるdrawに記述すればよいです。前回もdrawに処理を書いて、円を表示しました。

　しかし、ジェスチャは毎回処理を行うのではなく、どちらかというとイベントです。例えば一般的なゲームの場合、「コントローラの右カーソルが押されていたら対象の座標を右に1つ動かす」という処理を行い、これが連続的に処理されるため、「右カーソルを押し続けると、右に移動する」ように見えます。

　これがLeapのジェスチャになると、「フリックされた時に何かを処理する」といった場合、「フリックし続ける」というジェスチャはありません。すると、フリック処理は30fps（1/30秒）しか反映されません。「フリックされたら何かを変更する」あるいは「フリックされたら60fpsの間に、この処理をする」というように、処理に寿命を設けたりします。

　ただ、ゲームループ内にジェスチャを監視したり、自分でジェスチャイベントのような機構を作るのは、少し面倒です。しかしProcessingであれば、ゲームループの中に差し込むジェスチャイベントがすでに用意されていて、とても簡単に利用できます。

Leapの3種類のジェスチャで取得する値

　まずは、Leapでジェスチャを行ってみました。

　今回は「Circle」「Swipe」「Tap」の3種類のジェスチャを使います。ジェスチャには動作ごとにIDが振られ、すべて個別ものとして処理が可能です。

【1】指先をくるくる回して円を描く「Circle」ジェスチャ

　Circleを試してみましょう。Circleは指先をくるくる回して円を描きます。データとしては以下のような値が取得できます。

Gesture type: TYPE_CIRCLE
ID: 133
Radius: 79.48042
Normal: (-0.122678, 0.300014, -0.946014)
Clockwiseness: clockwise
Turns: 1.6572438
Center: [ 268.44614, 326.93817, 134.80998 ]
Duration: 0.885906s

　大きな円を描くと、半径であるRadiusの値が大きくなります。Clockwisenessは時計回りを指し、反時計回りのジェスチャを行うとcounterclockwiseとなります。Turnsは回転数を表していて、1で1周となります。Centerにはジェスチャを行った座標を指します。Durationはジェスチャを行っている時間を指します。

　例えば、「時計回りに大きくゆっくり丁寧に1周」というジェスチャを行うと以下のようなデータになります。

Gesture type: TYPE_CIRCLE
ID: 150
Radius: 148.4748
Normal: (-0.0693975, 0.12473, -0.989761)
Clockwiseness: clockwise
Turns: 1.085176
Center: [ 253.94098, 248.1459, 255.3083 ]
Duration: 2.232661s

【2】指先で空間をはらう「Swipe」ジェスチャ

　次にSwipeを試してみましょう。Swipeは指先で空間をはらうジェスチャです。Swipeを行うと以下のようなデータが取得できます。

Gesture type: TYPE_SWIPE
ID: 160
Position: [ 412.94247, 297.8159, 212.702 ]
Direction: (0.924018, 0.151835, 0.350909)
Duration: 0.167891s
Speed: 322.07733

　Positionは座標を指します。DirectionはSwipeした方向を3軸で表しています。DurationはSwipeにかかった時間で、Speedは名前の通り、Swipeの速度を指します。

　右方向に素早くSwipeすると以下のようなデータになりますが、あまりに速過ぎるとDurationが0.0sになることもあります。

Gesture type: TYPE_SWIPE
ID: 180
Position: [ 328.27203, 299.58533, 124.358284 ]
Direction: (0.921896, 0.173598, -0.34637)
Duration: 0.022783s
Speed: 1564.7147

【3】指先で空間をつつくような「Tap」ジェスチャ

　最後にTapです。Tapは指先で空間をつつくようなジェスチャですが、判定がシビアで他のジェスチャに比べて少し難しいかもしれません。そのため、やや大げさにジェスチャを行います。また、他のジェスチャと誤認識しやすい一面もあります。

　Tapを行うと以下のようなデータが取得できます。他のジェスチャに比べて、とてもシンプルです。

Gesture type: TYPE_SCREEN_TAP
ID: 186
Position: [ 232.38725, 114.81238, 478.72543 ]
Direction: (-0.877058, 0.438277, 0.196681)
Duration: 0.087608s