TouchDesignerでモテるデザイナーになろう

こんにちは〜。

user-avatar

チームの中ではデザインを担当している、つまり「Designer」の佐藤です。
「Designer」ってモテそうな言葉だと思いませんか?

ただし諸刃の剣で、実力が無い私がこの言葉を乱用すると、モテるどころか失笑を買い、
最後には人格を攻撃され、生まれてきたことを後悔すことになるので自分でデザイナーを名乗ることはありません。

今回は私と違いモテそうなDesignerを紹介したいと思います。
とはいっても、人ではなく「TouchDesigner」というツールです。

以前から気になっていましたが、Windows版しかなく利用する機会がなかったのですが、今年Mac版もリリースされた為最近使い出しました。

TouchDesignerとは

TouchDesignerはノードベース(線をつなげてプログラミングする)ビジュアルプログラミング言語です。

プログラミング言語ですが、ノードベースの為プログラミングが書けなくても使えます。
むしろ私のように、プログラミングがゴリゴリ書けない人にオススメなのかもしれません。

TouchDesignerはオーディオビジュアルやインタラクティブなデジタルアートなどで利用されており、
映像表現に強いと言われており、MUTEKなどのイベントでも利用されているようです。

windows、Mac共に無料で利用できます。

 

TouchDesignerを使ってみる

では実際に使ってみようと思います。

私自身も最近使いだしたばかりでスーパー初心者ですので、間違っていたらコメントいただけるとありがたいです。

 

インストール

TouchDesignerを開発しているDerivative社のこちらのページからダウンロードできます。

20170830_1

※Mac版の場合一部利用できない機能があるようです。

 

インストールが完了して、起動するとこんな感じの画面が立ち上がります。

20170830_2

 

オペレータの種類

TouchDesignerはオペレーターと呼ばれるコンポーネントをつなげていくことで様々な表現を作れます。
オペレーターの作成用のウィンドウは、【TABキー】もしくは、【左ダブルクリック】で表示されます。

20170830_3

 

オペレーターは以下の6種類があります。
それぞれオペレータによって役割が異なります。これらを上手く組み合わせて絵を作っていきます。

20170830_10

 

動画を読み込んで見る

まずは動画を読み込んでみます。
動画は2次元データなのでTOPオペレータを使います。

オペレーターの作成用のウィンドウを立ち上げて【MovieFileIn TOP】を選択します。

MovieFileIn TOP作成すると、下の画像のようにみんな大好きバナナの画像が初期値として設定されています。

20170830_4

 

他の画像や動画を読み込みたい場合はオペレータプロパティの【File】から読み込みたいファイルを選択します。

20170830_5

 

色を変化させてみる①

色を変化させる為に【HSV Adjust TOP】を使います。

オペレーターのつなぎ方は下のような感じになります。
最後にNull TOPにつなぐのは最終的なアウトプットを確認する為にです。Null TOP自体は何のプロパティも持ちません。

白黒にして見るため、彩度(Saturation)の値を0に設定します。

20170830_6

 

色を変化させてみる②

CHOPオペレータを利用して、動画の色を変化させてみたいと思います。

【Beat CHOP】を使って一定周期で値を生成します。この生成した値を、RGBAチャンネル加工用のオペレーターである、【Channel Mix TOPに】設定します。
ただし、Beat CHOPで生成される値は、マイナス値にもなる為、計算用のオペレーター【Math CHOP】を利用して、必ずプラスの値になるように制御します。

20170830_7

 

 

3Dオブジェクトを使ってみる

SOPオペレータを使うことで、3Dオブジェクトも手軽に扱うことができます。
3Dオブジェクトを使う場合は【Geometry COMP】でラップすることをオススメします。

Geometry COMPを【Render TOP】でレンダリングすることで2Dオブジェクトとして扱うことができ便利です。
また、Null SOPオペレータの右下にあるdisplay、renderフラグをONしないと、レンダリングされないので注意して下さい。

Render TOPを利用する場合は、【Camera COMP】と【Light COMP】も追加してください。

20170830_8

 

Sphere SOPで球体を作成し、各頂点をランダムに動かすことができる【Noise SOP】につなげるだけで、面白い表現ができます。
3Dぽさを出すためにワイヤーフレーム表示のテクスチャを設定してみました。

20170830_9

 

 

パーティクルをやってみる

最後にもう少し複雑なものに挑戦してみようと思います。

わかりやすくかっこいいのがパーティクルだと思うので、パーティクルに挑戦です!

チュートリアルを見ながらやってみました。

このような事例なら、私のような初心者でも、チュートリアルを頼りにある程度簡単にできると思います。

 

まとめ

オペレータの数が2~3個でもなかなかおもしろい表現が簡単につくれます。
しかもプログラムは一切書いていません。なんて便利なのでしょうか!

各オペレータのプロパティの意味を理解していなくても、適当に動かすことで面白い表現ができるのでぜひ使ってみて下さい〜。

SNSでもご購読できます。