TrailSopを用いた派手な映像制作方法

#はじめに
初めまして。
関西を中心にDJ/VJユニット「∀RroWs」のTrack & Visual MakerのTomoyaです。VJをする際はよくTouchDesignerを用いて映像制作やシステム構築を行っています。
今回は、2018/12/15に行われた関西TouchDesigner忘年会で∀RroWsの新曲「Burst!」を披露しましたので、その映像で多用したTrailSopを用いた派手な映像の作り方を紹介したいと思います。特に、この映像で最初に出てくるパターンが分かりやすく、応用がきくため今回紹介します。

こちらがその映像 ∀RroWs「Burst!」(画像クリックでYouTubeへ)
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/vuo_gRyjwdQ/0.jpg)](http://www.youtube.com/watch?v=vuo_gRyjwdQ)

こういうドラムンベースなど激しい曲には派手な映像が合いますが、TouchDesignerで作るなら、代表的には①GeometryInstance, ②Particleなどを用いる方法があります。
今回はBoxSopをベースにParticleを発生させ、TrailSopで軌跡を線にした映像を作ってみます。
#Step0 全体像
![1.JPG](https://qiita-image-store.s3.amazonaws.com/0/311653/e3e70ee8-1ea1-1dd5-8f3e-3102b8697316.jpeg)
このようなたくさんの線が動くような映像を作りますが、比較的少ないオペレータで作成できます。
上記YouTube映像のはじめの20秒程度で実際に使っています。
#Step1 Particleの準備
①**BoxSop**を用意します。パラメータを初期値から変更したところのみ表示していますが、Divisionsの左のチェックボックスにチェックを入れ、Divisionsにそれぞれ*10*を入力します。これで格子状のBoxができます。
![2.JPG](https://qiita-image-store.s3.amazonaws.com/0/311653/b0d782cf-155a-131b-4d89-e876b2ad117b.jpeg)
次に**TransformSop**をつなぎ、Uniformで大きさを*3*と*10*に交互に切り替わるようにChopをアサインしています。こうすると、サイズが変わり、引きと近づいたような映像を交互に表示することができます。
詳しくはlfoChopで*0*にから*1*に変化するようにして、mathChopでIntegerをRoundにして*0*,*1*が切り替わるようにし、さらにmathChopでRangeを*0*,*1*から*3*,*10*にして*3*,*10*が切り替わるようにnullChopからTransformSopのUniformにExportしています。切り替わるスピードはlfoChopのFrequencyで*0.08*などにして調整します。
![3.JPG](https://qiita-image-store.s3.amazonaws.com/0/311653/05fe831c-a694-34ec-6a2f-2eb55f488b20.jpeg)
#Step2 Particleの生成
次にTransformSopの後に**sortSop**をつなぎます。Point SortをRandomに設定します。これで次につなぐParticleがランダムな順でBoxの頂点から生成されるようになります(あえてRandom以外にするのも面白いので試してみてください)。
![4.JPG](https://qiita-image-store.s3.amazonaws.com/0/311653/4a9ed022-2174-df70-9878-5b96958b9141.jpeg)
SortSopの後に**particleSop**をつなぎます。ここでは、Time Incを*0.0166*にしています。
#Step3 trailSop, linethickSopの追加
ここでメインの**trailSop**, **linethickSop**をparticleSopの後に続けてつなぎます。
trailSopでは画像のように設定します。これで線が現れます。
![5.JPG](https://qiita-image-store.s3.amazonaws.com/0/311653/098b0d95-4145-6579-377f-7147f2c2823e.jpeg)
しかし、まだ細く、太くするためにlinethickSopで、以下のように設定します。
![6.JPG](https://qiita-image-store.s3.amazonaws.com/0/311653/1e0aadd6-fc09-00f8-4cb3-857dc8dfe26c.jpeg)
これでlinethickSopで線が太くなったと思います。形も先が細く、後ろは太くしてみました。

さらに動きを付けたいので、**TransformSop**をつないで回転させます。ここでは、lfoChopで*0*から*1*に変化させ、mathChopでmultiplyを*360*にして*0*から*360*まで変化させるようにしてnullでtransformのRotateにそれぞれExportしています。
![7.JPG](https://qiita-image-store.s3.amazonaws.com/0/311653/9177e26c-83d8-bfa4-4be2-bfba3ae57fcd.jpeg)
#Step4　レンダリング, 色付け
次に定番の**geometryComp**, **lightComp**, **cameraComp**, **renderTop**を用いて3Dを2Dにレンダリングします。
ここでgeometryに色付けをするため、**phongMat**をgeometryCompにアサインします。色をカラフルにするため、**noiseTop**を用意して、phongTopのEnvironment Mapに割り当てます。
これで全体にnoiseTopの色が反映されます。noiseTopで色のバランスは調整して下さい。
![8.JPG](https://qiita-image-store.s3.amazonaws.com/0/311653/beb6fba7-9f58-2ab4-a0f3-753073774e92.jpeg)

これで基本的には、映像はできたかと思いますが、応用して、元のboxSopをsphereSop, tubeSop, gridSopなどに変えたり、追加でtwistSopを入れたりするとさらに変化します。これを基本をパラメータを変えるといろんなパターンができますので試していただければと思います。
#終わりに
上記の映像では、パターンを変えていき、エフェクト処理も加えています。実際にVJを行ったPerformModeのUI画面はこんな感じでした。またVJシステム構築などの記事も書いて行ければと思います。
![48355636_1075825252587466_623202039572201472_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/311653/c1dad159-1bcb-a99d-c26b-9a0ff6c163dd.jpeg)

**＜制作環境＞**
　TouchDesigner099 COMMERCIAL 64-Bit Build 2018.42310
　CPU Corei7 8700K
　GPU Geforce GTX 1080Ti

**＜∀RroWs＞**
　[HomePage](https://www.arrowsofficial.com/)