LoginSignup
20
8

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-10

はじめに

普段はデザインや、Webをしてます。
TouchDesignerについてはTDSWのみんなでちょっと触ってる人です。
アドカレではみなさんがきっと難しいことを書いてくださるので、
私はTouch触り始めたばっかりの方の参考になるようにがんばります!

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

今回はTouchDesignerで色を扱う際に、実はこんなことができる!だったり、
初心者の頃自分が躓いたポイントをまとめていきます。
カラーサークルもつくってみます。
最後にPhotoshop in TOPについて少し触ってみたのでまとめます。

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

ほんとに基礎的なことで意外と見落としてるポイントでした!
実はRamp TOPのパラメーター、デフォルトでは Hue Sat Value AlphaになっているのですがRGBに変更できるんです!
01 (1).gif

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

こちらもめちゃめちゃ基本なんですが…割と最近まで知りませんでした。
実はAdobeと同じでピンを上に引っ張れば消えるんです。
004.gif

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

すごく簡単な事なのですが、これ、最初すごく苦戦しました…
Extend LeftがデフォルトではRepeatになっているのですが、ここをzeroにしてあげると、グラデーションが繰り返されず、周りが透明なものになります!
スクリーンショット 2018-12-11 0.43.46.png

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

Ramp TOP 2つと Reorder Top と HSV to RGB Topがあれば簡単にカラーサークルやカラーマップが作れるんです。
こちらはMutekの初級コースでも少し触れていたことですが少し詳しく調べてみました。

こんな感じのものが簡単に作れます。
スクリーンショット 2018-12-10 23.50.17.png

オペレータの名称      機能
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に変換されて出力されます。
スクリーンショット 2018-12-11 0.04.31.png
この際Output Redにもinput1のRedが割り当てられてると色が変わってしまいます

HSV to RGB TOP
お名前のままです。
HSVで入力された数値をRGBに変換してくれます。
ただ公式wikiをみてみると、少し重いかも…との記載がありました。

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

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

000.gif

オペレータの名称      機能
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

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

20
8
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
8