PR

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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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