Kinectを使ったインタラクション作品を作ってみたい！
聞くところによると、TouchDesignerというツールで簡単に実現できるらしい！？

ということで、Windows10のPCを前提として次の3点をまとめました。
・Kinectの導入
・TouchDesignerの導入
・Kinect＋TouchDesignerでインタラクション開発（簡単なやつ）

Xbox One Kinectの導入

準備するもの

Xbox One Kinect本体
http://www.xbox.com/ja-JP/xbox-one/accessories/kinect
Xbox Kinect センサーアダプター
http://www.xbox.com/ja-jp/xbox-one/accessories/kinect/kinect-adapter

以前はKinect v1, v2とありましたが、Xbox One KinectからはXbox、PC用共通のパッケージとなっています。
PCに接続するためにはアダプターの購入が必要です。（合わせて2万円くらい）

システム要件

Windows 用 Kinect V2 センサーまたは Xbox One 用 Kinect センサー
最新バージョンの Windows 用 Kinect SDK*
オペレーティングシステム: Windows 8/8.1/10
64 ビット (x64) プロセッサ
2.66-GHz 以上のデュアルコアプロセッサ
USB 3.0 接続（古いPCの場合注意）
2 GB RAM

Kinect環境の構築

Kinect for Windows SDK 2.0のインストール

まずは公式ページからソフトウェア開発キット（SDK）をダウンロードしてインストールします。
C++、C#等での開発が可能となります。
＜公式ページ＞

https://developer.microsoft.com/ja-jp/windows/kinect/tools

Kinectの接続

Kinectのコンセントを挿し、PCに接続します。
この際、USB3.0のポートに挿す必要があるので注意してください。

Kinect Studioで動作確認

SDKにはKinect Studio v2.0が含まれています。
プログラム一覧から起動します。

起動時は[Not coneccted]となっています。

[Not coneccted]の左側のアイコンをクリックすると、Kinectに接続します。

接続に成功するとKinect本体の各種インジケータが光り、深度（距離）画像がLiveで表示されます。

※MONITORが表示されていない場合
[FILE]メニュー->[View]からウィンドウの表示設定をしてください。

※接続に失敗する場合
・デバイスマネージャからKinectを認識しているか確認してください。（USB3.0ポートか確認）
・Driverが正しくインストールされているか確認してください。（デバイスの抜き差し、再起動、再インストール等）

TouchDesignerでインタラクション作品の作成

TouchDesignerのインストール

DERIVATIVEの公式ページのDOWNLOADから最新版をダウンロードします。
なお、開発者ブログは非常に参考になるようです。
http://www.derivative.ca/
（以下の画像はVer.088）

※バグ等もあるそうなので、作品の製作にはBeta版は避けて安定版推奨

SHUHEI MATSUYAMAさんのページがわかりやすかったです。
https://www.shuhei-matsuyama.com/single-post/2015/12/17/TouchDesigner%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95

ちなみにライセンスにはPro／Commercial／Educational／Non-Commercialがあり、
Non-Commercialは扱える解像度に制限があったりしますが10回インストールまで無償です。

TouchDesignerの使い方

いよいよTouchDesignerをプログラムメニューから起動します。

起動時は以下のようなサンプルプログラムが表示されます。
画面左側のPaletteは今回は使用しないので[x]で閉じます。
Paletteは左上のアイコンを押すと表示されます。

オペレーターと呼ばれる基本処理単位のようなものを線でつないでプログラミングしていきます。
これらの処理を一つの「ハコ」にまとめることもでき、入れ子構造が可能です。
これら作業エリアに配置されている「ハコ」は一括りにノードと呼ばれます。

基本的な操作方法＆よく使うショートカット

実際に画面上で触りながら確認してみてください。
左クリック：オペレーターの選択
左ダブルクリック：新しいオペレーターの挿入
左クリック＆ドラッグ：ハコの移動、または作業エリアの表示場所を移動
右クリック：作業エリア背景、オペレーター、結線上でそれぞれのメニュー表示
右クリック＆ドラッグ：オペレーターの複数選択
マウスホイール：作業エリアの拡大、縮小
中クリック：選択したオペレーターの情報を表示
p：選択したノードのプロパティ表示／非表示
u：上の階層へ移動
i：選択したノードの中に入る
h：今の階層の全体を見る

Kinect＋TouchDesignerでインタラクション開発

お試しプログラムとして、手の動きで表示画像が変わるスライドショーを作ってみます。

いきなりやってみよー！

プロジェクトの新規作成

