TouchDesignerの基本操作 / オペレータの操作

TouchDesignerにおける開発とは要するにオペレータを作りオペレータを調整しオペレータを繋ぐことです。実際に触りながらやってみましょう。

下準備

まずは画面にあるオペレータを全て削除しましょう。

オペレータの全選択
キーボード(Mac) : Commando + A
キーボード(Windows) : Ctrl + A
マウス : 右ボタンドラッグで全てのオペレータを選択

削除はキーボードのDeleteキー、あるいは右クリックで現れるメニューの中のDelete項目をクリックで実行されます。

オペレータの削除(オペレータを1つ以上選択した状態で)
キーボード(Mac) :  DelもしくはBackspace
キーボード(Windows) : DelもしくはBackspace
マウス : 右ボタンメニューでDeleteを選択

画像1

画像2

TouchDesigner 2020.20625_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe 2020_03_20 16_45_22

オペレータを作る

次に実際にオペレータを置いてみましょう。

OP Create Dialogの呼び出し方
キーボード(Mac) : Tab
キーボード(Windows) : Tab
マウス : ダブルクリック

画像3

また、OPはCOMP、TOP、CHOP、SOP、MAT、DAT、Customと大きく7種類のOPがあります。タブで切替えが可能です。

OP Create DialogのTab切替え
キーボード(Mac) : Tab
キーボード(Windows) : Tab
マウス : 各タブをクリック

では、実際に一つ置いてみましょう。今回はCHOPタブの中にあるLFO CHOPというものを使います。

OPの種類と使いどころは別のところで詳しく説明しますが、今はCHOPは数字を扱うオペレータだ、と漠然と思っていただければ充分です。

OP Create Dialogを呼び出し、CHOPタブを選択し、その中にある『LFO』とかかれたものをクリックしてLFO CHOPを選択します。OPはアルファベット順に並んでおり、LFO CHOPは真ん中あたりにあります。

選択するとOP Create Dialogが閉じて、どこにオペレータを置くか指定する画面になります。適当なところでクリックを押すと、LFO CHOPが画面(Network Editorと言います)に設置されます。

TouchDesigner 2020.20625_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe_ 2020_03_20 16_14_02

また、別のやり方としてLFO CHOPをキーボードで検索・指定する方法もあります。

OP Create Dialogを呼び出したらCHOPタブに移動し、『LFO』とキーボードで打ち込んでみましょう。

画像5

すると、OP Create Dialogにある沢山のCHOPの中でLFO CHOPだけがハイライトされ、残りがグレイアウトされているかと思います。

画像6

その状態でEnterキーを押すと、さっきと同様にオペレータの設置画面に移ります。

オペレータの設置手順1
1. OP Create Dialogを呼び出す
2. Tabを切り替える
3. 設置したいオペレータを探してクリック
4. 設置したい場所でクリック
オペレータの設置手順2
1. OP Create Dialogを呼び出す
2. Tabを切り替える
3. 設置したいオペレータの名前をキーボードで打ち込み、クリック
4. 設置したい場所でクリック

値が左右に動いているのが判るでしょうか。TouchDesignerでは常に値が更新されています

ダウンロード

もし動いていない人が居たら一時停止をしている可能性が高いです。スペースキー(キーボード下部の横長のでかいキー)を押すか、GUI上の再生ボタンを押してください。

TouchDesigner 2020.20625_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe_ 2020_03_20 16_29_29

TouchDesignerプロジェクトの再生/停止
キーボード(Mac) : Spaceキー
キーボード(Windows) : Spaceキー
マウス : GUI下部の一時停止ボタンもしくは再生ボタンをクリック

オペレータを調整する

LFO CHOP内では数字が-1と1の間を往復していると思います。LFO CHOPのLFOはLow Frequency Oscilatorの略で、要するに周期性のある数値の動きを作るオペレータです。

LFO CHOPはこれ以外にもさまざまな周期性のある数字を作ることができます。Network Editorに設置したLFO CHOPをクリックし、右上にあるパラメータを見てください。

TouchDesigner 2020.20625_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe 2020_03_20 16_59_09

さまざまな数値が並んでますが、まずはTypeという項目にあるSineをクリックして、Squareに変えてみてください。LFO CHOPの数字のアニメーションが変わったのが判るでしょうか?

ダウンロード (2)

-1と1をカチッカチッと行き来する動きになっているかと思います。次にFrequencyという項目(最初は1が入っていると思います)を半分の0.5にしてみましょう。操作方法は3つあります。

操作方法1は非常に判りやすいですが、スライダが出ていないパラメータも多いので常にこのやり方ができるわけではありません。

