6>TouchDesignerでVideo synthesizerを作ってみる:UI編 | 海外でデザイナー始めました(12年目)

前準備

MIDIコン選定

今回はできる限りマウスを使いたくなかったので、先に使用するMIDIコンを選定。
Korgのnano keyとかでもいいんだけどせっかくのシンセ風コンセプトなのでフランス発シンセブランドArturiaのMini lab Mk2、中国元700元(日本円1万ちょい)を購入。

1.5kgでちょっと重いけど小型、打鍵感良くてベロシティも取れる(今回使わないけど)、専用appでMIDI信号の編集もできる有能さ。側面の木目調がいい感じ。

MIDIコン側のレイアウトに合わせてざっくりつまみのレイアウトなどをラフに起こした後TouchDesigner上で実際に組んでいきます。

使用するパーツの洗い出し

ツマミ
横フェーダー(鍵盤の代わり)
縦フェーダー

UI機能/デザインの方法

手軽にUI組むのであればpalette > UIに大体普通に使うプリセットは入っているのでそこから選択
Comp内のslider compなどを使用
上記をカスタマイズ
0から構築

上から
手軽>>>大変
カスタマイズ大変>>>自由
というメリット・デメリットがある中で、MIDIコン側の都合が

鍵盤のMIDIがノート固定なのをスライダーUIにはめたい
コントローラー側ツマミはインフィニティ(0-1がなく回り続けるやつ)なのでUI上で
UI上の数値表記を色々変えたい

って理由と、単に自作UI作ってみたかったってことでCompをベースに自作してみる。

パーツの準備

基本構造

PC上UI操作からの値入力
MIDIコンからの値入力
1/2、後に操作した方の値で上書き
値を外部への出力(この値を各種パラメータに割り当て)
UIの見た目作り

また今回ツマミが多くパーツを使い回す前提+今後別のUI製作時にも使えるよう、よく変更するであろう色/ラベルなどの項目はComp側に値を取り出しておく。

UIパーツ制作 : UI上の操作で値を取得

Constant1に作った”parIN”の値を”parent().panel.v”にすることでUI上で縦方向にドラッグした移動距離を値として取得。

(panel.hで横方向の値取得)

あとクリックなど他の行為の値も取得したい場合はpanel CHOPから拾うことも可能。

UIパーツ制作 : 取得した値をデザインに反映

Text TOPに入れて数値表示。

ツマミ/nobを作りたい時は取得した値をCircle TOPのスライスに入れてみたり、スライダーにしたかったらツマミ代わりにしたcontainerのアンカーポイントに入れたり、rectangle TOPのサイズにいれたりとデザイン次第で色々可能。今回はノブ/ツマミ、縦スライダー、横スライダー、横スライダー塗りつぶし有(本番未使用)を制作。

http://satoruhiga.com/TDWS2019/day16/
http://ted-kanakubo.com/touchdesigner-jp/?p=144

UIの表示とレイアウト

基本操作すぎて意外とちゃんと書いてある記事を見つけられなかった、そもそもUIをつくった後、どうやって表示するのかっていう根本的問題。

UIとして表示できるのはCOMPノード>Panelだけ

特になんでも入れられるcontainerはよく使う。というかほぼこれだけ。
(上記の自作UIもcontainerの中でつくってます。)

UIの表示はPerformance mode。

TouchDesigner 立ち上げた時に表示される階層(下図一枚目)の一つ上の階層にあるperform window COMPのWindow Operatorの項で指定したオペレーターをPerformance mode時に表示します。

なのでproject1階層下にcontainer COMPを製作し(名前をUIに変更)、Window Operatorの項でcontainer COMP(UI)を指定してfunction+F1キーでPerformance modeにはいるだけ。

ちなみにビジュアルの出力は色々(window COMP / SyphonOut TOPなど)。

TouchDesigner中級編(7) – プロジェクトの構造化とGUI、Container COMP、Widget COMP

https://www.shuhei-matsuyama.com/single-post/2016/01/04/touchdesigner-%E4%B8%8A%E3%81%A7%E3%80%81ui%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B
http://satoruhiga.com/TDWS2019/day16/

“UI” container COMPにパーツを入れる。

直接container COMP下の階層にいれる
パーツCOMP上部と“UI” container COMP下部を繋ぐ(上図参考)

どっちの方法でもFPSとかには影響ないはず。
今回はVCOなどの各パートは下位階層に入れてユニット化。
それぞれのユニットをUI container COMPにつなぐことで、後々処理スピードなどの様子見てパート単位でプロジェクトを分割・処理の分散を行える様にしてます。

処理の分散について

【VJシステム　設計思想①　負荷分散】
一見VDMXっぽいこのUI、VJ時に必要なシステムをプロジェクトで分けて、同時に開いているため、こんな感じです。

というのも、touchdesigner、1プロジェクトがシングルスレッド処理になるため、重い処理を同時に1プロジェクトで動かすと、すぐに30FPS切ります。
— Bun5 / kaaal (@bun5jp) January 20, 2019