[File]-[New]を選択し、新規プロジェクトを作成します。
TouchDesignerが再起動され、空のプロジェクトが用意されます。

プロジェクトの保存

[File]-[Save As...]を選択し、任意の場所にプロジェクトを保存します。
（デフォルトの保存場所やプロジェクト名はタイトルバーに表示されています）
TouchDesignerは日本語対応ソフトウェアではありません。
予期せぬエラーを回避するため、保存パスやプロジェクト名は半角英数のみとした方がベターです。
ユーザー名に日本語を使っている人は注意。
変えたくない場合は、Dドライブ直下などにTouchDesigner用フォルダを作るといいです。

Inputを配置する

何もないところでダブルクリックし、オペレーターの選択画面を表示します。
オペレーターの種類ごとにタブが分かれており、ここでは[TOP]タブを選択します。
※表示される項目数が少ない場合は、右上の[All]をクリックして展開します。

項目の中から[Movie File In]を選択します。
※オペレーター種別タブの上にある検索バーに入力すると、目的のオペレーターがハイライトされます。

[Movie File In]の選択後、キャンバス上でクリックした場所に配置されます。
プロパティの[Play]->Fileの[+]から、入力する画像をファイル選択可能です。

Outputを配置する

先ほどと同様に、何もないところでダブルクリックし[TOP]タブから今度は[Out]を選択します。

間に処理をはさむのでちょっと離して配置します。

[Out]が実際に出力される映像ということになります。
これで、InputとOutputを配置できました。あとは間にやりたい処理をはさみます。

画像処理をはさむ！

今回はデモなので、超単純な画像処理をはさみましょう！
画像の移動、拡大・縮小を行う画像処理オペレーターを配置していきます。

Input、Outputの時と同じように、今度は上記画像処理を担う[Transform]オペレーターを選択します。

配置したらこんな感じ。

これで [moviefilein1] [transform1] [out1] の3つのオペレーターが揃いました。
いよいよTouchDesignerっぽくノードを繋いでいきます！

[moviefilein1]の右側の[━]をクリックし、ドラッグすると画像のようにラインが伸びます。
これを、[transform1]の左側の[━]までドラッグ＆ドロップすると2つのオペレーターが接続されます。

これを[transform1] [out1]間でも同様に行うと、InputからOutputまでが繋がりました！

Transformオペレーターでは画像の移動、回転、拡大縮小、等々ができます。
プロパティにある項目が出来ること一覧になってます。
ここでは、試しに画像の移動と拡大縮小を試してみましょう。

まず、移動です。プロパティのTranslate欄の数値を変更することで画像が移動します。
2箇所0が入力されていますが、それぞれx方向（水平）、y方向（垂直）を意味しています。
右端の[F▶]を押すとプルダウンメニューが表示されるので、単位をpixelに変えてみます。

右端が[P▶]になり、入力単位がpixelに変わりました。
x方向に500（pixel）を入力すると、図のように500 pixel右に画像が移動したのがわかると思います。

続いて拡大縮小してみます。今後はScale欄に注目します。
2箇所の入力欄は同様にx、y方向のパラメーターで、単位は「倍」（無次元）です。

「x：5」、「y：0.5」と入力しました。
水平方向に5倍、垂直方向に0.5倍された画像が表示されています。

さて、次はいよいよKinectの登場です。
先ほど試した画像の移動や拡大縮小の各パラメーターは手入力した固定値でした。
これをセンサーの入力に連動して動かすことができれば、インタラクションの出来上がりというわけです！

Kinectからの入力に連動して画像を動かす！

Kinectの信号を取り込む

Kinect信号の取り込みは驚くほど簡単です。
これまでと同様に、何もないところでダブルクリックしてオペレーター一覧を表示します。
今度はグリーンの[CHOP]タブ（コントローラーの信号をまとめたようなオペレーター）選択します。
Kinectをクリックして配置します。（検索窓でkinectと入力すると見つけやすいです。）

配置した[Kinect1]を拡大して見てみると、KinectからSDKを経て得られた様々な特徴量が確認できます。
（Kinectの前で体を映してみてください。）

肩や肘、足などの中から必要な特徴量を選びます。
今回は、お試しに卓上で遊びたいので親指の特徴量を選んで使っていきます。

Kinectの信号を選択、レンジ調整する

デモでは、親指の水平方向、奥行方向の特徴量を使って画像の移動、拡大・縮小を実現します。
親指の水平方向の移動と画像の左右移動、親指の奥行方向の移動と画像の拡大・縮小をリンクさせます。