画像12

パラメータの操作方法1
GUIにある右側のスライダを左ボタンドラッグで操作する

操作方法2は一番よく使うのではないでしょうか。数字が表示されているところをクリックし、キーボードで直接数値を打ち込みます。

画像13

パラメータの操作方法2
数字の入ったテキストフィールドに数字を入力する

操作方法3は非常に独特ですが、値の微調整や良い値が判らない時に便利です。Houdiniなどでも使われている操作方法なので覚えておいて損はないでしょう。

ダウンロード (3)

パラメータの操作方法3
1. 数字の入ったテキストフィールドをマウスの中ボタンでクリック
2. 中ボタンを押したまま上下でピッチを選ぶ
3. 中ボタンを押したまま右にドラッグで増加、左にドラッグで減少

Frequencyを0.5にすると往復運動のスピードが半分になったのが判るでしょうか。

ダウンロード (4)

オペレータはこのようにオペレータ単体でもパラメータを使うことで様々な数値や数値の動きを出力することができます。パラメータは隠すこともできます。

パラメータの表示/非表示切り替え
キーボード(Mac) :  pキー
キーボード(Windows) : pキー
マウス : 右ボタンメニューでParametersを選択(別ウィンドウ)

オペレータ同士を繋ぐ(Connection)

次はオペレータ同士を繋いでみましょう。まずはもうひとつオペレータを用意します。今回はLag CHOPを使用します。先ほどLFO CHOPを用意したのと同じ手順で準備してみてください。そしてLFO CHOPの横に設置しましょう。

TouchDesigner 2020.20625_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe 2020_03_20 17_54_57

Lag CHOPはLFO CHOPと違い、オペレータの中に何もなく、真っ黒です。しかも右上にエラー表示のXが表示されています。Xを左ボタンクリックするとエラーの理由が表示されます。

TouchDesigner 2020.20625_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe 2020_03_20 17_56_50

”Error: Not enough sources specified (/project1/lag1)”と表示されています。日本語に訳すと『入力が充分にされていない』と言っています。

オペレータにはLFO CHOPのように値を生成するオペレータとLag CHOPのように値を加工するオペレータがあり、後者は他のオペレータから数字の入力がないと正常に動作しません。

なのでLFO CHOPの値をLag CHOPに入れてあげましょう。

まずはLFO CHOPの右側小さく溝があるあたりを左ボタンクリックし、ドラッグします。

画像18

そうするとその溝からマウスまでの間に緑色の紐が表示されます。その紐をLag CHOPの左上の溝に差し込みます(左下ではないので注意してください)。

画像19

そうするとLFO CHOPとLag CHOPが緑の線で繋がります。そしてLFO CHOPで作ったオペレータ内に表示されている値がLag CHOPにも入力され、表示されるようになります。エラー表示も消えます。

TouchDesigner 2020.20625_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe 2020_03_20 18_05_10

Lag CHOPは値の変化を滑らかにするオペレータです。LFO CHOPのカチカチとした、中間の値のない数値の変化がLag CHOPで加工され、少し遅延があり、なだからに変化する値に変わっていると思います。

ダウンロード (5)

折角なのでもう一つ繋ぎましょう。今度はNull CHOPを使います。さっきとは違う方法でオペレータを作ります。Lag CHOPの右側の溝を右クリックしてください。

画像22

そうするとOP Create Dialogが立ち上がります。Null CHOPを選ぶと、入力と出力の溝が繋がった状態でオペレータが生成・設置されました。

TouchDesigner 2020.20625_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe 2020_03_20 18_21_40

このように既に繋ぎたいノードが決まっている場合はこちらの手順のほうがわざわざ繋ぐ手間が省けて便利です。このようにオペレータには左側に入力のための接続口(入力と言います)が、右側には出力のための接続口(出力と言います)があります出力同士、入力同士を繋げることはできません

オペレータのつなげ方
繋ぎ合わせたい入力と出力を左ボタンドラッグで繋げる
オペレータを作りつつ繋げる方法
1. 入力もしくは出力を右クリック
2. OP Create Dialogが出るので作ってつなげたいオペレータをクリック

なので通常、TouchDesignerでプログラムを組み始めると、どんどん左から右へノードが伸びていき、オペレータの数が増えていくということになります。

今回設置したNull CHOPは何もしないオペレータです。『何もしないオペレータに何の意味があるの?』と思うでしょうが、次の章でNull CHOPの必要性を説明します。

オペレータ同士を繋ぐ(Expression)

先ほどまではCHOPを使っていましたが、今度はTOPを使ってみましょう。

OP Create DialogからRectangle TOPを選んでください。白い四角が表示されたオペレータが設置されます。

