TouchDesignerで音に反応させてパーティクルを吹き出す

こちらは[TouchDesigner Advent Calendar 2018](https://qiita.com/advent-calendar/2018/touchdesigner) 12/2の記事です。

こんにちは。先日人生初の電子工作をしました。
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.amazonaws.com/0/309368/e8001aeb-42bd-e0f4-c948-efa177543c9c.gif)
ツイートしたらートンピーちゃんが鳴ります。
背景にエフェクトをつけたいと思い、TouchDesignerで作ってみました。


#トンピーちゃんの音に反応してパーティクルが吹き出る
今回の記事はほぼTouchDesigner Study Weekendワークショップで教えて頂いた事の詰め合わせです..！
が、自身の復習も兼ね書かせて頂きます。間違ってる点等あればご指摘下さいますと幸いです:bow:

<全体図>
![スクリーンショット 2018-12-02 8.43.29.png](https://qiita-image-store.s3.amazonaws.com/0/309368/cadcca09-4832-cecf-7643-07f65d6c7cfb.png)

##１.Audio入力
PCのマイクで音を拾いました。
<構成図>
![スクリーンショット 2018-12-02 8.53.35.png](https://qiita-image-store.s3.amazonaws.com/0/309368/39241e67-7442-e57f-342b-c27183b4348e.png)
各オペレータの変更箇所は下記です。（全てCHOP）

| オペレータの名称 | 機能                                  | いじる箇所                                     |
|------------------|---------------------------------------|------------------------------------------------|
| Audio Device In  | 音の入力                              | -<br>デフォルトでPCマイク入力と繋がる          |
| Audio Device Out | 音を出力                              | -<br>繋ぐとPCから音が聞こえる                  |
| Analyze          | 音を解析                              | Analyze▶︎Function▶︎ Maximum 音の最大周波数を出力 |
| Trail            | 値の変化をグラフで表示                | -<br>値の変化を視覚的に捉えるために繋ぐ        |
| Trigger          | 閾値の設定<br>ある値を超えると1を返す | Trigger▶︎Trigger Threhold▶︎0.05 閾値の設定       |
| Math             | 数値計算                              | Multi-add▶︎Multiply:20 音が小さいので乗算       |
| Null             | 特別な機能はなし                      | -<br>変更しやすくするために入れる 
             |
##２.Particle
教えて頂いたカラフルなパーティクルがスーパー可愛かったのでその復習をば
<img width="1151" alt="スクリーンショット 2018-12-02 8.38.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/309368/0f1fc3ce-bf7a-80b9-00aa-226ae8834e4a.png">
<構成図>
![スクリーンショット 2018-12-02 8.55.55.png](https://qiita-image-store.s3.amazonaws.com/0/309368/64a58a38-2aae-661a-a9db-bb8683e046df.png)
###2-1.パーティクルの設定部分
（全てSOP）

| オペレータの名称 | 機能               | いじる箇所                                                                                                                                                     |
|------------------|--------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Sphere           | 球体オブジェクト   | Sphere▶︎Primitive Type▶︎Polygon 図形の分割向きを変更 <br>Sphere▶︎Frequency▶︎2 分割数を指定                                                                         |
| Sort             | 配列をソート       | Point▶︎Point Sort▶︎Random 頂点の配列をランダム にする <br>Point▶︎Seed▶︎ 2                                                                                          |
| Particle         | パーティクルを生成 | State▶︎Particle Type▶︎Render as Point Sprites<br>Forces▶︎Wind▶︎Y:3 <br>Paticles▶︎birth▶︎op('null5')['chan1'] と書く<br>Audioからの周波数によってパーティクルを生成 |
| Null             |                    |                                                                                                                                                                |

###2-2.ランダムカラーにする設定の部分

| オペレータの名称 | 機能                   | いじる箇所                                                                            |
|------------------|------------------------|---------------------------------------------------------------------------------------|
| LFO[CHOP]        | 波の生成               | Amplitude:360 色のマップに使用するので1~360                                           |
| Null[CHOP]       |                        |                                                                                       |
| Constant[TOP]    | 単色画像の生成         | Constanc▶︎Color 自分の好きな色にする                                                   |
| HSV Adjust[TOP]  | HSV値を操作            | HSV▶︎Hue Offset▶︎Nullを参照させる                                                       |
| Texture 3D[TOP]  | テクスチャアレイを生成 | Cache▶︎Type▶︎2D texture<br>Cache▶︎Cashe size▶︎48 array 色マップのキャッシュを作る（48個） |
| Constant[MAT]    | 一色のマテリアルを生成 | Constant▶︎Color Map▶︎Texture3Dを参照させる                                              |

###2-3.パーティクル各頂点とカラー値を配列に格納
（全てCHOP）

| オペレータの名称 | 機能                                  | いじる箇所                                                                                                                                                                  |
|------------------|---------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| SOP to           | SOPの頂点の座標などをCHOPデータに変換 | -<br>パーティクルの各座標を取り出す                                                                                                                                         |
| Pattern          | 周期的な定数を生成                    | Pattern▶︎Type▶︎Ramp Pattern▶︎length▶︎op("sopto1").numSamplesと書く パーティクル頂点数を参照<br>Pattern▶Ampliture▶︎op('tex3d1').par.cachesize-1 と書く 色マップのキャッシュを参照 |
| Merge            | ２つをまとめる                        | -<br>パーティクル各頂点とカラー値を対応させた                                                                                                                               |

###2-4.Geometryへの参照

| オペレータの名称   | 機能             | いじる箇所                                                                                                                |
|--------------------|------------------|---------------------------------------------------------------------------------------------------------------------------|
| Sphere[SOP]             | 球体オブジェクト | -<br>Geometryに繋ぐ                                                                                                       |
| In (Geometryの中)  | 入力             | -<br>Geometryの中に入ってtorusを削除しInとOutを置く                                                                       |
| Out (Geometryの中) | 出力             | -                                                                                                                         |
| Geometry[COMP]           | SOPを入れる箱    | Instance▶︎Instance CHOP▶︎mergeを参照させる<br>TX,TY,TZ▶︎tz,ty,tzと書く<br>Instance2▶︎W▶︎wと書く 各頂点にカラーが割り当てられる |
そしてCamera、Light、Render、Nullをそのまま繋げば完成です。

#結果
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.amazonaws.com/0/309368/f9643584-8460-6453-a73e-e0fb024c2ffa.gif)
吹き出たーーーー！嬉しい！！:sob:

###おしまい
まだとても未熟者ですが、かっこいい演出が作れるよう毎日ちょっとずつ触っていこうと思います。
そしてTouchDesigner Study Weekendいつもありがとうございます。
これからTouchDesigner触ってみようとしていらっしゃる方はとてもオススメなので是非ワークショップ参加してみて下さい！

[TouchDesigner Study Weekend](https://tdsw.peatix.com/)