
前回は Movie File In TOP、Circle TOP、Rectangle TOP、Transform TOP、Tile TOP を紹介しましたが、今回も主に2Dを扱う TOP の勉強をしていきます!
サンプルファイル
chimanaco/takara-univ-media-programming-2021
02が本日のディレクトリです。
Composite TOP
Composite: /project1/Composition
Composite TOP
は複数のインプットを合成するオペレーターです。Operation の値によって様々な合成結果を生み出します。これは Photoshop でいうところの Blending mode (描画モード)にあたります。デフォルトだと Multiply という入力する色同士を掛け合わせる設定になっていますが、この値を変えると出力結果が変化します。
計算式を見たい方は Composite TOP のページの Operation の項目をご覧ください。
また、Pallete > Tools > blendModes からも結果の一覧を見ることができます。

Composite size: /project1/Composition_size
Operation 以外にも重要なパラメーターが Transform タブにあります。まず Fixed Layer をよく使います。ここで設定されたインプットが基準となり、このインプットの解像度とアスペクト比が合成の結果の解像度とアスペクト比となります。
また、Pre-Fit Overlay はどのように Fixed Layer 以外のインプットが合成の際に画面を埋めるかという設定になります。解像度が異なるインプットを合成する際にはここの設定がとても重要になります。
Composite Alternative: /project1/Composition_alternative
Composite TOP は何個でもオペレーターをインプットすることができますが、TOP の中にはインプットの数が決まっているものがあります。例えば、Multiply TOP や Over TOP というものがあり、これらはComposite TOPの Operation からそれぞれを選択した時と同じ挙動をします。どちらを使ってもよいでしょう。
Level TOP: /project1/Level
Level TOP はコントラストやブライトネス、ガンマ値、ブラックレベルやアルファの設定など色を調整するオペレーターです。

Edge TOP: /project1/Edge
Edge TOP は Photoshop の find edge(輪郭検出)のような機能です。エッジの色や太さの調整をはじめ、インプットされたイメージに重ねてエッジを表示することもできます。
TOP with CHOP: /project1/Transform_CHOP
これまでいくつかの TOP を見てきましたが、最初にお話したように、TouchDesigner では異なるタイプのファミリーのオペレーターがあります。ここで TOP と CHOP を一緒に使ってみましょう。
まず、定数を扱う Constant CHOP
を追加します。ここに chan1 というチャンネルとその値があるのでこれを Transform TOP のパラメーターで使いたいとします。しかし違う色、違うファミリーのオペレーターはインプットとアウトプットをつなげることができません。どうしたらよいでしょうか?
Transform TOP を選択し、右上に parameter window が表示されていることを確認してください。さきほど追加した Constant CHOP の右下のプラスボタンをクリックして、Viewer Active と呼ばれる状態にします。Viewer が Active な状態の時は、マウスオーバーされたチャンネルが緑に代わります。そのチャンネルを Transform TOP の Translate パラメーターにドラッグ&ドロップして、CHOP Reference を選択します。
これで2つのオペレーターは繋がりました。Transform TOP のパラメーターの値が青になっていて、Transform TOP と Constant CHOP の間に点線の矢印があれば、期待通りの挙動です。
次に LFO CHOP
を使います。LFO は Low Frequency Oscillator の略で、音楽ソフトなどを使われている方には馴染みがあるかもしれません。ここでは波形を作るのに使います。どのような波形になっているかは Trail CHOP を LFO CHOP につなぐことで可視化することができます。
これを使って TOP のイメージを回転させます。追加した LFO CHOP で Type を Ramp にしてください。これで0から1までの ramp 関数が生成されます。
TouchDesigner の角度のパラメーターは angle を使うので、0から1という値の代わりに0から360という値が必要になります。これを行うには、Math CHOP
を使います。Math CHOP は計算処理を行うオペレーターでとても良く使います。Range タブの To Range の右側のパラメーターを360にします。こうすることで0から1の値が0から360になりました。さきほどと同じように、このチャンネルの値を Transform TOP のRotate にドラッグ&ドロップします。
Use Null: /project1/Transform_Null
Null operators
ここで NullCHOP
を紹介します。Null は何か機能があるわけでは無いのですが、異なるファミリー間でデータのリファレンスを行う時にとてもよく使います。
もしこれをせずに例えば TOP から直接 Math CHOP に参照を作るとします。こうしてしまうとその後に他の CHOP を追加するたびにリファレンスをアップデートしなければいけなくなってしまいます。これを防ぐために Null オペレーターを使うようにしましょう。
プログラミングして何かを作る時に1回で全てうまくいくことはほとんどありません。このように後に発生する可能性のある修正に対応しやすい形に作っていくのはとても重要なことです。
Feedback TOP
次に、TouchDesigner でフィルターを作る時によく使うFeedback TOP
です。このオペレーターは TOP の中でフィードバックエフェクトを作るもので、1つ前のフレームを取得することができます。これを現在のフレームに合成する必要があるので、新しくブランチを作り、Composite TOP を追加します。
ただ Feedback TOP を追加しただけだとフィードバック効果は起こりません。Feedback TOP の Target TOP に読み込むべき前のフレームを持つTOPを指定します。この場合は comp1 という名前の Composite TOP になるので、comp1 を選択して、Target TOP にドラッグ&ドロップするとフィードバックエフェクトが始まります。
フィードバックは繰り返し繰り返し描画していくので、間に他のフィルターを入れることによって様々な効果を作り出すことができます。 ここに Transform TOP を入れると、毎フレームこの変形が適用されるようになります。例えば毎フレームスケールダウンする処理を入れるとどんどんスケールダウンしていきます。
いろんな数値を入れてみて好きなエフェクトを探しましょう。
Feedback: /project1/Feedback
Feedback trail: /project1/Feedback_trail
Level TOP をフィードバックループに入れて、Opacity を変化させるとトレイルのような効果を作ることができます。
Feedback transform: /project1/Feedback_transform
ExportMovie /project1/ExportMovie
動画を書き出す方法の一つとして、Export Movie というダイアログが用意されています。
File > Export Movie...でダイアログが表示されます。TOP Video に書き出したい対象の TOPを指定し、各種設定を行い、一番下にある Render Movie 横の Start ボタンをクリックすると録画がスタートします。

本日の課題:Feedback TOPを使って映像を作る
Feedback TOP を使用して映像を作成してください。Export Movie を使用して Codec は MPEG 4(Part2) にして動画を書き出し、Teamsで提出してください。
参考
- What is feedback? feedback in Touchdesigner (터치디자이너 튜토리얼 자막) - YouTube
- Pixel Sorting – TouchDesigner Tutorial 16 - YouTube
- Deeper Into Noise – TouchDesigner Tutorial 30 - YouTube
- TOUCHDESIGNER TUTORIAL - WATERCOLOR GROWTH SYSTEM - YouTube
Appendix
TouchDesigner の学習に役立ちそうな資料をまとめています。 Appendix – メディアプログラミング基礎