TouchDesigner 2020.20625_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe 2020_03_20 19_24_52

TOPは2Dの画像、動画などを取り扱うオペレータです。Rectangle TOPは四角を描画するオペレータで色や形、回転などを操作できます。実際にSizeなどを変えてみてください。

また、Sizeには四角の縦幅を決める数値と横幅を決める数値が両方並んでいると思います。その2つを同時に操作したい場合、先ほどのパラメータの操作方法3をSizeというパラメータ名に対して行うことで、複数の数値を一度に操作することができます

ダウンロード (6)

では次にこのRectangle TOPでできた四角をアニメーションさせます。しかしTouchDesignerの基本的なルールとして、ジャンルの異なるオペレータ同士の入出力を接続することができません。TOPはTOP同士、CHOPはCHOP同士でしか接続できないのです。

今回のRectangle TOPであればSizeの値やRotateの回転角度などの値をLag CHOPの値のように動的に変化させることができればアニメーションしそうですよね。

このような場合、TouchDesignerではExpression(エクスプレッション)という繋ぎ方をすることで解決します。まず、Lag CHOPの右下にある十字のボタンをクリックします。するとLag CHOPの見た目が変わります。

画像26

画像27

そうするとLag CHOPの中の値が選択可能になります。それを左ボタンでドラッグしてRectangle TOPのSizeの sizexに持って行ってみましょう。

ダウンロード (7)

ドラッグを離すと小さなダイアログが出てきてどの形式でコピーするのか聞かれます。"Cancel"は文字通りのキャンセルで、"Current CHOP Value"は直近の数値そのものをコピーします。

今回のように変化する値に同期させたい場合は"Export CHOP"か"CHOP Reference"を選ぶ必要があります。が、今後のことを考えると"CHOP Reference"のほうが色々と調整しやすいのでとりあえず"CHOP Reference"を選ぶようにしておくのがおすすめです。

画像29

これによってLag CHOPで加工したパラメータでRectangle TOPの横幅がアニメーションするようになりました。

Expressionの繋ぎ方
1. 各オペレータ右下の十字のボタンをクリックし、Viewer Activeにする
2. 値を左クリックでドラッグし、Expressionで繋ぎたいパラメータの上で左ボタンをリリースする
3. 出てきたダイアログで"Export CHOP" か "CHOP Reference"を選ぶ("CHOP Referenceがおすすめ")

横だけじゃなくて縦も一緒に動かして、正方形が拡大縮小しているようなアニメーションにしましょう。先ほどの操作をsizeyに対して行っても良いですが、Sizeという項目自体にドラッグするとsizexとsizey両方に同じ値が代入されます。

ダウンロード (8)

四角のアニメーションが動きましたが、Lagから出た-1から1の動きを0から1の動きにしたくなってきました。なのでLagの値をマッピングして0から1にするために、Math CHOPとLag CHOPの後に追加します。

まず、Null CHOPを動かしてスペースを空けます。

TouchDesigner 2020.20625_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe_ 2020_03_20 20_12_45

そしたらLag CHOPとNull CHOPの間の緑色の紐(ノード)を右クリックします。そうするとウィンドウが出てきます。

TouchDesigner 2020.20625_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe_ 2020_03_20 20_14_35 (2)

ここで"Insert Operator"を選び、その後出てくるOP Create DialogでMath CHOPを選びます。そうすると入力はLag CHOPに、出力はNull CHOPに繋がったMath CHOPが設置されます。

TouchDesigner 2020.20625_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe_ 2020_03_20 20_17_48

次にMath CHOPのパラメータの中にあるRangeタブをクリックし、

TouchDesigner 2020.20625_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe_ 2020_03_20 20_17_48 (2)

-1から1の値を0から1にマッピングするように設定します。

TouchDesigner 2020.20625_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe_ 2020_03_20 20_20_37 (2)

これで-1から1ではなく、0から1に変化する値が作れました。

ただし、Rectangle TOPはLag CHOPの値とExpressionで繋がっているため、Lag CHOPの後に入れたMath CHOPの処理はアニメーションに繁栄されません。

Math CHOPをExpressionしなおしても良いのですが、ここでNull CHOPを使っておくと便利です。Null CHOPからのExpressionにしておくと、それまでのノードにどんなパッチが足されても、あるいは減らされてもExpressionを繋ぎ直す必要がありません。パッチを足す度にExpressionし直すのは非常に面倒なので、Expressionで繋ぐ際には必ずNull CHOPを挟むようにしておくと良いでしょう。

ダウンロード (9)


この記事が気に入ったらサポートをしてみませんか?