狠狠撸

ハンズオン講座
～Kinectで身長を計測しよう！～
Microsoft Student Partners Fellow
同志社大学大学院
今入康友（通称：いまにゅー）
Twitter: @imanyu
Facebook: facebook.com/imanyu

ハンズオンの概要
? Kinectセンサーを使ったデスクトップアプリを作る
? 骨格情報から頭と足の位置をセンサーで取得し，その距離を基に計算
? 頭の座標にずれがあるので，深度情報より頭の頂点を求める

WPFアプリケーション
? WPF｜Windows Presentation Foundation
? 魅力的な外観のユーザーエクスペリエンスを持つ
Windowsクライアントアプリケーションを作成するための
次世代プレゼンテーションシステム
ザムル
? ビュー(XAML)とロジック(C#/VisualBasic)を分けて作成
? XAMLとC#/VBが連携してプログラムが動きます
? もっと詳しいことを知りたい人は
MSDNのWindows Presentation Foundationをご覧ください
(http://msdn.microsoft.com/ja-jp/library/ms754130%28v=vs.110%29.aspx)

XAMLとC＃について
XAML C#
Button
Clickイベント
Clickイベント
{
丸の色を青色に変える;
三角を移動させる;
}
目に見える部分を担当
（ユーザが見る?使うものを提供）
目に見えない部分を担当
（計算したり，XAMLに命令したり）
Hello World!

Kinectセンサー｜Kinect for Windows
? ジェスチャーや音声を認識できるセンサーデバイス
? XBOX 360のゲームシステムとして登場
? 3D深度センサー，RGBカメラ，指向性マイクアレイを搭載

開発環境
? Windows 8.1
? Windows 7 環境でも大丈夫です
? Visual Studio Professional 2013
? Kinect for Windows SDK v1.8
? グループで1台の機材なので，分担してプログラミングをしよう！

プロジェクトの作成
? ファイル→ 新規作成→ プロジェクト
? Visual C# → Windows デスクトップ→ WPFアプリケーションを選ぶ
? 名前を「KinectHeightMeasure」と入力して，OKを押す

参考資料
? プロジェクトの中身
? Properties｜プロジェクトの設定が色々入ってる
? 参照設定｜ライブラリやアセンブリなどの管理
? App.config｜Settings.settingsの中身が記述されてる
? App.xaml/App.xaml.cs｜起動時の設定など
? MainWindow.xaml/MainWindow.xaml.cs
｜メインのプログラムが記述されてる
? 今日使うのは，参照設定とMainWindow.xamlと
MainWindow.xaml.csを使います

MainWindow.xamlを見てみよう
? 初期画面はこんな感じ
デザイナウィンドウ
XAMLで書かれたものが
グラフィカルに表示されるところ
これがXAML

とりあえず実行してみよう
? プロジェクト作成直後の状態で実行できます
? デバッグ→ デバッグ開始/ デバッグなしで開始を押してみましょう
? F5 またはCtrl + F5 でもOK
? 何も表示されないウィンドウが
表示されます
? ×で閉じてください

ちょこっと勉強会のための用意
? 今作ったプロジェクト内のソースを別のものに置き換えます
? MainWindow.xaml内のソースを
デスクトップ上「kinect_source_xaml.txt」の中身をコピーして
置き換えてください
? MainWindow.xaml.cs内のソースを
デスクトップ上「kinect_source_cs.txt」の中身をコピーして
置き換えてください

MainWindow.xamlに書き足そう
? ウィンドウサイズを変更
? <Window>内のHeightとWidthの数値を変更する
? Height｜350 → 511
? Width｜525 → 648
? ウィンドウタイトルを変更
? <Window>内のTitleを変更する
? Title｜MainWindow → Kinectで身長計測

? KinectのRGBカメラの映像を出すコントロールを追加
? <Image>コントロールを使用
? x:Name=“Kinect_image”｜コントロールの名前
? Height=“480”｜コントロールの高さ
? Width=“640”｜コントロールの幅
? <Image x:Name=“kinect_image” Height=“480” Width=“640” /> 【１】

参照設定を追加しよう
? Kinect SDKをプログラムで使用するために参照設定を追加する
? 参照設定を右クリック→ 参照の追加→ 左ペインの参照→参照をクリック
「C:Program FilesMicrosoft SDKsKinectv1.8Assemblies」
の中からMicrosoft.Kinect.dllを選択して追加を押す
? 参照設定にMicrosoft.Kinectが追加されたらOK

MainWindow.xaml.csに書き足そう
? Kinect SDKを使えるようにしましょう
? usingを追加しよう
? using Microsoft.Kinect; 【２】

? Kinectセンサーを用意しよう
? private KinectSensor kinect;｜Kinectセンサーを格納するインスタンス
【３】
? try { … } catch { … }｜例外処理
? KinectSensor.KinectSensors.Count()｜接続されているKinectセンサーの数を数える
? kinect = KinectSensor.KinectSensors[0];｜Kinectセンサーを取得する
【４】

? ColorStream，SkeletonStream，DepthStreamを設定しよう
? RGBストリームを許可する｜640×480の大きさ，30フレーム/秒に設定
? 深度ストリームを許可する｜640×480の大きさ，30フレーム/秒に設定
? 骨格ストリームを許可する
※Streamとは…
【５】
Kinectから送られてくるデータの流れのこと

? フレームが届いた時の処理を設定する
? kinect.AllFramesReady += kinect_AllFramesReady;
? += と書いて，TABキーを2回押すと，自動的にkinect_AllFramesReadyメソッドが生成
? Kinectを開始する
? kinect.Start();
【６】
【７】

? ColorImageFrameが届いた時の処理
? ColorImageFrame colorFrame = e.OpenColorImageFrame()
? ColorImageFrameを取得する
? colorFrame.CopyPixelDataTo(colorPixel);
? colorFrameのピクセルデータをcolorPixel(byte配列)にコピーする
? kinect_image.Source = BitmapSource.Create(~~~~);
? XAMLのkinect_imageのSourceにBitmapSourceを代入する
【８】

? DepthImageFrameとSkeletonFrameが届いた時の処理
? DepthImageFrame depthFrame = e.OpenDepthImageFrame()
? DepthImageFrameを取得する
? SkeletonFrame skeletonFrame = e.OpenSkeletonFrame()
? SkeletonFrameを取得する
【９】

? 身長計測用メソッド「MeasureHeightメソッド」を呼び出す
? kinect_AllFramesReadyメソッド内で呼び出す
【10】

? 身長計測用メソッド「MeasureHeightメソッド」を作ろう
? メソッド名：MeasureHeight
? 戻り値の型：void
? 引数１：DepthImageFrame
? 引数２：SkeletonFrame
? private void MeasureHeight(DepthImageFrame depthFrame, SkeletonFrame skeletonFrame) { }

? 骨格情報を取得しよう
? Skeleton[] skeletons = new skeleton[skeletonFrame.SkeletonArrayLength];
? 骨格情報を格納する配列を用意
? skeletonFrame.CopySkeletonDataTo(skeletons);
? 骨格情報を取得する【11】

? トラッキングされている人物を検出
? skeletons[playerIndex].TrackingState == SkeletonTrackingState.Tracked
? TrackedになるまでplayerIndexを1ずつ多くしていく
? if (playerIndex == skeletons.Length)
? もしTrackedのものがなければ，処理を中断
? Skeleton skeleton = skeletons[playerIndex++];
? トラッキングされている人物のSkeletonだけを取得
? ※DepthImagePixel内のplayerIndexは1から始まるので，playerIndex++とする
【12】
【13】

? 各種骨格を取得する
? Joint head_joint = skeleton.Joints[JointType.Head];
? Joint footLeft_joint = skeleton.Joints[JointType.FootLeft];
? Joint footRight_joint = skeleton.Joints[JointType.FootRight];
? 各ジョイントがTrackedされていなければ処理を中断
【14】

? 深度イメージのデータを取得する
? DepthImagePixel[] depthPixel = new DepthImagePixel[depthFrame.PixelDataLength];
? DepthImagePixel構造体の配列を用意
? 16bitの深度情報
? プレイヤーインデックス
? depthFrame.CopyDepthImagePixelDataTo(depthPixel);
? depthPixelに深度データを取得する
【15】

? 頭の頂点を探そう
? kinect.CoordinateMapper.MapSkeletonPointToDepthPoint();
? 骨格データから深度データに座標変換をする
【16】
? 認識しているプレイヤーの頭のY座標を1ずつ小さくしていき頂点を探す
? headDepth.Yを更新して，元の骨格データに座標変換する
top
headDepth.Y
y
x
【17】
【18】

? foot_jointを作成する
? Joint foot_joint = footLeft_joint.Position.Y < footRight_joint.Position.Y ?
footLeft_joint : footRight_joint;
? 左右のY座標が小さい方を足のY座標とする
? 三項演算子｜ “条件？ trueの時: falseの時;”
? 頭と足のY座標を取得する
? double head_y = head_joint.Position.Y;
? double foot_y = foot_joint.Position.Y;
【19】
【20】

? 身長を表示するコントロールを用意しよう
? <TextBlock>コントロールを使用
? x:Name=“height_textblock”｜名前
? FontSize=“35”｜文字の大きさ
? FontWeight=“Bold”｜太文字に
? Foregroud=“Red”｜文字色を赤色
? Text=“---cm”｜表示する文字
? HorizontalAlignment=“Left”｜左を基準
? VerticalAlignment=“Top”｜上を基準
? <TextBlock x:Name=“height_textblock” Text=“---cm”
HorizontalAlignment=“Left” VerticalAlignment=“Top”
Foreground=“Red” FontSize=“35” FontWeight=“Bold” />
【21】

? 身長を計算しよう
? 頭のY座標– 足のY座標の絶対値が身長となる（単位：メートル）
? Math.Abs()を使用して絶対値を計算する
? 単位がメートルなので100倍してセンチメートルに変換する
? ToStringメソッドで，小数点第一位までを表示する
? 小数点第二位で四捨五入される
? 計算結果をXAMLのheight_textblockに表示させる
【22】

? 身長をわかりやすく表示させよう
? 体の横に線（細い四角）を描画する
? 線の真ん中に，身長を表示させる
? 身長をわかりやすく表示するメソッド「DrawHeightメソッド」を作成する
? メソッド名：DrawHeight
? 戻り値の型：void
? 引数１：SkeletonPoint｜頭
? 引数２：SkeletonPoint｜足

? 身長をわかりやすく表示させるメソッド「DrawHeightメソッド」を
呼び出す
? MeasureHeightメソッド内で呼び出す
【23】

? SkeletonPointをColorImagePointに座標変換する
? kinect.CoordinateMapper.MapSkeletonPointToColorPointを使用する
【24】

? 追加の情報を載せるコントロールを用意しよう
? <Canvas>コントロールを使用
? x:Name=“height_canvas”｜コントロールの名前
? Height=“480”｜コントロールの高さ
? Width=“640”｜コントロールの幅
【25】
? <Canvas x:Name=“height_canvas” Height=“480” Width=“640” />

? 線(細い四角形)を作成して，height_canvasに追加しよう
? Rectangleで四角形を作成
? Margin：左上右下の位置を設定する
? height_canvas.Children.Addで四角形を追加
? height_canvas.Children.Clear();｜追加する前に以前追加されたものをすべてクリアする
? height_textblockの位置を調整
【26】
【27】
【28】

狠狠撸

関西MSP勉強会～Kinect編～ハンズオン資料　Kinectで身長を計測しよう！

More Related Content

関西MSP勉強会～Kinect編～ハンズオン資料　Kinectで身長を計測しよう！

狠狠撸

関西MSP勉強会～Kinect編～ ハンズオン資料 Kinectで身長を計測しよう！

More Related Content

関西MSP勉強会～Kinect編～ ハンズオン資料 Kinectで身長を計測しよう！

関西MSP勉強会～Kinect編～ハンズオン資料　Kinectで身長を計測しよう！

関西MSP勉強会～Kinect編～ハンズオン資料　Kinectで身長を計測しよう！