TouchDesigner 使いはじめた頃知りたかったことTips

<br>
# はじめに
こんにちは、なるみんです。
私がTouchDesignerをはじめてから慣れてきた頃に知ったこと、知りたかったことを8個ほどまとめてみました。
少し量が多いのでひとつひとつ着目したい箇所以外の実装方法は割愛しています。TouchDesignerの使い方がなんとなくわかってきた！あたりのユーザー向けだと思います。

toeファイルは<a href="https://drive.google.com/file/d/1vU6SIJpClDFpker8ckY1cyDbFuejMOPO/view?usp=sharing">こちら</a>で公開しました。

## 紹介する内容
     1. TOPを全画面表示する方法
     2. パーティクルに任意のテクスチャを載せる方法
     3. Expression CHOPの使い方
     4. カメラワーク
     5. インスタンス
     6. Touch In/Touch Out TOPの使い方
     7. Fan CHOPの使い方
     8. Inside TOPの使い方
     [tips] Macでtoeファイルを複数開く方法 


### TOPを全画面表示する方法
<img width="1154" alt="window.png" src="https://qiita-image-store.s3.amazonaws.com/0/160720/0281955f-29ec-fd22-c06c-51029750aa9b.png">
任意のTOPを全画面表示させる方法です。
Window COMP->Window-> Operator に全画面表示したいTOPの名前を指定する、もしくはWindow COMPにTOPをドラッグ&ドロップして参照させます。
Window->Monitorの値が0の時PCの画面に全画面表示されます。値が1以上の時にプロジェクターなどの外部出力で全画面表示されます。
Window->OpeningSizeをFull Location、BordersをOffにします。
Window->Open as Separate Windowだと別ウィンドウ、Open as Perform Windowでパフォームモードで全画面表示でTOPが出力されます。
<br>

### パーティクルに任意のテクスチャを載せる方法
<img width="1153" alt="particle.png" src="https://qiita-image-store.s3.amazonaws.com/0/160720/966154b0-9839-38a0-cc49-bf9703c97562.png">
Point SOP: Particle->Add Scale
Scaleに適当な値(例では5)を与えます。
Particle SOP: State->Particle Type->Render as Point Sprites
Point Sprite MAT: Point Sprite->Color Mapにパーティクル上に載せたいテクスチャのTOPを参照させます。
Point Sprite->Constant Point Scaleを0より大きい値にします。
Geometry COMP: Render->MaterialにPoint Sprite MATを参照させます。
<br>
### Expression CHOPの使い方
<img width="962" alt="expression.png" src="https://qiita-image-store.s3.amazonaws.com/0/160720/e1a71cb7-50d8-9211-d91c-148d6de7524f.png">
CHOPの値に対して真偽判定ができます。
任意に値を持つCHOPにExpression CHOPをつなぎます。
Expr->Expression1にカーソルを当てると左に＋が表示されます。そのままクリックするとexpr0というパラメータが現れるので、ここに条件式を書きます。真の場合Expression CHOPのchan1の値が1になり、偽の場合は値が0になります。
<br>
### カメラワーク
<img width="1279" alt="camera1.png" src="https://qiita-image-store.s3.amazonaws.com/0/160720/952556ea-8a89-f1be-b0fb-3d7c6becd26b.png">
<br>
<img width="1280" alt="camera.png" src="https://qiita-image-store.s3.amazonaws.com/0/160720/05e5847c-f531-0ea8-3708-3d410857109d.png">
(Alt+3で↑Geometry Viewerを見ることができます)

