TouchDesignerサウンド超入門byエフェクタミニハッカソン

# TouchDesignerサウンド超入門

2017-09-09に行われた
[「TouchDesigner超入門」「第18回エフェクターミニハッカソン」](https://effectorhack.connpass.com/event/66454/)
という黙々会の備忘録です。

##TouchDesignerの音よりの話の紹介

- オーディオの扱い
- オーディオ解析結果の扱い
- MIDIデバイスとつないでの操作
- GLSLをオーディオでコントロール

をさらっと紹介。

##対象者

- ダウンロードだけはとりあえずしてきた人
- 触って３日目、１週間目くらい
- 音の入力を使ってみたい
- 他の[VJツール](https://imimot.com/cogevj/)とかで音と映像の何か表現したことあるけどTD初めて
- AfterEffectsは使えるけどインタラクティブな表現でTD使ってみたい
- Unityと連動させてみたい


#まずTouchDesignerおさらい

[derivativeのサイト](https://www.derivative.ca/)　　←　ここからダウンロードできます。

VFXで使われるHoudiniの分家ソフトなので、Houdiniの思想も少しわかるかも。
TouchDsignerはリアルタイムで外部ハードとの連携がとても簡単に実現できるツール。
ノードベース、プロシージャル、スクリプト制御(Python)などいろいろ面白そうなものが宝箱のようにいっぱいつまってます。

#オペレータの種類を知る

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/f368bb87-bfa0-67f1-d9f9-62cc5181276d.png)
なにもないところをダブルクリックすると

OP Create Dialog
がでる。

TouchDesignerはネットワークビューでこのOP（オペレータ）を
繋ぐことでプログラムする。

- TOP (T)exsture OP 紫色
テクスチャオペレータで、２次元の画像サイズとRGBAといったチャンネルを持つもの。

- CHOP (C)han OP　緑色
チャンネルのみのOP

例えば、オーディオ入出力はCHOP
ビデオの入出力はTOP

といった感じ。

## ネットワーク全体をみたくなったらHキーを押す
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/696b6144-08c7-da71-a150-5adc9b5f1230.png)

綺麗に全体を見渡せるので、迷ったらHキーを押して見る。

#ビデオ入力
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/c1eeb89e-2fbd-433a-61ba-e901d1f948a8.png)

video device in (TOP)を作って
起動時のdisplace1の上の入力に繋げば、
歪む画像をビデオ入力にできる。

ライブ映像とかにエフェクトかけたくなったらこれで。

## ネットワークビューの背景に結果表示
displace1の右下の青い●（選択してDキー）で背景に大きく表示できる。

## 別ウィンドウで表示
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/8d8ebfd1-320d-f6aa-0fd1-d2a29aa165da.png)

右クリックして　コンテキストメニューから View... を選ぶとウィンドウ表示もできる。
（２画面あるならこっちが便利）

## パラメータもウィンドウ表示
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/ce71b79a-3382-098d-91ee-639c2be9bcdc.png)

Pキーを押すと、パラメータの表示をトグルで表示・非表示できるけど、
右クリックして　コンテキストメニューから Parameters... を選ぶとウィンドウ表示もできる。

# とにかくオーディオに反応させる

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/3ca809c0-2109-36b2-d640-c763d019aa5a.png)

audiofilein1でオーディオファイルの再生ができる

## 音を出す
audiodevout1を繋ぐと音が出せる

## 音を止める

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/e9d17e6b-2787-dfdf-64be-c03d1e744bdd.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/7aa188c3-0462-e32c-5928-23f138563868.png)

audiofilein1をバイパスすると
音が止められる


## auidospect1でスペクトラム(FFTの解析）ができる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/aad1dc9d-8b07-d38e-09bd-3e8a8a425819.png)

### FFTサイズを
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/a72292b2-9dd3-6160-9a0a-bfb2acde3598.png)

- 小さくすると　反応がよくなる　（周波数の分解能は落ちる）
- 大きくすると　周波数の分解能が上がる　（反応が緩慢になる）

これらはトレードオフ　用途によって変更する。

## スペクトラムの結果の見た目調整

### Frequency <-> Logarithmic Scalingをほんのちょっと下げる
と　
いわゆるイコライザー表示みたいな表示にできる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/08621165-aaf9-90eb-1ae6-ac4730568a26.png)

FFTの結果そのものは1の時の表示だが基本的に低音の部分の情報が幅をとりすぎる傾向があるので
見た目にこだわる場合はここをいじると良い。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/78af0cd5-b62c-9e73-539e-15bea5181f91.png)

### High Frequency Boost
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/5db39f3d-8740-9988-564f-5d455046f537.png)

FFTの結果は低いバンドの出力が大きく出る傾向がある。（高い周波数は低音の上にのる小さい成分）なので、
高い方の反応をよくしたい場合このブーストを使うと良い。


# 画像を切り替える

