VJシステム事例

# はじめに
こんにちは。しゃんぺんです。  
趣味でTouchDesignerをやっています。  

この記事は、TouchDesigner Advent Calendar 2023 兼 ジェネ系VJ Advent Calendar 2023 の記事です。

本記事では、私が普段使っているVJシステムの概要について記述します。  
対象の読者は以下のような方です。  

- TouchDesignerが面白くてチュートリアルをやっている
- VJにも興味があるけれど、どうすればよいか分からない

プロ向けでは無いです！  
プロの方はアドバイス頂けると嬉しいです！

# 神資料
1. 比嘉先生
私がTDを始めたときに比嘉さんが「HEXPIXELSのライブで使ったVJシステム」を以下で公開してくれていました。  
http://satoruhiga.com/TDWS2018/summer-holiday/
※比嘉さんから新しいリンク先を教えて頂きました！！必見！！！！！

※初めてHEXPIXELSのライブを観たのがWWWで行われたDUB Russellさんとのライブで、凄すぎて最前列でひっくり返ってました。  
※※そのシステムが無造作に置いてあってもう一度ひっくり返りました。  

2. joe先生
自分のシステムとは関連していないのですが、JoeさんがVJ用システムのリポジトリを公開してくれています。  絶対勉強になるやつです。  
https://github.com/Joe0hara/poisson-vj

# サンプル
日頃使っているやつの簡易版を作りました。  
https://github.com/thinpedelica/tdvj

# 自分の環境
## どこでVJしているか
たまにライブでVJしたりもしますが、普段は渋谷TANGLEというミュージックバーで、毎月末水曜日にVJをしています。  
DJ、マシンライブ、モジュラー、ギター弾きまくりなど、毎月いろいろやります。  
なので映像もその日のためにというよりは、日々いろいろ作っているものを当日その場で混ぜてプレイしています。  

今回の解説は、このような作りためた映像(aka チュートリアルで作ったもの)を組み合わせるようなシステムの説明になります。  

# VJシステムについて
## 全体構成
構成としては4つのレイヤをコンポジットするようになっています。  
- レイヤ1: デカ文字(イベントによって変えたり足したりする)
- レイヤ2: 生カメラベースの映像
- レイヤ3: ジェネの絵
- レイヤ4: ジェネの絵

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880453/6b02c736-0f8a-0c26-bedc-2a9baed6ca60.png)

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880453/c807e3c5-6ead-ff68-833a-178a4f963144.png)

それぞれの仕組みを説明していきます。

## 絵を作るところ
1つのBaseCompにつき1種類の絵が出力される感じです。  
こちらは一番BaseCompが多いレイヤ3。

![img2_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880453/2236e7fa-f07d-f0e9-3c1d-efb6b0121ca0.png)


各コンポーネントの出力は、ボタンのOn/Offで真っ黒のTopとSwitchするようになっています。  

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880453/ee03436f-8494-456d-ffee-a77a95c4613e.png)

黒Topが選ばれているときは、BaseCompの出力結果は参照されないため、Cookが走らないです。  
比嘉さんのプロジェクトを見てなるほどなぁと思った部分です。  
不要な映像のCookを走らせない仕組みを理解したら、あとは自分で好きにシステムを組めるんじゃないかと思います。  

## 絵を選ぶところ
レイヤ毎、映像毎にボタンを作っています。  

![choice.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880453/3c23c2f1-ecb2-3744-8e28-2181dbb4a20a.png)

TANGLEでVJをする場合はたくさんの絵を使いたいので、ここのUIは映像を選ぶボタンだけにしています。  

AudioVisualやバンドのライブのときは、シーンごとや曲ごとにパネルを作って、もう少し細かいパラメタ制御UIをここに作り足したりします。



## 絵を混ぜるところ
4つのレイヤの出力映像をコンポジットしています。  

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880453/a4b6dd62-c852-0fe9-6eb3-502ddbd1ac4f.png)

それぞれのレイヤはmidiコンのスライダの値(0.0~1.0)で黒TopとSwitchしています。  
数値が低いとうっすらと絵が出るのですが、複数の映像とコンポジットすると明るい部分だけ混ざったりしてきます。  
1種類だとアッサリしていていまいちでも、複数の映像を混ぜたら意外と好き！、みたいになります。  

※あらためて考えるとここはSwitchTopじゃなくて単にLevelTopでいい。最初に学んだことに引っ張られてる。。

## 調整するところ
ポストエフェクトするところです。  
いろいろのシェーダを織り込むもよし、タイルするもよし。  

![img5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880453/7ae4d13d-639b-e7f2-bb2d-b7eae094d348.png)


いちばん重宝するのはいちばん最後に差しているLevelTopで、ここで明るさを上げたり下げたりして最後の出力を調整しています。  

## midiコンとの連携
自分の設定は以下の図のようになっています。

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/880453/f356488d-1c16-8d46-7f38-dbbe08e90dd9.png)

## パラメタの参照
映像への入力値として、以下を参照しています。  

- 音解析結果の値: /audio
- Colorパネルの値: /colorController
  - 色を変えられるようにしておくと、他の絵と混ぜたときに雰囲気が合いやすいです。  
- midiコンの値: /paramController
  - level, gain, speedという3種類をmidiから入力しています。
    - level: 絵の明るさ、動きの大きさ、など。
    - gain: 歪の強さ、動きの大きさ、など。levelとほぼ同じ。
    - speed: 絵の動きの速さ、など。

チュートリアルをやって出来た絵に、音に反応させたら変化が面白いパラメタとかを探しておいて、システムに組み込むときに上記のパラメタに差し替える、といったことをしています。  
ライブのVJのようなときは細かく制御したいことが多くなるので、midiコンではなくUIを作って制御することが多いです。    

## 刻みTD(レイヤ4)
レイヤ4はレイヤ3と全く同じ内容です。  
TDをもう1個立ち上げて、そちらにレイヤ3のsceneファイルをコピペして動かし、出力をSpoutで受け渡しています。  
コピペするだけで動くようにちょっとした工夫をしているのですが、今回は割愛します。


# おわりに
自分はもともと音楽が好きでギターを弾いたりしていましたが上達せず、DJをやる友達が多くいましたが自分ではできずだったのですが、VJとして一緒にパーティを作れるようになってとても楽しい時間を過ごせています。

自分をVJと呼ぶのはすっごく恐縮なのですが、好きでずっと続けている感じです。  
全然実力不足ですが楽しいです。  


# 広告
渋谷TANGLEで月末水曜日にSuaveというパーティをやっているのですが、一緒にVJをやってみたい方がいらしたら、ご連絡ください。  
VJはじめの一歩の場に、ぜひ。