きっかけ

2020年7月4日に行われたアニソンDJイベント「えんどるふぃんVol.40」にてVJとして出演させていただけることになりました。

TDSWさんのTouchDesignerチュートリアルがめちゃくちゃ楽しかったので、せっかくならTouchDesignerを使ったオーディオインタラクティブな（音に反応する）VJをしてみたいと思いました。

当初はTouchDesignerで音に反応するエフェクトを作り、resolumeというVJソフト(36,000円くらい)で映像を出力しようと考えていたのですが、イベントの1カ月前くらいに、TouchDesignerでVJソフトの作り方を教えてくれるチュートリアルをたまたま見つけて、「TouchDesignerでVJソフト作れれば無料でVJ出来るじゃん！！！！！！」と思い、TouchDesignerによるVJソフトの自作を決意しました。（愚かにも）

使用ソフト

TouchDesigner　

要件定義

・レイヤーが複数あってそれぞれの透明度を調整できる
・MIDIコントローラーに対応（なくても画面のスライダーで操作できる）
・映像素材を追加できる
・画面全体にかかるエフェクト
・音に反応する機能をつける
・ホワイトアウト、ブラックアウトができる
・TouchDesignerで作ったプロジェクトのパラメーターをいじれる

とりあえず作ってみる

とりあえず上記のチュートリアルを真似して簡単なVJシステムを作ってみました。

左右2チャンネルで、それぞれ暗転用の黒い画面を含む8個の映像素材をセットすることが出来ます。左上と右上には選択した映像素材のプレビューが表示され、中央下部のスライダーを操作することで中央上部の最終出力にどのくらいの割合で左右の映像素材を表示するかを調整することが出来ます。

この時点で最低限のVJシステムは完成しました！！！これで安心してイベント迎えられる！！！ありがとうございます！！！

あとは左右2チャンネルじゃなくてレイヤー構造にして、MIDIコントローラーで操作できるようになれば.....

って、え？？？？？？？？

この時大変な問題に気が付きました。

映像めっちゃカクつく

やったー！できたー！と喜んでいたのもつかの間、映像がすごくカクついていることに気が付きました。このままではイベント当日カックカクの映像でVJすることになってしまい、最悪パソコンが処理落ちしてしまうかもしれません。

それもそのはずで、選択した映像素材以外の再生を止める。みたいなことをしていなかったので（そんなものが必要とも思わなかった）常に映像を14本同時再生している状態になっていたからです。

選択した映像以外の再生を止める

調べてみるとTouchDesignerでは、オペレーターの処理を実行することを「cook」すると言うらしく。必要な時以外はcookしないようにDATオペレーターを使って記述すればよいようです。

しかし、pythonが満足に書けないことが災いしてうまくいきませんでした。

ので、どうにかDATオペレーターを使わない（pythonを記述しない）方法で頑張ろうと思い、こちらの方法で実装しました。

Movie File In TOP の play の部分なのですが、直前の Expression CHOP の値を参照していて、Expression CHOP は「対応する映像素材が選択されていれば１、選択されていなければ０」を返すようになっています。こうすることで、対応する映像素材が選択されていれば play が１（再生される）、選択されていなければ play が０（停止される）というような処理になります。

この方法で（効率は悪いとは思いますが）なんとか映像がカクつかない程度まで負荷を軽減することが出来ました。

レイヤー構造にする

このように Over TOP を何回も使うことで5階層のレイヤー構造にし、それぞれ Level TOP を経由させ opacity をスライダーに対応させることで透明度を調整できるようにしました。

※スライダーを縦にする方法が地味に難しかったので備忘録として参考記事を貼ります。

MIDIコントローラーに対応

Kodai Takao さんがnanoKONTROL2 の TouchDesigner用GUIを公開してくれていたので、部品をばらばらにして埋め込んで使いました。とても助かりました。（そういうことしていいのかな、、、）（ダメだったら教えてください）

音に反応する機能をつける

当初は Audio Device In CHOP を用いる予定だったのですが、

こちらの記事で、Audio Device In CHOP 重いからあんまり（2個とか）使わないほうがいいということが書いてあったので、方針転換して手動でBPMを合わせて、それにエフェクトを対応させる方向にしました。

（それもうTouchDesigner使うメリット無いのでは？？）

こちらの記事を参考に実装しました。

映像をドラッグアンドドロップで追加

とりあえず、これで当初の要件は満たせました！！よっしゃ試運転だ！と思って本番のプレイを想定してYoutubeでプレイリストを作り、それに合わせて映像を切り替えていたのですが、

「え？？映像素材クリップに追加するの大変過ぎでは？？」

当初、エクスプローラーから映像素材ファイルをTouchDesignerにドラッグアンドドロップして Movie File In TOP として読み込み、ノードを繋ぎ直すことでクリップに追加しようと考えていたのですが、絶対にそれでは間に合わないということを悟りました。

調べてみると、どうやらTouchDesignerのUI系のオペレーターは、ファイルがドラッグもしくはドロップされた時の挙動を設定できるようなので、こちらの記事を参考にしながら実装しました。

これでイベント当日、VJプレイ中にノードをせかせか繋ぎ直さなくて済みます。加えてTouchDesignerのノードエディターを開いておく必要がなくなったので、負荷軽減にも一役買ってると思います（多分）

完成！！

最終的な機能はこんな感じになりました。

・レイヤーが5個あって、下から[カメラ入力][映像素材１][映像素材２][エフェクト][ロゴとか]それぞれミックスできる
・MIDIコントローラーに対応（なくても画面のスライダーで操作できる（すごい））
・映像素材をドラッグアンドドロップで追加できる（すごい）
・画面エフェクトが3種類[RGB delay][solarize(色調反転)][bloom(めっちゃ光る)]
・BEATをボタンタップで調整できる
・フラッシュ、ホワイトアウト、ブラックアウト
・エフェクトレイヤーはパラメーター2つノブでいじれるようにしてある(線の太さが変わったり歪み方が変わったり、適当に回せばそれっぽくなるように調整してある)

反省点

実際にイベントでプレイしてみて、以下の不具合や反省点あったので、少しづつ改善していければなーと思っております。原因分かる方はコメントいただけるとありがたいです。

・映像素材のセットが絶望的にやりにくかった(フォルダごとドロップ出来ると便利かもしれない)
・セットした素材がなんの映像かわからなくなってしまった(ファイル名が表示されず、またサムネイル表示が動画の0:00だったため真っ黒とかめっちゃあった、そもそもセットされてるのかすらわからない)
・謎に再生出来ないmp4ファイルがあった(コーデックとかの問題？)(しかもめっちゃくちゃソフトが重くなってしまったので先輩にフォローしてもらった)
・BPMの同期(映像も切り替えながら)が思ってた以上に面倒だった
・BPMのリアルタイムな表示が出来なかった
・リップシンク（タイミングよく映像を出す）が不可能

まとめ

めーーっちゃくちゃ大変でした！！結局オーディオリアクティブに出来てないし、大人しくresolume買っておけばよかったw

けど、今回のVJソフトの作成を通してTouchDesignerに関する様々なことを学ぶことが出来たのでそこは収穫かなーと思います。あと作るの自体はすごく楽しかったです！

もう少し改善して、いい感じになったら配布したいと考えているので、自分の作ったソフトが入門者向けの無料のVJソフトの選択肢の1つになって、TouchDesignerでVJ勢が一人でも増えてくれればなーとか思ってます！