【SD】HSV空間でカラーを生成する
【初めに】
この記事はSubstance Designerを使い
色の制御をRGBではなくHSV（色相、彩度、明度）でしよう、という内容です。
【HSVについて】
HSVはRGBとは違う制御方法で
・色相（赤とか青とか紫とか）
・彩度（色が鮮やかさ）
・明度（色の明るさ）
の三つで制御する方法です、エフェクトとして見た場合
ブルームの処理をかける場合にRGBで青から黄緑に色を変えようとした場合
ブルームでの光り方が変わりやすい、という面があるのですが
HSVの色相のみを動かす場合、このような事が起こりにくくなるので
もうちょっと赤っぽい色にとか、青っぽい色にとか
そういう色のイメージを直感的に操作しやすいメリットがあります
調整以外の面としては、虹色を作る場合RGB空間だと制御しにくいですが
HSV空間の場合、色相のみを動かすと自然とこのようなカラフルな色を作りやすいです。
なお、この記事では変換する場合の計算式などは載せませんのでご了承ください。
【HSVの変換自体をしてみる】
SDでつくる場合、PixelProcessor用の関数として、変換用のものがあらかじめ用意されています。
最終の出力としては、RGB空間となります。あくまでHSV空間で色の制御をするだけです。
Float３から数値を入れると、それだけで変換してくれます
なお、３チャンネルの場合、アルファが０になっていると真っ黒に表示されたりするので
出力時には４チャンネルに変換しましょう。
これだけでHSVで色は作れます...が
単色だけの画像...一体何に使うのでしょうか？
というわけで、ここからサムネイルのようなテクスチャを作る為の機能を増やして行きます。
【色幅などを作る】
そもそも何故単色になるのかという部分ですが
入力している３つの情報が、それぞれ固定の数値の情報でしか無いからです。
なので色幅を持たせる場合、この三つの色相、彩度、明度の情報を
単体の数値ではなく幅を持たせる必要があります。
数値の幅をどうやって持たせるのか？という部分もありますが
PixelProcessor、というよりSDの処理として
全てのピクセルに対して色情報の数値が全て入っているという処理になっています。
先ほどの定数を入れているものは、64*64の画像と想定すると
4096のピクセル全てに同じ数値が入っていることになるので、ここの数値を場所事に変える必要があります。
PixelProcessorはGetFloat2にて$posという変数を取得してくると
横と縦（縦はYチャンネルに入っています）の座標を数値（色）として出力してくれます。
色相に先ほどの$posから取得した情報を入れると
このようなカラフルな色が出力されてきます。
これてサムネイルのような画像自体が作れるようになります。
色相、彩度、明度、これら全てにこのようなグラデーションの情報を入れると自由に作れるようになります、が制御がややこしい部分もあります。
ここだけだと、色相が一周してしまい、緑要らないとか青要らないとなっても、全部引っ付いてきます。
それぞれ端の制御をする場合は、Lerpなどを使うと良いです。
これにより、右端と左端の色相を自由に弄ることが可能です。
これを、彩度、明度にも入れると、かなり自由に色を作ることが出来るようになります。
一つ注意点として、負の数値は対応していないので
このように、小数点以下の数値のみ取得するようにしておくと利便性が上がります。
この計算としては、１で割った余りを取得するというものです。
【Gradient（Dynamic）で更に制御する】
若干話題かわるかもしれないですが、Gradient（Dynamic）を使うと更に使い勝手がいいものがつくれます。
先程までの手段だと、左右や上下のグラデーションのみでしたが
このノードを使うことで、色情報を別のグラデーションに載せることができます。
今回はここまでとなります。
カラフルなテクスチャを作る機会はそう多くない気もしますが
黄色、オレンジ、赤のようなグラデーションも使えるので
必要そうな時に思い出してもらえればと
