すだちキャンパス

すだちキャンパス

やってみたこと、学んだことなどのメモ。

TouchDesigner入門 〜後編〜

こんにちは。花粉で死んでいます。
TouchDesigner入門の後編です。

前編はこちら↓
kabos.hatenablog.jp

3次元の描画

まずは、球を作ってみます。前回は2次元の円でしたが、今回は3次元なので、ライト、カメラ、ジオメトリ、レンダラの4つが必要になってきます。
SOPからSphereを選びます。そして後ろにGeometryを繋ぎます。
そうしたらCOMPからLightとCameraを、TOPからRenderを配置します。すると自動で、geo1、cam1、light1とrender1が繋がれます。
f:id:sweetgohan:20190315150423p:plain
また、球に色をつける場合、 MATのPhongかConstantを配置します。そして好きな色を選び、ジオメトリ(geo1)にD&Dします。
Phongは光る感じ(?)になり、Constantはベタ塗りになります。
f:id:sweetgohan:20190315150749p:plain

ちなみに、球以外にも、Box(立方体)やGrid(3次元平面)などがあります。

さらに、sphere1の右下の+アイコンを押し、Viewerモードに変えた上で球の上で右クリックすると、表示を色々変更できます。
f:id:sweetgohan:20190315180445p:plain
例えば、この Toggle Shaded/Wireframe を押すとワイヤーフレームになります。(画像の表示はさらにSphereタブのPrimitive Type をPolygonに変更しています)

条件分岐

IF文のように、条件によって処理を変えることもできます。
今回は、マウスの位置によって球の大きさが変わるというものを作ってみます。

先ほど述べたように球を作ります。
次に、マウスの座標を取得します。前編の復習ですね。
CHOPの、Mouse In - Select を選択して繋ぎます。

f:id:sweetgohan:20190315145524p:plain
X座標を選びました

ではいよいよ条件分岐です。
Selectの後に、CHOPのExpressionを置きます。そしてExpoタブの、Expression1の左側をクリックすると、me.inputValと入った欄が出てくると思います。ここに条件を書きます。me.inputVal が得られた入力値です。
f:id:sweetgohan:20190315151950p:plain
ここでは

 -1 <= me.inputVal < -0.5

としてみました。これは、マウスが左端の方にある時のことを表しています。
Expressionは、指定された条件式に対して1か0で返します。この時試しに左側にカーソルを持って行ってみて、1 tx となっていたら大丈夫です。

それでは、この条件に対する処理を書いていきましょう。
express1の後ろに、DATのCHOP Execute を置きます。chop exec1のCHOP Executeのタブの下の方にあるValue Change をオフにして、Off to On をオンにしましょう。これは、前述のようにExpressionが1か0で返すためです。
f:id:sweetgohan:20190315154308p:plain
そして、下にあるEditを押します。すると、スクリプトエディタが起動します。
コメントアウトが終わった最初の行の下( def onOffToOn(channel, sampleIndex, val, prev): の下 )に、次のスクリプトを記述しましょう。

def onOffToOn(channel, sampleIndex, val, prev):
	op('sphere1').par.radx = 0.1
	op('sphere1').par.rady = 0.1
	op('sphere1').par.radz = 0.1
	return

Pythonなのでタブ(空白)に気をつけましょう。スクリプトが書けたら保存します。

そしてカーソルを動かしてみて球の大きさが変わったら成功です!
これを複数個書いたら色々な条件に対応できます。

f:id:sweetgohan:20190315154701p:plain
ここまでの様子

UI

さて、TouchDesignerではUIを作ることもできます。今回はボタンとスライダーで背景を変えるものを作ってみます。

先に背景を作って置きます。前回はConstant(もしくはMovie File In)で作りましたが、今回はグラデーション+切り替え用のオペレーターで作ります。
まずはグラデーションを3種類用意します。TOPのRampを選択し、ramp1,2,3のCommonタブのResolutionを1280*720にします。そして好きな色を選択します。できたら、その3つをTOPのSwitchに繋ぎます。そしてCompositionオペレータを用意してrender(先ほど作った、球を描画しているもの等)と合わせて繋ぎます。

それではボタンを設置してみます。COMPのButtonを選択します。そこからCHOPのNullに繋ぎ、NullからCountに繋ぎます。今回は3種類あるので、Countで0〜2の値をとってそれをswitch1に送ることにします。
count1のCountタブから、LimitをLoop Min/Maxに設定し、Limit Maximum を2にします。
f:id:sweetgohan:20190315171854p:plain

これでほぼ準備完了です。あとはこのCountの値をSwitchに送るだけです。最初に用意したswitch1のSwitchタブのIndexの左端をクリックします。そして真ん中の水色の四角を押して、

op('count1')['v1']

と入力します。
f:id:sweetgohan:20190315173412p:plain
そしてButtonの右下の+アイコンを押してボタンをクリックしてみると、背景が変わると思います!

f:id:sweetgohan:20190315174417p:plain
赤い四角のところを押します
f:id:sweetgohan:20190315174437p:plain
こうなるとボタンが押せるようになります

スライダーも同じ要領で作れます。COMPのSliderを選択します。後ろにNullを繋げ、今度はCountの代わりにMathを繋げます。
そして、
From Range 0 1
To Range 0 2
に設定し、switch1のindexの欄を次のように書き換えます。

op('math1')['v1']

最後に、ボタンと同様にスライダーも右下の+アイコンをクリックして操作できる状態にし、動かしてみると背景が変わると思います。

ここまででできたもの


Pythonを使う

今までも少し扱っていましたが、ここではPythonスクリプトをどう組み込むかについて説明します。
DATのTextを選択します。そしてFileタブのEditを押すと、スクリプトエディタに移動します。
ここに色々書くことでPythonを使うことができます。実行するときはオペレータの上で右クリックして Run Script (もしくはcmd+R)します。もしくはボタンを作って Button -> Null -> CHOP Execute と繋ぎ、CHOP Executeに

def onOffToOn(channel, sampleIndex, val, prev):
	op('text1').run()
	return

と記述することでボタンで実行できるようになります。CHOP Executeは条件分岐の項で扱ったのと同じです。
また、変数はCHOPのConstantで扱うことができます。あるConstantに変数を代入する時は、

op('constant1').par.value0 = 10

のように書けます。
ここで少しスクリプトの意味についてまとめておきたいと思います。この後使うものも載せてあります。

# hogeの参照
op('hoge')

#hogeのパラメータの参照
#パラメータの名前(radx等)はドキュメントに載っています
op('hoge').par.nyanko

#hogeオペレータのchan1の値を取得
op('hoge')['chan1']

#総フレーム数
absTime.frame

#タイムライン一周分のフレーム数
me.time.frame

実用編へ続く

思ったより長くなってしまったのでまた次の記事に続きたいと思います(前中後に分ければよかった)。
今回までで基本的な操作については書けたと思うので、次回(最後の予定)はもう少し「いかにもプロジェクションマッピング感」があるものについて書きたいと思います。
具体的にはパーティクルや音の出入力、LeapMotionとの接続などについてですね。

参考記事

qiita.com