はじめに
こんにちは、Noiです。
普段TouchDesignerをこねこねして遊んでます。
早速ですが、Xやinstagramなどで、下の動画の様にTouchDesignerのノードをpythonで動かしている投稿を見たことがある人は多いんじゃないでしょうか。
特に何にも使えないでおなじみ、ノード制御toxができた。
— Noi (@N0i777) August 27, 2025
このtox置くとプロジェクトのノードたちが勝手に動く#TouchDesigner pic.twitter.com/Fv65VNGduU
TouchDesignerのプログラムの構成要素であるノードですが、ネットワークエディタ上のノードの位置や大きさは動的に変化させることができます。
それだけではなく、TouchDesignerにはUIの要素にアクセスできる様々なクラスがあります。
今回はそれらを使ってTouchDesignerのUIを巻き込んだ表現について書きます。
簡単に言うと、「UI画面で遊ぼう」です。
プロジェクトファイル
※今回UIをいじるので、一度変更したら元に戻せないものが所々あります。操作をcomp間の移動やボタンを押すだけにするとうまく動くと思います。
あと環境によって変わる場合もあるので動かなかったらすみません。(2025.31760で作ってます)
OP Class
プロジェクトファイル→
01_operator
UIで遊ぶ時に一番使われているであろうOP classでは、オペレータの色やサイズ、位置、ノードのコネクタなどを制御することができます。
色(color)
オペレータの色をRGB値で指定できます
op('constant1').color = (0.1, 0.2, 0.3)
例
rgbを渡すことでゲーミングオペレータを作ることもできます。
位置(nodeX, nodeY)
ネットワークエディタ上のノードの位置をx, yそれぞれ取得、指定できます。
op('constant1').nodeX = 100
op('constant1').nodeY = 100
## nodeCenterX, Yにするとノードの中心の位置になる
例1
spring CHOPを使って、ボタンを押すとオペレータが垂れるものも作ってみる
例2
3Dオブジェクトをnodeの動きに変換
サイズ(nodeWidth, nodeHeight)
ノードの縦横サイズを取得、指定できます。
op('constant1').nodeWidth = 200
op('constant1').nodeHeight = 200
例
nodeYと組み合わせてbuttonをバネみたいにする
ディスプレイ
op('constant1').display = True
Trueにすると、Top Viewer, CHOP ViewerなどのViewer paneで表示することができます。
UI Class
UIクラスはTouchDeisgner自身のUI要素にアクセスすることができます。
Pane Class
プロジェクトファイル→
02_pane
Pane Classは、TouchDesignerで編集するための枠であるpaneの情報にアクセスできます。
分割(split)
paneの上下左右いずれかを分割することができます。
ui.panes[0].splitTop() #pane1を上に分割
ui.panes[0].splitBottom() #pane1を下に分割
ui.panes[0].splitLeft() #pane1を左に分割
ui.panes[0].splitRight() #pane1を右に分割
例
四分木みたいな画面の自動生成
(サンプルファイルだと分割した後ネットワークエディタは左上のどこかにあります)
分割比率(ratio)
既に分割されているpaneの表示画面比率を設定できます。
ui.panes[0].ratio = 0.5
例
paneでオーディオスペクトラム作ってみる
pane type変更(changeType)
PaneType.NETWORKEDITOR
PaneType.PANEL
PaneType.GEOMETRYVIEWER
PaneType.TOPVIEWER
PaneType.CHOPVIEWER
PaneType.ANIMATIONEDITOR
PaneType.PARAMETERS
PaneType.TEXTPORT
これらのpane typeに変更可能
p = ui.panes[0]
p = p.changeType(PaneType.NETWORKEDITOR) #再割り当て必須
NetworkEditor Class
プロジェクトファイル→
03_NetworkEditor
エディタ位置(x, y)
ネットワークエディタ上の位置を取得、指定できます。
ui.panes[0].x = 100
ui.panes[0].y = 100
例
ノードの位置にネットワークエディタの中心を追従させる
ズーム(zoom)
エディタ上のカメラのズーム具合を指定
ui.panes[0].zoom = 1
例
マウスの位置に合わせてパーティクルのようにノード群を動かす
あとがき
ここまでTouchDesignerのUIでいろいろ遊んできましたが、TouchDesignerの一番の特徴というものは自己言及性だと考えています。自己言及とは「メタ」ともいわれますが、この場合、ノードが持つプログラムによって自身のノードの形態を変化させたり、プログラムを作る場所であるはずのネットワークエディタそのものを動的に書き換えたりする性質のことです。
一般的なプログラミング環境では、編集環境と実行結果は明確に分けられています(Quineはその限りではないですが)が、TouchDesignerではそれらが同一の空間内にあります。そのため、処理の結果だけでなく、処理を生み出している構造そのものがリアルタイムに可視化することができます。このように実行結果が実行結果を構成するプログラムの外見に介入できるものはあまりない面白い構造だと思います。
自己言及とは少し離れるのですが、UIの目的性を排除して視覚的な形として利用するという流れがwebcoreをはじめ流行っている所感がありますね。（最後のは自分ですが）
こういう特殊VJを集めたイベントとか見てみたい
Scrapboxのページ一覧でVJ行われている #smtppp pic.twitter.com/Tv2wQ3XAe7
— マジカルペンネくん🍝 (@pastak) February 7, 2020
cam 2 mine sweeper pic.twitter.com/jTjD3ImlQ5
— 木葉はづく / hazuqu (@HAZUQU) July 18, 2025
#放課後ジェネラティ部@roopspn_2020 さん天才すぎる2 pic.twitter.com/TVm8PAWVf9
— Saina(さいな) (@SainaKey) July 10, 2025
やりたかっただけ pic.twitter.com/zkvHD5y3sz
— Noi (@N0i777) June 14, 2024
この記事を機にTouchDesignerのUIをいじって遊んでみてはいかがでしょうか
Reference
今回は見た目が分かりやすく変わるUIを取り上げましたが、公式見たらもっといっぱいあります