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


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


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

##1.Ramp のパラメーターはRGBに変更できる
ほんとに基礎的なことで意外と見落としてるポイントでした！
実はRamp TOPのパラメーター、デフォルトでは Hue Sat Value AlphaになっているのですがRGBに変更できるんです！
![０１ (1).gif](https://qiita-image-store.s3.amazonaws.com/0/275909/1691fc78-e986-53aa-2cea-2b395720eac5.gif)

##2.Rampのピンは上に出せば消える
こちらもめちゃめちゃ基本なんですが…割と最近まで知りませんでした。
実はAdobeと同じでピンを上に引っ張れば消えるんです。
![004.gif](https://qiita-image-store.s3.amazonaws.com/0/275909/a580763d-9d3d-de33-cf7b-3db977f43a73.gif)

##3.Rampで周りが透明な丸いグラデーションを作る
すごく簡単な事なのですが、これ、最初すごく苦戦しました…
Extend LeftがデフォルトではRepeatになっているのですが、ここをzeroにしてあげると、グラデーションが繰り返されず、周りが透明なものになります！
<img width="1198" alt="スクリーンショット 2018-12-11 0.43.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/275909/c5abf8da-4847-0f2e-b603-48b31b2f113f.png">




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

こんな感じのものが簡単に作れます。
<img width="822" alt="スクリーンショット 2018-12-10 23.50.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/275909/b43e6c72-82d1-b327-dc62-1d1532fae273.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を１にして、input1に繋ぎます、
reorder TOPのOutput　Greenのパラメータを　input1 Redにすると、
RedがGreenに変換されて出力されます。
*<img width="992" alt="スクリーンショット 2018-12-11 0.04.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/275909/17df7e3a-df2b-25da-5f86-663e41ff7ede.png">
この際Output Redにもinput1のRedが割り当てられてると色が変わってしまいます*


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

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

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

![000.gif](https://qiita-image-store.s3.amazonaws.com/0/275909/b49c0646-54ba-4902-650c-c1c1a6b33f5c.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](https://derivative.ca/wiki088/index.php?title=Photoshop_In_TOP)

触ってみた感想は、同じ部屋などでデザイナーとエンジニアが一緒に作業してる際、ファイルの受け渡しがいちいち不要になることがメリットかなと思いました。
ですが透過は反映されないなど、少し気になる点もあったので、実用性は低いかなと感じました。


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


[鳴海さん](https://twitter.com/narumin256)、[小原くん](https://twitter.com/Joe0hara)、[別所さん](https://twitter.com/mVessho)でTouchDesigner Study WeekendというTouchDesignerの勉強会を東京中心に開催しています！
興味がある方はぜひ遊びにきてください！
[TouchDesigner Study Weekend](https://tdsw.peatix.com/)

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