ビデオ入力とムービーを切り替える

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/00e6eb0c-2b49-32f2-dbe4-5066ebe00683.png)

##switch1で切り替える

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/7ffbbb47-474c-e7fc-d64b-a61492f65b55.png)

InputOPに複数TOP（テクスチャOP)を繋いで
Indexで切り替える。 
ここではビデオ入力とムービーの入力（蛾のようなもの）と切り替え）

Blend between InputsをONにすると小数点以下がブレンド（まざる）

##パソコンのキーボードで切り替える

![key.gif](https://qiita-image-store.s3.amazonaws.com/0/96808/1349f239-e31f-56c6-2fd6-f8ddd82dafd7.gif)


![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/5a2b9ba5-4bd1-f042-cba6-bf46076281c9.png)

keybordin1の＋を押して kxチャンネルを　switch1のindexへドロップ
Export CHOPを選ぶと

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/2fb12fd7-68c2-d0b8-36b2-ff7580949bc6.png)

switch1のindexの項目が緑になって、keybbordin1:kxを参照する。
keybordin1のFirst Keyパラメータで　どのキーボードのキーかを切り替えられる（この設定ではXキー）

#MIDIでコントロール

上で紹介したコンピューターのキーボードでも切り替えできるけど、アプリケーションを手前にしていないと反応しないのですが、

USBなどのMIDIコントローラーを使って操作できるようにすると、アプリが裏側にまわっても反応してくれます。

##MIDIデバイスのセットアップ

まず、どのMIDI機器を扱うかの設定をします。

DialogsメニューからMIDI Device Mapperを選ぶ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/43fcea5d-d89a-b705-b8ed-2803fe1e4100.png)

MIDI Mapperで　Create New Mappingボタンを押して、
接続しているMIDIコントローラを選ぶ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/5b07c388-458f-0285-324e-2380ddc14292.png)

これで、TouchDesignerでMIDIを受け取る準備ができます。

##MIDIノート番号で切り替える

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/d2836718-730d-f0ca-8135-d020a2edb610.png)

##midi　device in（CHOP)を使う

midiin1の+を押して、switch1のindexへドロップし、Export CHOPであとは鍵盤なり押すと
パラメータを変えられる。


##midi device in (DAT)を使う

上で紹介した方法だと、例えば鍵盤のベロシティーを取るとかいったことができません。
（やるとしたら、鍵盤の数だけselectorを用意するとか大変なことになりがち）
こういう大量のボタンやコントローラを持つデバイスはスクリプトで前処理をしてあげると扱いやすくなります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/96424745-6718-0253-3c22-8fd1adc7f2d5.png)

同じことをpythonスクリプトでやってみると以下のような感じ

```
def onReceiveMIDI(dat, rowIndex, message, channel, index, value, input, bytes):
 	op('switch1').par.index = (index/127)
 	print(index)
 	return
```
これの意味は
MIDIの信号を受信した時に、
オペレータの「switch1」にある　パラメータ名がindexの項目に
indexを127で割った値を入力する。

これで、ノート番号が0.0~1.0に割り当てられるので、
鍵盤の演奏した音程に応じて画面のブレンド比率が変わるといったものになります。

## スクリプトの編集Tips

###レイアウトを縦２分割して

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/98d9a50b-4eac-6ace-bca9-7fcff7addacf.png)

### Textport and DATsにして

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/1597c770-6173-368a-e945-3518bb681cc8.png)

### 右クリックメニューからEdit Contents...　を選ぶと
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/c201ec34-1445-3a66-382d-1136a85e5847.png)

右側にエディタがでてくる

##pythonのprintの出力を見るには

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/51d0fd9e-dee2-873b-1ec1-a2d12755e3e7.png)

##Textportを選ぶと

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/5c831789-62c6-dc79-02d9-731095c06031.png)

さっきのスクリプトのprintの内容（MIDIノート番号)が確認できる。
（ノートオンとノートオフの２つがでているのがわかる）

# バスドラとかスネアとかのタイミングを調べる

すでにある部品を再利用するのがお手軽です。
パレットにはさまざまな使えるネットワークが用意されています。
ここを掘ってみるのも何か見つけられるかもしれません。

ここでは、オーディオ解析のものを紹介。

## Tools>audioAnalysisを使う

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/b06d7abd-54f4-5f5b-3c64-e27c526a5383.png)

周波数のHI,Mid,Lowなどの解析と、スネア バスドラとかのディテクションができる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/a9dc9dc1-625d-5ab5-d770-4ac504d60646.png)

ここでは、
null CHOPをつないで　select CHOPで取り出し
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/a413a553-1421-0313-1e4d-23cfc4e0e194.png)

math CHOPでRangeで倍率を変更し、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/f531f3d0-035a-3d90-7418-645f952cf30a.png)

trailで幅を持たせ、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/19ec782c-8b33-2e09-37bf-4b048938c037.png)

