この記事はTouchDesigner Advent Calendar 2022の16日目の記事なのに、既に12/17です。すみません

はじめに

TouchDesignerでたまにVJするので去年あたりから自分用のUIを作り直しています。
以前TouchDesigner Advent Calendarで書いたものを参考にしたという人がいて「へ〜誰の役に立つかわからないもんだな」と思ったので、今年は現場を乗り切るのにやってよかったTIPSや現状のオレオレ構成をざっくり書いてみます。

何年経ってもよくわからないまま使っており、最適解というより自分はこうやってますってポイントだけ書くので、「あーこのあたり考えておく必要があるのね」とか「あれで済みそうことをやりたいんだな」とかなんとなく察してください。

3年ぶりのQiita投稿...

自己紹介

satzz / Hackmarkt
フリーランスWebエンジニア（frontend/backend）
Tunnel Tokyo（コワーキングスペース）スタッフ（映像・音響・機材）
Ableton Meetup Tokyo（ユーザーグループ）スタッフ
テクノDJ、VJ
DJイベント主催、外国人アーティストの来日サポート
VJチームのオーガナイズ
サウンドデザインお手伝いなど
etc

構成

機能を使う状況ごとに整理する

PaletteのDerivative > UI > Basic Widgetsにあるsection Widgetを使って、使わない機能をたたんでおく。ちなみにPaletteずっと無視してたけど、そこにあるものを一度眺めたり自分のコンポーネントをしまっておくことでUIの作り直しの助けになった。

Container COMP内で、section Widgetから0/1の状態を取得し、CHOP Executeに渡してparentの高さを変えることでsectionを折りたたむ。

def onOffToOn(channel, sampleIndex, val, prev):
	op('controls').par.display = 1
	me.parent().par.h = op('height').text
	return

def onOnToOff(channel, sampleIndex, val, prev):
	op('controls').par.display = 0
	op('height').text = me.parent().par.h
	me.parent().par.h = 30
	return

Container COMPの挙動が確認できたらコピーして並べる。

まぁ正直、タブ状UIが作れたらそれでもよいと思う。
ここからは各sectionに入れている機能を挙げる。section名は適当。

Window

performウィンドウを開くボタン、MacのScreen Saver/Screen Lockを切り忘れないためのblinkなど地味な機能。頻繁には使わない。

Pref

Preferenceというあまり意味のない名前はさておき、現場でのテスト中に、壁や装飾を見ながら最終的な絵の出る位置とサイズを調整する機能を現状は置いている。
Basic Widgets > slider2D Widgetでtransform X/Y, scale X/Yを調整する。
これも最初に調整したらあとでいじることは少ない。

Audio

マイクから音を拾ってaudio reactiveな絵を作りたいときに、音声のinput gainを調整する機能。Basic Widgets > Core > masterKnobが割と省スペースなのでちょうどよいサイズに調整して使っている。イベント中を通じて当然出音は変わるので、割と頻繁にいじる。

Artist

イベント名や出演者名などのテキストをエフェクトをかけてさくっと出す機能。文字数によってサイズ調整もできるようにしている。

Scenes

自分で作ったコンポーネントの切り替えを行う。ここは自分のスタイルを出すところなので簡単に増やせるようにした。PaletteのTools にあるsceneChangerをうまく使うとリソースを節約できるのだが、sceneの削除したときの挙動がどうも不安定な気がする。要検証。

Effects

絵にかけるエフェクトを調整する。

Videos

背景の動画素材のファイルの切り替えを行う。

このContainerのAlignはGrid Rowsが便利。

素材のPanel CHOPのクリックをCHOP Executeへ渡し、欲しいコンポーネントの素材だけ再生する。
sceneChangerとやりたいことは似てる。

def onOffToOn(channel, sampleIndex, val, prev):
	print("onOffToOn", channel, sampleIndex, val)
	moviesNum = int(op('info1')['length'])

	for i in range(0,moviesNum):
		opName = "bg" + str(i) 
		op(opName+ '/movie').par.play = 0
		print(opName, "off")

	opName = "bg" + str(sampleIndex)
	op("selectView").par.top = opName + "/out1"
	op(opName+ '/movie').par.play = 1
	print(opName, "on")

	return

素材の追加、もとい、素材が並んだネットワークが地獄である。

Master

最終的にかけるマスターのエフェクトを置いている。明るさの調整やモノクロなど。（Ableton LiveのMaster Trackみたいな？）

課題

もらった現場をこなしながら自分で必要な機能を考えてUIを育てていく感じで上記のようになってきたが、プレビューしたい、素材やシーン追加を楽にやりたいといろいろ課題もあり、この少ない機能だけでもネットワークや階層が複雑化してきた。またリファクタして作り直したい気持ちがある。

※これはごく一部

うまく作り直せたら数年後のアドベントカレンダーで書く。

参考情報

TDSWの動画: TDSWのイベントや配信がなかったらTDやろうと思わなかったと思う。
Higaさんの資料など: 基本的なUIの作り方などはここで勉強した気がする。
ビジュアルクリエイターのためのTOUCHDESIGNERバイブル: 作例がいっぱいあるのでステップアップにおすすめ。

おわりに

「このレベルだったら苦労してTouchDesignerでやる必要はなくVJソフト使えばいいじゃん」って話ですが、やっぱり自分でhackしていくのがTDのかわいさって感じがしますね。Advent Calendarの他の記事も勉強になります！

筆者は大型LEDが使える大崎のTunnel Tokyoでスタッフやってる（audio visualをはじめイベントのサポートも）ので、お立ち寄りの際は是非。

Happy TouchDesigner Life!

TouchDesignerで作ったVJ用UIを振り返る