TouchDesigner入門 〜前編〜
こんにちは。
TouchDesignerのワークショップに参加してきたので、そこで学んだことを忘れない内に整理してまとめておこうと思います。
ちなみに、TouchDesignerとは、プロジェクションマッピングなどができる無料のソフトです。こちらからダウンロードできます。
基本的な操作など
基本的に、マウスでの操作を前提として書きます。
まず、これが立ち上げた時の画面です。初めて立ち上げた時はグミ(キャンディ?)のようなデモが表示されていますがこれは消してしまいましょう。右クリックしながらドラッグで選択、deleteです。
次に、左側にあるPaletteを消してしまいましょう。(少なくとも最初の内は)ほとんど使わないからです。
Palette ? X
のバツ印を押すと消えます。ちなみに左上の四角から矢印が出ているアイコンを押すとPaletteが出ます(カーソルを上に置くと、Open Palette と出ます)。
次に基本の操作です。
どこでもいいのでダブルクリックするか、tabキーを押すと、OP(operator) Create Dialog が出てきます。ここからオペレーターを選んで配置し、繋げていくことでいろいろなことができるようになるのです！
ちなみに、OP Creator Dialog 内では検索ができます。使いたいオペレーターの名前を入力するとそれだけ明るくなるので便利です。
各タブはオペレーターの種類ごとになっています。大まかな分類を書いておきます。
COMP 3D,UIなど Camera,Light,Geometry などはここにあります。
TOP テクスチャー(?) Render はここにあります。
CHOP 数値 VR系のもの
SOP 3D系の処理
MAT material SOPにひもづく
DAT データベース、シリアル通信
基本的に同じ色のオペレーターをつなげていく事になります。各オペレーターのパラメーター画面はPキーで表示・非表示の切り替えができます。
最後に、階層についてです。
Uキーを押すか、ズームアウトすると、上の階層にいくことができます。
実は今までこのproject1の中にいました。実際に映し出す時などは左にあるperformで調整などを行います。
このTouchDesigner自体もTouchDesignerで作られているらしく、左下のlocalの中に作られているようです(多分・・・?)
下の階層に戻るときは、Iキーを押すか、ズームインすると戻れます。
それではそろそろ実際に何か作ってみましょう！
例1 振動するパックまん
左右に振動しながら、マウスの位置によって上下にも移動する円を作ってみたいと思います。
波形の入力
TouchDesignerでは波形を入力することができます。
まず、TabキーかダブルクリックでOP Creator Dialog を出します(これ以降この記述は省略します)。そして、CHOPのLFOを選択します。
これは、Typeからsin波や三角波などの波の種類を選ぶことができます。周波数や振幅も変更できます。
次に、LFO1のオペレーターの箱の右側の穴の上にカーソルを置き、右クリックします。そして、Trailを選択します。
これで、波形を視覚的に捉えられるようになりました！
ついでに、後で円の位置に使用するので少し手を加えて、波のとる値の範囲を変更しておきましょう。
CHOPのMathを選択します。そして、LFO1の右側の穴をクリックし、そのままmath1の左の穴までドラッグします。こうすることでもオペレーターをつなぐことができます。
math1のRangeタブを選択し、
From Range -1 1
To Range -0.4 0.4
に設定します。
最後に、CHOPのnullを用意してそれと繋ぎます。
マウスの入力
次に、マウス(カーソル)の位置を入力として取得してみましょう。
CHOPのMouse In を選択します。すると、もうすでにカーソルの座標が表示されています！
今回はカーソルのy座標だけ取り出してみます。
CHOPのselectを Mouse In の後に繋ぎます。Selectタブの、Channel Namesの右の黒三角形▶︎をクリックします。そこからtyを選択します(ちなみに、直接tyと入力しても構いません)。
最後に、これも先程と同様にしてとる値の範囲を変更・nullに繋ぐという作業をしておきます。今回は
From Range -1 1
To Range -0.6 0.6
のように設定しました。
円を動かす
いよいよ円を動かす時がきました。
まず、TOPからCircle を選びます。色や角度を変えたり、Sides(これで辺の数を変えられます)を変えたりすることでぱっくマンのようにすることもできます。
Circleの後ろにTransformをつけます。Transform1のTransformタブの、Translateの左側をクリックします。
すると画像のような欄が出てくるので、水色の四角をクリックして次のように入力します。
# txの欄 op('null1')['chan1'] # tyの欄 op('null2')['ty']
ちなみに、水色の四角の欄は上のようにスクリプトを直接入力する時に使い、灰色の四角の欄は直接入力する時に使います。また、Nullを直接TransformにD&Dしても大丈夫です。
最後に、TransformからCompositeに繋ぎます (ちなみに、Transformを作らずに、CompositeのTransformに同様の入力をしても動きます)。
Composite1のTransformタブのPre-fit Overlayを、Native Resolution に設定しておきます。これは比を維持するためです。また、CompositeタブのOperationをOverに変更します。
背景をつける
ついに最後です！背景をつけます。
TOPからConstantを選びます。そして好きな色に変更し、CommonタブからResolutionを1280*720に変更します。
そしてConstant1をcomp1に繋いだら完成です！もし円が表示されていない場合は、comp1のCompositeタブのOperationがOverになっているか確認してください。
ちなみに、TOPのMovie file in を選ぶと背景を好きな画像にすることができます。
ちなみに、Hキーを押すとオペレーターの全体図を見ることができます。
出力する
最後の最後です。comp1から、TOPのOutに繋げます。これで左上の四角の中に＾のアイコンを押すと、表示されます！escキーでエスケープできます。
ここで、Uキーで上の階層に移動してperformのwindowをクリックしてみましょう。ここで色々な調整ができます。
今回は、1つだけ設定を変えてみます。Windowタブの中にある、Cursor Visible の欄をNeverにします。
こうすることで、操作していてもカーソルが表示されなくなり、よりカッコよくなります！
ヘルプやチュートリアルについて
各オペレーターのヘルプは、?を押すと公式ドキュメントに飛ぶことができます。これはそのオペレーターが持つパラメーターなどを確認するのに便利です。
また、さらに便利なものがあります。上のHelpから、Operator Snippets をクリックします。
すると、このように、そのオペレーターをどのように使うかのdemoを見ることができるのです！
また、チュートリアルは、TouchDesignerの公式Youtubeに(英語ですが)載っています。公式ホームページにも色々案内があるみたいです。
ちなみに、エラーが出た時などは、ホイールクリックでプロパティを見ることでエラー内容を確認できます。