まず、新しい[CHOP]オペレーターを配置します。
selectをクリックして配置します。（検索窓でselectと入力すると見つけやすいです。）

[Kinect1] - [select1] を結線します。

次に、selectオペレーターのプロパティのChannnel Namesを設定します。
[▶]をクリックすると信号の一覧が表示されます。

右手の親指の水平方向の特徴量（≒移動量・位置）を表す[p1/thumb_r:tx]を選択します。

実際にkinectの前で右手の親指を左右に動かし、信号が抽出されていることを確認してください。
左右方向の動きに合わせて -1.0～1.0 のレンジで値が変化すれば正しく認識されています。

次に、親指の特徴量の値のレンジと、transformオペレーターの位置情報のレンジに調整していきます。
新しい[CHOP]オペレーター、mathを選択し配置します。

[select1] - [math1] を結線します。

mathオペレーターのプロパティのRangeを設定します。
Rangeでは入出力のレンジを変換することができます。
p1/thumb_r:tx は -1.0～1.0 のレンジで変化していましたのでFrom Rangeに -1、1 をそれぞれ入力します。
To Rangeには -0.5、0.5 を入力します。（後で説明します。）

transformオペレーターへリンクさせる下準備として[math1]のViewを表示します。
[math1]を選択して右クリック→[View...]をクリックします。

[math1]のViewが表示されます。

以下、右手の親指の奥行き方向の特徴量（≒移動量・位置）を表す[p1/thumb_r:tz]についても同様です。
select、mathオペレーターを使用して信号の選択、調整を行います。
ただし、mathオペレーターのレンジについては[p1/thumb_r:tz]に合わせてFrom Rangeに 0、1 をそれぞれ入力します。
To Rangeには拡大率ですが、ここでは 1、3 を入力します。

Kinectの信号をtransformにリンクさせる

いよいよKinectの信号を使って入力画像を変化させていきます。もう少しで完成です！

[transform1]を選択します。
先ほど触って試したTranslate欄のx方向の数値に親指の水平方向の動きをリンクさせます。
右端の[P▶]を押すとプルダウンメニューが表示されるので、Fractionに戻しておきましょう。（[F▶]に変化します）
[p1/thumb_r:tx]のレンジは -0.5～0.5 に調整しておきましたので、Fractionではこれで左端から右端までの移動を意味します。
[transform1]のプロパティを表示した状態で、[math1]のViewを選択します。
View上でクリックするとカーソルが[→]に変化するので、このまま[transform1]のTranslateのx方向入力欄へドラッグアンドドロップします。

メニューが表示されるので[Export CHOP]を選択します。

成功するとリンクされた入力欄が緑色で表示され、[math1]から[transform1]へ破線の矢印で信号の流れが見られます。
試しに親指を左右に動かしてみましょう。[transform1]と[out1]の画像が動いていると思います。

ここまでくれば、もう残りは簡単だと思います。
最後に、親指の奥行方向の信号[p1/thumb_r:tz]を[transform1]のScaleにリンクさせます。
先ほどと同様に、[transform1]のプロパティを表示した状態で、[math2]のViewを選択します。
[transform1]のScaleのx方向、y方向の入力欄へ順番にドラッグアンドドロップします。

これが最終的なプロジェクトの様子です。[math1]、[math2]からそれぞれ[transform1]へ信号がリンクされました。

[math1]、[math2]のViewは不要なので[x]で消します。

それでは、F1キーを押してプロジェクトを実行してみましょう！
（「F1キーで実行？？」と思われるかもしれませんが割愛☆）

いかがでしょう？巨大なバナナが右親指に合わせて動いていますか？！

まとめ

KinectとTouchDesignerを使って、簡単なインタラクション作品を作ってみました。
ね、簡単でしょ？（ホントに簡単だったことを祈ります）
まずは今回のような小規模のプロジェクトで慣れていきましょう。
小規模ですが、mathを使ったレンジ調整の具合や、使用するkinectの特徴量、他の画像処理へのリンクなど、
自分で試しながら、応用しながら色々お勉強できるネタかと思います。

作ったプロジェクトを実行させる方法については諸先輩方がまとめられております。
フルスクリーン化、マウスカーソル非表示、起動時実行などなど設定があります。
－「TouchDesignerで起動時自動的にフルスクリーンで実行する」
－　http://qiita.com/oishihiroaki/items/aa63a05e1158319170a7

それでは私ももっと勉強していきたいと思います。いつか何か作って発表したーい！

最後まで読んでいただきありがとうございました。
ご指摘、ご質問お気軽にどうぞです。

お　わ　り