今回から3回に渡ってリアルタイムにビジュアルを変化させていくパフォーマンスをするためのベースを作っていきます！第1回はシンプルな UI （ユーザーインターフェイス）の使い方を勉強します。
サンプルファイル
chimanaco/takara-univ-media-programming-2022
04が本日のディレクトリです。
はじめに
前回お話したプロジェクトフォルダーを作成してから作業を始めてください。次回は今回作るものをベースに作業していただくのでプロジェクトフォルダごと Teams にアップしておいてください。 今回欠席されている方には次回開始時にはサンプルファイルを用意いたします。
Perform Mode
今までは Network Editor の中で色々やってきましたが、ここでディスプレイへのイメージの出力の仕方についてお話します。
ディスプレイにイメージを出力するには Window COMP を使います。デフォルトですでに perform と名前がついた Window COMP がルートにあります。perform を選択すると Window Operator のところに project1 が指定されています。これは project1 がディスプレイに出力されるという意味です。
ディスプレイが1つの場合は Monitor に 0 を指定します。複数ディスプレイの場合はここの数値を1以上にすることで別のディスプレイに出力することができます。
project1 を選択し、Look タブの Background TOP を見ると ./out1 という指定があります。これはこの Container の中の out1 と名前のついた TOP を背景として表示するということです。
project1 を選択し、Layout タブの Width と Height を見ると 1280 と 720 になっています。これがディスプレイに Window として開かれるサイズになります。
Window の開き方には2種類あって、1つ目は Open as Separate Window の横にあるボタンをクリックすると出てくる floating window です。Network Editor を編集しながらできるのでなかなかいいのですが、Editor も同時に開いているため、GPU に負荷がかかりフレームレートが遅くなることもあります。
そこで使うもう1つが Open as Perform Window で、こちらをクリックすると Network Editor が非表示になり、出力結果の Window だけになります。処理負荷も抑えることができます。
F1 がこのモードへのショートカットキーで Esc で元の Editor mode に戻ることができます。
これまでの設定だと TouchDesigner では 1280x720 の Window で表示していて、プロジェクター等の表示したいスクリーンが 1920x1080 だったとします。これに対処するにはいくつか方法があります。
1つ目は project1 の Width と Height をそれぞれ1920と1080に変更する。
もう1つは perform を選択して Opening size を Fill に設定する方法です。これは最終出力の解像度がわからないときなどにお手軽に使えるのですが、この方法はディスプレイが増えた時に使えないので1つ目の方法を採用します。
デフォルトでは上部にボーダーが表示されるので、perform を選択して Borders を Off にします。こうするとフルスクリーンのようになります。
画面全体に表示はできるのですが、講義で使用している Non-Commercial 版だと1920x1080の解像度が使えないので、最終出力結果は1280x720のものが引き伸ばされて表示されています。
TOP の切替を作る
一番右にある out1 を残して全て削除します。 以前使った SwitchTOP を使って3つの TOP が切り替えられるようにしてください。どんなものでも構いません。
ここで SwitchTOP に入ってくる全ての input の解像度をあわせましょう。compositeTOP で合成する際の方法は以前行いましたが、 FitTOP を使う方法もあります。例えば元々正方形の TOP を1280x720 にする場合は、まず common タブの Resolution で 1280 と 720 を指定します。
続いて Fit のところを Fit Horizontal にすると元の TOP の上下を切った形で表示されます。これは画像に応じて調整してみてください。
ここで F1 を押して Perform Mode にしてみても、 このままだと変化を加えることができません。 例えば前回やったように 1, 2, 3 のキーにスイッチのインデックスをアサインして切り替えるというのももちろんできるんですが、より操作をわかりやすくするために UI を使っていきます。
Basic Widget を使う
自分で色々作っていくこともできるんですが、TouchDesigner が既に用意してくれているものがあるので、まずはこれらを使ってみましょう。
ラジオボタン
まずはラジオボタンを使ってみます。Palette > Derivative > UI > Basic Widgets とたどって、 buttonRadio を選択して Network Editor にドラッグ&ドロップします。
ラジオボタンが配置されました。これをカスタムしていきます。
3つの TOP を切り替えるので、Button Labels のところを 0 1 2 というようにします。A B C のようにすることもできます。
Output に NullCHOP をつなぎます。ボタンに応じて出力される値が変化します。
Button Labels は文字列にもできます。ここを変えても出力される値は 0 から始まる数字になります。
Values タブの Name 0 を変更するとチャンネル名が変わります。
出力結果には影響しませんが、Widget Label を変更するとボタン横のラベルが変更されます。
SwitchTOP の Index から ラジオボタンの後の null を参照すると、ラジオボタンから Switch の Index を変更することができるようになりました。
F1 を押して Perform Mode にすると UI が左下にこのように表示されて操作もできます。
横向きスライダー
パラメーター変化用にスライダーを配置します。UI が並べやすいので横向きのものを使用します。Palette > Derivative > UI > Basic Widgets とたどって、sliderHorz を選択して Network Editor にドラッグ&ドロップします。
Values の Name0 を変更するとチャンネル名が変更できます。
ここではスライダーのあとに繋いだ NullCHOP を LevelTOP の High R から参照するようにしました。
ここで Perform Mode にすると、ラジオボタンが見えなくなってしまいます。
これは UI が重なって表示されているためです。UI を並べて表示させるには ContainerCOMP の Align 機能を使います。buttonRadio 上部にある input から containerCOMP の下部の口につなぎます。こうすると container の中に buttonRadio が入ります。
さらに sliderHorz もつなぎます。childrenタブの Align を Top to Bottom にすると上下に並びます。並び順はアルファベット順です。
各 UI が横幅450、縦26なので、containerCOMP のサイズを縦450横52にします。
F1 を押すと UI が縦に並んで表示されるようになっているはずです！これで操作ができるようになりました。
横向きスライダーの値の範囲を変える
スライダーはデフォルトだと 0 から 1 の範囲で遷移をします。これを例えば 0 から 100 の遷移としたい場合は MathCHOP などを使うと簡単に変更できます。
本日の課題： UI を使ってリアルタイムに変化するビジュアルを作る
ラジオボタン等で SwitchTOP を切替、スライダー等を1つ以上追加してビジュアルを変化させるようにしてください。.toe ファイルや画像などの入ったプロジェクトフォルダごと Teams に提出してください。
スライダー等の UI を1つ以上使っていれば、後はどんな値を使っても構いません。clock, mouse, LFO, mouse, etc…
TouchIn / TouchOut テスト（オプション）
- IP アドレスの探し方
- Firewall に注意