#はじめに
はじめてTouchDesignerを触る人が最初の30分でなんとなく面白さを感じれたらいいな、という趣旨の記事です。
というか30分の初心者向け勉強会の資料です。
故にわかりやすさと速度重視になっています。
非エンジニア、非デザイナーだとしても面白さの一端が感じ取れたら幸いです。
##インストール
今回作成するプロジェクトはこちらです。(https://github.com/tsumikiroom/TouchDesignerSimplemotion.git)
TouchDesignerをまだインストールしてない人は(https://qiita.com/nagaiwa_jp/items/e5a476b0eb9b0dcfaa7e)の記事を参考にしてみてください。
####用意するもの
・TouchDesignerがインストールされたPC
・ノートの場合はACアダプタ
・マウス（トラックパッドはNG）
・マイク
##たちあげる
ビギナーも玄人も個人ワークも大型プロジェクトも等しくたちあげるところから始まります。
まずはインストールしたアプリをたちあげてください。
そしてたちあげるとこんなレイアウトになります。
すでにノードがいくつか置かれてたり、左側にPalletteと書かれたウィンドウが開いていたり、右側になにやらポップアップが出ています。
それらをすべて消します。
####消し方
・Paletteは「☒」ボタンを押す
・ノードは右クリックしながらドラッグで矩形選択して"Delete"
・右側のポップアップは"P"
何もなくなりました。
ここからすべてが始まります。
##オペレーターを置いてみる
今ウインドウ上にはほとんど何もありません。
ウインドウの上下にちょっとだけGUIがありますが今回は使わないので覚えません。
TouchDesignerはノードのことをオペレーター（OP）と言います。
何もない空間にオペレーターを置いてみます。
####オペレーターの置き方
1."Tab"を押す または スクリーン上を左ダブルクリック
2.すると"OP Create Dialog"というポップアップウインドウが出る
3.たくさんのOP名が並んでいるので置きたいOP名を探して押す
sphere OP(SOP)というオペレーターを選択してみました。
####オペレーターの見え方を変更してみる
このオペレーターの右下にある「＋」(ショートカットA)を押すとオペレーターの見え方を変更できるようになります。
・回転 / 左クリック＋ドラッグ
・パン / 右クリック＋ドラッグ
・ズーム / 中クリック＋ドラッグ
・ワイヤーフレーム表示 / W
・カメラ位置を戻す / H
####オペレーターの色分けについて
オペレーターを選ぶときに色分けされていることに気付いたと思いますが、
オペレーターは役割ごとに色が割り当てられています。
COMP / カメラやライトなど
TOP / 画像(2D)
CHOP / 数値
SOP / 3D
MAT / マテリアル
DAT / スクリプト
Custom / 自作OP
ざっくりこんな認識で理解しておけばとりあえずOKです。
基本的には同じ色のオペレーター同士をつないでネットワークを構築していきます。
色が違うオペレーターは原則つなぐことができません。
####オペレーター同士をつないでみる
Sphere(SOP)オペレーター以外にNoise(SOP)オペレーターを画面内に置いてみてください。
NoiseはSOP以外のものも存在しますが、SphereがSOPなのでSOPの中にあるNoiseオペレーターを置いてみてください。
置いたら下の動画を参考にしてオペレーター同士をつないでみましょう。
Sphere(SOP)がぐにゃぐにゃと動きだしたと思います。
TouchDesignerはこんな具合にオペレーターをどんどんつないで仕組みを作っていくツールです。
以上を踏まえてシンプルなプロジェクトを作ってみましょう。
##実践してみる
マイクの音を拾って反応するグラフィックを作ってみましょう。
プロジェクトファイルはこちらから
→(https://github.com/tsumikiroom/TouchDesignerSimplemotion.git)
基本的なオペレーターをつなぐだけで作成できます。
https://www.youtube.com/watch?v=cD3PJsYztMQ
こちらが完成したネットワークの全体図です。
赤く囲んだところが最終的に完成したビジュアルのオペレーターになります。
ちょっと込み入っていて難しそうに感じるかもしれませんが、慣れると10分くらいで作れるようになります。
####使用するオペレーター
geometry COMP
camera COMP
render TOP
over TOP
constant TOP
math CHOP
lag CHOP
audio device in CHOP
analyze CHOP
SOP to CHOP
sphere SOP
box SOP
poly reduce SOP
noise SOP
transform SOP
chop to SOP
constant MAT
これ以外にところどころnullというオペレーターが使われていますが、これは何も処理しないオペレーターです。
###実践その1─ボックスを複製する
まずは複製元のボックスを作ります。
**1.**box SOPを作成し、Scaleを0.1にします。
**2.**box SOPのOUT(右側の接続口)を右クリックしてgeometry COMPを作成します。
geometry COMPはSOPを複製したり、マテリアルを設定してレンダリングするためのオペレーターです。
次に複製先の基準となる球体を作ります。
**3.**sphere SOPを作成し、SphereタブのPremitive TypeをPolygonに、DetailタブのFrequencyを3に変更します。
**4.**sphere SOPにnull SOPを接続します。
**5.**null SOPのOUT(右側の接続口)を右クリックしてSOP to CHOPを作成します。するとnull SOPとSOP to CHOPが点線矢印でつながります。
**6.**SOP to CHOPとnull CHOPを接続します。
ボックスを球体の形状で複製します。
7. **"2"**で作成したgeometry COMPのInstancingタブにあるInstancingをOnにします。
**8.同タブ内のTranslate OPに"6."**で作成したnull CHOPをドラッグ＆ドロップします。
**9.**transrateX,transrateY,transrateZにそれぞれtx,ty,tzと打ち込みます。
**10.**球体の頂点を基準にボックスが配置されました。
###実践その2─レンダリングする
カメラでボックスをレンダリングする
**1.**camera COMPとrender TOPを作成すると、geometry COMPとcamera COMPが点線矢印で接続され、render TOPにレンダリング結果が表示されます。
**2.**constant MATを作成し、ConstantタブのColorを黒にします。
**3.geometry COMPのRenderタブを開いてMaterialに"2."**のconstant MATをドラッグ＆ドロップします。
カメラの設定を変更する
**4.**camera COMPのViewタブを開いてProjectionをOrthographic(平行投影)にします。
**5.**Ortho Widthを4にします。
**6.**XformタブのTranslateを0,0,15にします。
背景をつける
**7.**over TOPとconstant TOPを作成し、render TOPをinput(オペレーターの左側の口)の上に、constant TOPを下に接続します。
**8.**over TOPのTransformタブにあるFixed LayerをInput1に変更します。
###実践その3─SOPを追加する
ノイズアニメーションを追加する
**1.**spere SOPとnull SOPの間にpolyreduce SOPを挿し、Reduceタブを開いてKeep%を60にします。
**2.**polyreduce SOPの次にnoise SOPを追加し、NoiseタブのAmplitudeを3にします。
**3.**noise SOPの次にtransform SOPを追加し、TransformタブのRotateの3項目に「 absTime.seconds*50 」と入力します。
ボックス同士をつなぐラインを追加する
**1.**null CHOPのoutを右クリックしてCHOP to SOPを追加して、その先にさらにnull SOPを接続します。
**2.**null SOPのoutを右クリックしてgeometry COMPを追加します。
ラインにマテリアルを設定する
**3.constant MATを作成して"2."**で作成したgeometry COMPのRenderタブのMaterialにドラッグ＆ドロップします。
**4.**constant MATのConstantタブ内にあるColorを黒にします。
**5.**constant MATのCommonタブ内にあるWire FrameをOpenGL Tesselated Wire Frameに変更します。
**6.**constant MATのCommonタブ内にあるLine Widthを3.35に変更します。
###実践その4─マイク入力のインタラクションを追加する
音声を入力する
**1.**audio device in CHOPを作成して、Audio Device InタブのDeviceを任意のデバイスに設定します。
**2.**analyze CHOPを作成してaudio device in CHOPと接続し、AnalyzeタブのFunctionをMaximumに変更します。
**3.**analyze CHOPの次にnull CHOPを接続します。
音声でアニメーションさせる
**4.**SOP to CHOPとnull CHOPの間にmath CHOPを挿します。
5. **"3."**で作った方のnull CHOPの右下にある[＋]ボタンを押すとViewがActiveになり、マウスオーバーで色が変わるようになります。
**6.**マウスオーバー状態からにしてからmath CHOPのMult-AddタブにあるMultiplyにドラッグ＆ドロップします。
**7.**ドロップするとポップアップが表示されるのでCHOP Referenceを選びます。
アニメーションを調整する
**8.**analyze CHOPとnull CHOPの間にlag CHOPを挿します。
**9.**lag CHOPのLagタブにあるLagを0.2,0.4 Overshootを0.1,0.1にします。
**10.**lag CHOPとnull CHOPの間にMath CHOPを挿します。
**11.**Mult-AddタブにあるMultiplyを20に変更します。
###完成！
マイクの感度によって動きが変わってくるので、動きを見ながらアニメーションの調整をしてみてください。
またこの作りだとノイズもそのまま拾ってしまうので、そのあたりどのように改善したら良いか考えてみても面白いかもしれません。
制作フローの動画はこちら (https://www.youtube.com/watch?v=-rvlObJoDv4)
#もう少し学習を深めたい人へ
初心者向けおすすめ記事の紹介です。
TouchDesignerの基本操作 / オペレータの操作
この記事ではだいぶすっ飛ばしてしまいましたがオペレーターの基本操作はとりあえず知っておいたほうがいいです。
[課題]アナログ時計を作る
ベーシックな課題。
TouchDesignerを勉強する時に参考になるサイトまとめ
多くのビギナーがこの記事から始めてるんじゃないかと思います。