chop toでdisplace(TOP)へわたして　画面を歪ませている。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/dc8a2126-1d95-93d6-282c-7299bb16141d.png)

chop toは  CHOPをTOPに変換する偉いやつ
Data FormatをLegacyにするのがポイント
trailのwlengthパラメータで　Time Slice（過去の履歴をもつ配列（テクスチャ））になる。

#[おまけ]GLSLを使う

市松模様を簡単に出すものが見つからなかったので、GLSLで数行書けばできるのではとやってみたもの

とりあえず、GLSL市松模様でググると

参考サイト　[【GLSL】市松模様](　http://30min-processing.hatenablog.com/entry/2017/04/01/000000)

があったので、参考にTouchDsignerに移植

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/0be53a2c-0214-5255-7f78-3af9774f1635.png)

``` 
uniform vec4 my1;
uniform vec4 my2;

out vec4 fragColor;
void main()
{
      vec2 pos;
      pos.x = gl_FragCoord.x * my2.x;  
      pos.y = gl_FragCoord.y * my2.y;  
      vec3 color = vec3(abs(step(0.5, fract(pos.x)) - step(0.5, fract(pos.y))));  
      fragColor = vec4(color * my1.xyz*0.5, 1);
      //fragColor = vec4(color, 1);

}

```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/e4fdeaa3-9b2f-6595-ffcf-e70a111bf57f.png)

この　uniform vec4　my1;
とかはGLSL　TOPのVectorsから値をとってShaderの入力にできる。

ここでは色と比率を変えたりしてみた。

gl_FragCoordてのが座標で、
色を決めるときに いろいろやってる。（最初のcolorは白黒の値）
それにmy1のxyz(意味的にはrgb)を掛け合わせて
fragColorというのに出力するとテクスチャが得られる。

参考サイト：[GLSLについてのメモ](http://qiita.com/edo_m18/items/71f6064f3355be7e4f45)


![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/3f7cccd3-d3e6-e1be-7406-bdcb20f14a9e.png)

これで、GLSLにオーディオの入力でスペクトラムの変化を与えつつとかいろんなことができる。

#まとめ
TouchDesinger面白い
神ツール
もうすぐ日本語の書籍も発売するので、さらに盛り上がりそう。

Houdiniはゲーム制作のVFXとかの現場では使われているコンバータやプロシージャル的なものを扱えるけど、
TouchDesignerはリアルタイムにしてVJしちゃうところがすごい。

Max/mspとかでもできるけど、TouchDesignerの方が覚える項目が少なくてできることが多い気がします。（よりデザイナー向け）

ちょっとした機能のパラメータが心地よいものが用意されていたりするので、
一見の価値ありです。
慣れてくると、すぐに結果が得られるので、めっちゃ楽しいです。

（やれることも多く、最初はちょっと覚えること多いので大変ですが、これでも整理されている方だとおもいます。）

# おまけ　勉強方法

- 黙々会に参加する
とにかく触る機会を作る。

- 動画を探して　最初は写経する。
最初は時間をかけてゆっくり、丁寧に、何度も見直すと良い。
そのうち慣れてくると必要な部分だけシークして見るようになるので時間短縮できるようになる。

- Operator Snippetsを一通り触る
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/46bfab41-b616-52c8-1893-044ca8b03480.png)
メニュー選んでから表示するまでに時間かかるので少し待つ。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/bdc9e0e7-dcb4-588a-f93c-38bb05bd6e78.png)
左下のところに説明とかあるのでみて見る。

- ヘルプを見る

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/0bc44177-6713-bcc4-e6b0-f962556ae9d7.png)
英語だったり、サンプルなくてちょっとわかりにくいけど、何か見つかるかも。

ここで説明している使い方はプログラマよりの話が多いですが、
デザイナーさんなら、
素材側で対処とかいろいろ解決方法はあるかと思います。
Compositだけ使うとか一部の機能を使うだけでも十分で、
ムービーはAfterEffectsで作り込んでおくとかでもよかったりと、使い方は人によって変わると思います。

TouchDesignerで前処理してUnityへ送る例：
Unity単体では簡単にはできない、複数カメラ入力や複数オーディオの影響を与えたリアルタイムエフェクト表現した　TOP（テクスチャ）をUnityのレンダリングイメージ(テクスチャー）へ送り、Unityで得意な物理演算やモデルモーション操作やキャラクタAI、シネマシーンカメラ制御などと組み合わせた新しい表現とか。
[TCPSpout + KlakSpout で Unity ソフト間動画転送](http://izmiz.hateblo.jp/entry/2017/08/26/213246)

逆にUnityからTouchDesignerへ送ってリアルタイムPostprocessingとかもありかも。

とにかく、かっこいい、インタラクティブ＆プロシージャルな映像を作るなら、TouchDesignerおすすめです。（触って損はない）