Edited at

TouchDesignerで扱う色のいろいろとAdobeのこと


はじめに

普段はデザインや、Webをしてます。

TouchDesignerについてはTDSWのみんなでちょっと触ってる人です。

アドカレではみなさんがきっと難しいことを書いてくださるので、

私はTouch触り始めたばっかりの方の参考になるようにがんばります!


TouchDesignerで色を扱う時の豆知識や見落としポイント

今回はTouchDesignerで色を扱う際に、実はこんなことができる!だったり、

初心者の頃自分が躓いたポイントをまとめていきます。

カラーサークルもつくってみます。

最後にPhotoshop in TOPについて少し触ってみたのでまとめます。


1.Ramp のパラメーターはRGBに変更できる

ほんとに基礎的なことで意外と見落としてるポイントでした!

実はRamp TOPのパラメーター、デフォルトでは Hue Sat Value AlphaになっているのですがRGBに変更できるんです!


2.Rampのピンは上に出せば消える

こちらもめちゃめちゃ基本なんですが…割と最近まで知りませんでした。

実はAdobeと同じでピンを上に引っ張れば消えるんです。


3.Rampで周りが透明な丸いグラデーションを作る

すごく簡単な事なのですが、これ、最初すごく苦戦しました…

Extend LeftがデフォルトではRepeatになっているのですが、ここをzeroにしてあげると、グラデーションが繰り返されず、周りが透明なものになります!


4.簡単にカラーサークルや、カラーマップが作れる

Ramp TOP 2つと Reorder Top と HSV to RGB Topがあれば簡単にカラーサークルやカラーマップが作れるんです。

こちらはMutekの初級コースでも少し触れていたことですが少し詳しく調べてみました。

こんな感じのものが簡単に作れます。

オペレータの名称     
機能

Ramp TOP
グラデーションを作成する

reorder TOP
RGBA出力に対してそれぞれに、inputチャンネルのいずれかを選び、割り当てることできる

HSV to RGB
HSVで入ってきた数値をRGBに変換する

null TOP
お約束です

Ramp TOP

そのままです!グラデーションが作れます!

Reorder TOP

4つinputがあり、どのinputのRGBAどの値を使用するか選択できます。

そこで選んだ数値がOutputのRGBAそれぞれに変換されて出力されます。

例えばRamp TOPでRGBAのRedを1にして、input1に繋ぎます、

reorder TOPのOutput Greenのパラメータを input1 Redにすると、

RedがGreenに変換されて出力されます。




この際Output Redにもinput1のRedが割り当てられてると色が変わってしまいます

HSV to RGB TOP

お名前のままです。

HSVで入力された数値をRGBに変換してくれます。

ただ公式wikiをみてみると、少し重いかも…との記載がありました。

null TOP

この子は特に機能がないオペレータですが、お約束なので末に置いてあげます


5.noise TOPからランダムで一色を取り出し続ける

オペレータの名称     
機能

noise TOP
noiseをつくる

constant TOP
色のついたただの平面

top to Chop
TOPをCHOPに変換する

null TOP
お約束です

noise TOP

解像度を 1px × 1pxにして、ノイズの中の1色だけを取り出しました。

パラメータNoiseのmonochromeがデフォルトではonになっていますがoffにするとカラフルなnoiseになります。

パラメータTransformのTransrate>tzに`absTime.seconds * 0.1と打ち込みます。

Constant TOP

今回はTop to chopでできた値を参照して色をつけました。

それぞれ、RをRに、GをGに、BをBに参照させてください。

Top to Chop

noise TOPでできた色を数値化しています。


6.Photoshop in TOPについて

そもそもみなさまご存知でしたでしょうか…私は最近まで知りませんでした…

機能としては、photoshop側での写真編集がリアルタイムでTouchDesignerに反映されるという感じでした。

Photoshopのセットアップ

TouchDesignerからPhotoshopに接続するには、Photoshopアプリケーション上でリモート接続を設定しなければなりません。

1,Photoshopでファイルを開きます。

2,メニュー > 編集 > リモート接続

3,ダイアログで、サービス名とパスワードを入力します。

4,[ リモート接続を有効にする] チェックボックスをオンにします。

5,PhotoshopがTouchDesignerに接続する準備ができました。

photoshop in TOPのパラメータについては公式wikiをご覧ください

photoshop in TOP

触ってみた感想は、同じ部屋などでデザイナーとエンジニアが一緒に作業してる際、ファイルの受け渡しがいちいち不要になることがメリットかなと思いました。

ですが透過は反映されないなど、少し気になる点もあったので、実用性は低いかなと感じました。


おしまいに

文章を書くのが苦手なのでわかりにくい箇所などあるかと思います…すみません。

鳴海さん小原くん別所さんでTouchDesigner Study WeekendというTouchDesignerの勉強会を東京中心に開催しています!

興味がある方はぜひ遊びにきてください!

TouchDesigner Study Weekend

ありがとうございました!