Camera COMPを任意の軌道に乗せることができます。
ここではBox SOPの周りで円軌道上を回るカメラワークを実装します。
任意のSOPをGeometry COMP, Camera COMP, Light COMP, Render TOPでレンダリングします。
Camera COMP->Xform->Path SOPにカメラの軌道となるSOPを参照させます。
Xform->Positionの値を変化させることで、指定したSOPの軌道上をカメラが動きます。
また、Xform->Look AtにNull COMPを参照させることで、Null COMPのTranslateの位置を向き続けるカメラを実現できます。
<br>
### インスタンス
<img width="1152" alt="instance.png" src="https://qiita-image-store.s3.amazonaws.com/0/160720/a55e5a7a-d1c4-3df2-28c1-87b26f96ad63.png">
SOPを複数生成し任意の場所に設置することができます。
複製したいSOPをGeometry COMPで作ります。
Geometry->Instance->Instancing->On
Instance->Instance CHOP/DATに複製したい個数分の値を持ったCHOPもしくはDATを参照させます。
今回は3*3*3計27頂点を持つBox SOPの頂点の値をSOP to CHOPで取り出し、参照させました。
<br>
### Touch In/Touch Out TOPの使い方
<img width="1105" alt="touchinout.png" src="https://qiita-image-store.s3.amazonaws.com/0/160720/2cdf2166-3c2d-bed5-1a26-965dc67d258b.png">
Touch Out TOPに接続されたTOPを別PCのTouch In TOPにIPアドレスを指定することで送ることができます。
送信側: Touch Out TOP->Network Portに任意のポート番号を指定します。
Video Codec->Uncompressedにすることで圧縮しない状態のTOPを送ることができます。
受信側: Touch In TOP->Touch In TOP->Computer Name / IPに送信側PCのIPアドレスを指定し、Network Portに送信側で指定したポート番号を指定します。
<br>
### Fan CHOPの使い方
<img width="1151" alt="fan.png" src="https://qiita-image-store.s3.amazonaws.com/0/160720/191e38d6-46ce-c151-aecb-93bcd9376e33.png">
トリガーとなるCHOPを統合したMerge CHOPからトリガーを受け取ったチャンネルの値のみを取り出すことができます。
Fan CHOP->Fan->Operation->Fan In
Fan CHOPの値をSwitchに参照させることで任意のトリガーを受け取った時に起こるイベントを作ることができます。
<br>
### Inside TOPの使い方
<img width="1143" alt="inside.png" src="https://qiita-image-store.s3.amazonaws.com/0/160720/e139a684-d101-114b-9b99-9015a40d490e.png">
Inside TOPを使うことで任意のTOPの形状に合わせてTOPを切り取ることができます。
Inside TOPのinput0に元画像を、input1に切り取りたい型となるTOPを入力します。
画像のように縁をぼかした四角形をinput1に入力することで周りがぼやけた画像を作ることなどができます。
<br>

### [Tips]  Macでtoeファイルを複数開く方法
Macではtoeファイルを複数開くことができません。
しかし、メニューバー->Help->Operator Snippetsを起動することでオペレータのExampleがまとまったtoeファイルを開くことができるので、ここからメニューバー->File->NewもしくはOpenからtoeファイルを別ウィンドウで開くことができます。


##最後に

私もメンバーのひとりとして日々メディアアート系の制作活動に励んでいるチーム Reflect Initial（リフレクトイニシャル） を紹介したいと思います。
私たちはTouchDesignerなどを使ってインタラクティブなメディアアートコンテンツを制作し、地域のイベントや幼稚園での展示を行ったり、制作展を開催したりといった活動をしています。
今後も様々な場面で作品を制作し、発表していきたいと思っていますので制作依頼やイベントや共同制作のお誘い等お声がけしていただけたら嬉しいです！
<br>
▽Reflect Initialの情報はこちらから！
Website: http://reflectinitial.tokyo
Twitter: https://twitter.com/reflect_toe
<br>
拙い文章ではありましたが、この記事がTouchDesignerをはじめた方の力に少しでもなれたらいいなと思います！
ユーザーの皆さん、もし表現が間違っていたりもっと簡単に実装できる方法があったりしたら教えていただけたら嬉しいです。
TouchDesigner Advent Calendar 2017の記事の更新毎日楽しみにしています。佐野さん(@sanokazuya0306)素晴らしい企画ありがとうございました。アドベントカレンダーに公開された皆さんの記事でしっかり勉強して、これからも制作頑張っていきたいと思います。
<br>