Kinectで手の動きに合わせて波紋を発生させるサンプル

2012年7月25日(水)
薬師寺 国安

今回のサンプルは、RippleEffect効果を使って波紋をシミュレートするサンプルです。筆者が手でタップした点を中心に波紋が広がる効果を得られます。実際に動かした動画は以下になります。

サンプルプログラムは以下よりダウンロードできます。
手の動きに合わせて波紋を発生させるサンプル(622KB)

プロジェクトの作成

VS 2010のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。

次に、「WPF アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「KINECT_RippleEffect」という名前を付けています。

ツールボックスからデザイン画面上に、Imageと、KinectSensorChooserコントロールを1個ずつ配置します。

書き出されるコードはリスト1、デザイン画面は図1のようになります。

リスト1  書き出されたXAMLコード(MainWindow.xaml)

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"
    x:Class="MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="799" Height="676" 
xmlns:my="clr-namespace:Microsoft.Samples.Kinect.WpfViewers;assembly=Microsoft.Samples.Kinect.WpfViewers"> 
    <Grid x:Name="LayoutRoot">
    <Image Margin="49,50,101,97" Width="640" Height="480" Name="SourceImage"/>
    <my:KinectSensorChooser Height="201" HorizontalAlignment="Left" Margin="360,295,0,0" Name="KinectSensorChooser1" VerticalAlignment="Top" Width="306" />
    </Grid>
</Window>
 図1:各コントロールを配置した(クリックで拡大)

参照の追加

VS2010のメニューから「プロジェクト(P)/参照の追加(R)」と選択して、各種コンポーネントを追加しておきます。今回追加するのは以下の6つです。

  • Microsoft.Kinect
  • CodingFun4.Kinect.Wpf.dll
  • Microsoft.Samples.Kinect.WpfViewers.dll
  • Microsoft.Expression.Effect.dll
  • Microsoft.Expression.Interractions.dll
  • System.Windows.Interractivity.dll

.NETタブ内に表示されていないDLLファイルは「参照」タブからDLLファイルを指定します。

Microsoft.Kinect.dllは、C:\Program Files\Microsoft SDKs\Kinect\v1.5\Assemblies内に存在しますので、これを指定します。CodingFun4.Kinect.Wpf.dllはCoding4Fun.Kinect.Toolkitをダウンロードして解凍したフォルダ内に存在していますので、それを指定してください。また、Kinectforwindowssdkv1.zipを下記のURLよりダウンロードし、解凍してできるフォルダ、
\KinectforWindowsSDKV1\KinectforWindowsSDKV1\2.Setting Up Dev Environment\SettingUpDevEnvironmentVB\SettingUpDevEnvironment\bin\Release
の中にある、Microsoft.Samples.Kinect.WpfViewers.dllを参照の追加で追加してください。
→参照:Kinectforwindowssdkv1(Rapidlibrary)

(*)KinectSensorChooserをデザイン画面上に追加した時点で、このMicrosoft.Samples.Kinect.WpfViewers.dllは既に参照されていることになります。

Microsoft.Expression.Effect.dll/Microsoft.Expression.Interractions.dll/System.Windows.Interractivity.dllの3つは.NETタブ内に表示されていると思いますので、それを指定します。表示されていない場合は以下のフォルダ内にありますので、参照してください。
C:\Program Files\Microsoft SDKs\Expression\Blend\.NETFramework\v4.0\Libraries

Blend4でのRipple特殊効果の設定

一度VS2010を終了します。Microsoft Expression Blend 4(以下Blend4)を起動し、VS2010で作成したKINECT_RippleEffectソリューションファイルを開きます。

Blend4の[アセット(T)]パネルをクリックし、「コントロール」からRippleを検索して表示させます。「検索」欄に「Ripp」と入力すると、Rippleが表示されます(図2)。

 図2:「検索」欄に「Ripp」と入力して、Rippleが表示された(クリックで拡大)

表示されたRippleを「オブジェクトとタイムライン(B)」内のLayoutRoot要素上にドラッグ&ドロップします(図3)。

 図3:RippleをLayoutRoot上にドラッグ&ドロップした(クリックで拡大)

追加したRippleEffectを選択して表示されるプロパティの、「名前」にmyRippleEffectと指定し、Frequencyに0、 Magnitudeに0、 Phaseに0と指定しておきます(図4)。

Frequencyにはシェーダー内の周波数の値を指定します。Magnitudeにはシェーダー内の振幅の値を、Phaseにはシェーダー内のフェーズ値を指定します。

 図4:RippleEffectのプロパティを設定する(クリックで拡大)
薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています