Leap Motion実用サンプル（Visual Basic編）
Leap Motionの軌跡に従って連続した円を描く
Leap Motionで取得した手の動きに合わせて、ランダムな色の円が大きくなりながら連続で描画されるサンプルWPFアプリを作ってみよう。
今回はタッチ・ポイントをした位置から、画面をなぞっていくと、無数のランダムな色の円が、大きくなりながら連続で描画されていくWPFアプリを作成する。さっそく、その開発内容を説明していこう。
まずWPFプロジェクトを作成しよう
今回のLeap MotionアプリもWPFで作成する。これまでの連載の手順と同様に、Visual Studio 2012（以下、VS 2012）のIDEを起動してVisual Basicの「WPFアプリケーション」テンプレートで新規プロジェクトを作成する。［名前］欄には、ここでは「DrawEllipseLeapMotion」と指定する。
WPFの基本的な作成手順は、第1回と同じ手順となるので、説明を割愛する。具体的な手順は、第1回の「参照の追加」「プロジェクトのルートに「LeapCSharp.dll」と「Leapd.dll」を追加する」「プロパティを設定する」を参考にしてほしい。
今回のLeap Motionアプリについて
今回のアプリは、Leap Motionのタッチ・ポイントに追従してEllipse（＝だ円）が無数に描画されるアプリだ（次の画面を参照）。
Ellipseの色はランダムに変化させている。Ellipseの直径も変化させており、350px以上になると、またEllipseの直径は0pxから開始される。描画されたEllipseは［消去］ボタンを空中タッチすることで消すことができる。
画面のレイアウト（MainWindow.xaml）
デフォルトでGridコントロールが配置されているのをCanvasコントロールに変更する（座標値が取得しやすいため）。
デザイン画面上に、「ShowArea」という名前のCanvasコントロールを配置する。
次に名前が「Button1」のButtonコントロールを配置し、Contentプロパティに「消去」と指定しておく。この［消去］ボタンは、画面をクリアするためのものだ。
一番前面に（つまり最後の行に）、「paintCanvas」という名前のInkPresenterを配置する。これはタッチ・ポイントを表示するためのものだ。
書き出されるXAMLコードは次のリストのようになる。
|
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="1080" Width="1920" WindowState="Maximized">
<Canvas>
<Canvas x:Name="ShowArea"/>
<Button x:Name="Button1" Content="消去" Height="143" Canvas.Left="1678" Canvas.Top="43" Width="185" FontSize="48" FontWeight="Bold"/>
<InkPresenter Name="paintCanvas"/>
</Canvas>
</Window>
|
レイアウト図は次の画面のようになる。
- 1「ShowArea」という名前のCanvasコントロールを配置する。
- 2Contentプロパティに「消去」と指定したButton1コントロールを配置する。
- 3全てのコントロールの一番前面にpaintCanvas」という名前のInkPresenterコントロールを配置する。この領域にタッチ・ポイントが表示される。
プログラムコード（MainWindow.xaml.vb）
では、次にプログラムコード（MainWindows.xaml.vbファイル）を見ていこう。
プログラムコードも、タッチ処理以外は第1回と基本的に同じ内容となるので、説明を割愛する。まずは第1回の「名前空間の読み込み」「メンバー変数の宣言」「MainWindow_Loadedメソッドの処理」「Updateメソッドの処理」の開発手順を参考にタッチ処理の前までを実装してほしい。相違点として、下記の3点を修正してほしい。
（1）Ellipseクラス型のメンバー変数「Private myEllipse As Ellipse」を宣言する。
（2）乱数を発生させるために、Randomクラス型のメンバー変数「Private myRnd As Random」を宣言する。
（3）EllipseのWidthとHeightの値に指定する1ずつ増加するメンバー変数「Private no As Integer」を宣言する。
MainWindow_Loadedメソッドの処理
～第1回目と同じ処理の解説になるので割愛する。～
Updateメソッドの処理
～第1回目と同じ処理の解説になるので割愛する。～
Updateメソッドの処理（タッチ処理部分）
○［消去］ボタンの座標値を取得する
データポイントのX座標をメンバー変数「x」に格納し、データポイントのY座標をメンバー変数「y」に格納する。
［消去］ボタン（名前がButton1）の座標値を取得し、タッチ・ポイントの「x」と「y」座標がButton1の座標値の範囲内にあった場合は、メンバー変数Indexを1で初期化する（次のリストを参照）。
|
For Each Pointable As Pointable In leap.Frame.Pointables
……コード略（前述）……
x = touchPoint.X
y = touchPoint.Y
' ［消去］ボタンの座標値を取得し、メンバー変数Indexを1で初期化する
If x > Button1.GetValue(Canvas.LeftProperty) And x < Button1.GetValue(Canvas.LeftProperty) + Button1.Width AndAlso y > Button1.GetValue(Canvas.TopProperty) And y < Button1.GetValue(Canvas.TopProperty) + Button1.Height Then
Index = 1
End If
……コード略（続きは後述）……
End If
Next
|
次にLeap Motionのタッチ処理になる。タッチのイメージについては、第5回の「Updateメソッドの処理（タッチ処理部分）」を参考にしてほしい。
まずホバーの場合は、表示されている円がBlueの色になるだけで、何も起きない。具体的には下記のコードのようになる。
|
For Each Pointable As Pointable In leap.Frame.Pointables
……コード略（前述）……
If Pointable.TouchDistance > 0 AndAlso Pointable.TouchZone <> Global.Leap.Pointable.Zone.ZONENONE Then
touchIndicator.Color = Colors.Blue
……コード略（続きは後述）……
End If
Next
|
次にタッチした処理になる。タッチした場合は、表示されている円がRedに変わる。
0以上6以下の乱数を発生させて、その乱数の値によって条件分岐を行う。Color構造体の新しいインスタンス「myColor」を作成し、色をセットしていく。
Ellipseの新しいインスタンス「myEllipseオブジェクト」を作成し、Width／Heightプロパティの値を1ずつ増加させるためのメンバー変数「no」の値を指定する。noの値が350より大きくなれば、noの値は0で初期化される。枠線の幅（StrokeThickness）に「2」を指定し、枠線の色（Stroke）にmyColorオブジェクトを指定する。SetValueメソッドで、Canvas.LeftPropertyにメンバー変数「tx」の値を指定し、Canvas.TopPropertyにメンバー変数「ty」の値を指定する。こうすることで、画面をタッチした（ポイント時の円が赤色のとき）位置にランダムな色でEllipseが描画され、ポイントの移動に伴ってEllipseも拡大しながら移動して描画されていくようになる。
具体的には以下のコードになる。
|
If Pointable.TouchDistance > 0 AndAlso Pointable.TouchZone <> Global.Leap.Pointable.Zone.ZONENONE Then
……コード略（前述）……
ElseIf Pointable.TouchDistance <= 0 Then
touchIndicator.Color = Colors.Red
' 0以上6未満の乱数を発生させる
Dim rnd = myRnd.Next(6)
' 新しいColorのインスタンスmyColorを宣言する
Dim myColor As New Color
' 乱数の値で条件分岐を行う
Select Case rnd
Case 0
myColor = Colors.Magenta
Exit Select
Case 1
myColor = Colors.Red
Exit Select
Case 2
myColor = Colors.Blue
Exit Select
Case 3
myColor = Colors.Gold
Exit Select
Case 4
myColor = Colors.Green
Exit Select
Case 5
myColor = Colors.Black
Exit Select
End Select
' 新しいEllipseのインスタンスmyEllipsを作成する
' 各プロパティに値を指定する
' Ellipseの位置はCanvas.LeftPropertyやCanvas.TopPropertyに
' メンバー変数txとtyの値を指定する
myEllipse = New Ellipse
With myEllipse
.Width = no
.Height = no
.StrokeThickness = 2
.Stroke = New SolidColorBrush(myColor)
.SetValue(Canvas.LeftProperty, tx)
.SetValue(Canvas.TopProperty, ty)
End With
' メンバー変数「no」が「350」より大きくなると、変数「no」を「0」で初期化する。
' それ以外のときは1ずつ増加させる。
If no >= 350 Then
no = 0
Else
no += 1
End If
' メンバー変数「Index」が「1」の場合は、「ShoawArea」というCanvasコントロールをクリアする
' これは［消去］ボタンが空中タッチされた場合の処理だ
Select Case Index
Case 1
ShowArea.Children.Clear()
no = 0
Index = 0
Exit Select
End Select
Try
' ShowAreaコントロールにmyEllipseオブジェクトを追加していく
' これで、タッチの軌跡に従ってランダムな色で円が描画されていく
' 例外が発生するので例外処理を行う
ShowArea.Children.Add(myEllipse)
Catch
Exit Sub
End Try
' タッチ対象外
Else
touchIndicator.Color = Colors.Gold
no = 0
End If
|
このサンプルのコードは下記よりダウンロードできる＊1。
- ＊1サンプルをダウンロードして動かす場合は、「LeapCSharp.NET4.0.dll」や「LeapCSharp.dll」、「Leap.dll」を読者自身のフォルダー内にあるDLLファイルに指定し直さなければ動かない可能性があるので、動かない場合は再指定していただきたい。
■
今回はこれで終わりだ。空中タッチ・ポイントの位置にEllipseを表示させ、ポイントに追従させてEllipseを移動させると、昔、小中学生のころ、コンパスで描いたような図形が表示される。
Ellipsが表示されるのは、タッチ・ポイントの色が赤の場合、つまり空中タッチされているときに限られる。Ellipseを描画している途中で、ホバー状態（＝タッチ・ポイントが青色）になった場合は、Ellipseの描画は中断される。その場合は、再度、空中タッチして、タッチ・ポイントを赤にするとEllipseの描画が開始される。
Leap Motionも使い方によっては、昔の懐かしい記憶を呼び起こすアプリを作成できる、これもまた、何と楽しいことではないだろうか！
では、また次回の記事でお会いしよう。
※以下では、本稿の前後を合わせて5回分（第5回～第9回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
5. Leap MotionでBing Mapsを扱う
リスト内に表示された住所項目をLeap Motionによりタッチすることで、Web上のサービス「Bing Maps」での地図検索を行うサンプル・アプリを作ってみよう。
7. 3D回転で表示される画像をLeap Motionで切り替える
画像が立体的に回転して表示され、Leap Motionで任意の画像を空中タッチすると、アニメーションを伴ってその画像が大きく表示されるサンプルWPFアプリを作ってみよう。
8. 【現在、表示中】≫ Leap Motionの軌跡に従って連続した円を描く
Leap Motionで取得した手の動きに合わせて、ランダムな色の円が大きくなりながら連続で描画されるサンプルWPFアプリを作ってみよう。
