カラープロパティを色相ぐるぐるしたい

例えば「4色グラデーション」を適用した状態。これを色相ぐるぐるしたいとき、誰しも思いつくのが「色相/彩度」エフェクト。これで簡単にできる。

打ってみた。

「カラー3」はRGB（色相0°、120°、240°）だけに打った。キーフレ間の補完で明度彩度が変化しているし論外。数値を調べればわかるが色相もきれいに補完されてない。

「カラー4」はRGBに加えてYCM（色相60°、180°、300°）のキーを打った。タイムラインのインジケーターをキーフレームの間に持ってきてカラーピッカーをだすとわかるけれど、明度彩度の変化がなく色相だけが変化している。

成功！！ヤッター！！！・・・で済むのか。済む場合もあるでしょう。そのときはこれでいい。

じゃあこれ修正したくなったらどうするのか。途中で一度逆回転にしてからまた順回転にしてくれと言われたら？キーフレーム地獄になるのは想像に難くない。触るキーフレームはいつでも少ないほうがいいのである。

RGBは「赤・緑・青」の割合を表している。HSLは「色相・彩度・明度」を表している。全く異なる要素で色を表しているこれらだが、お互いRGBとHSLは変換できる。

決まった変換式があるが、AfterEffectsのエクスプレッションにも用意されているのでそれを使う。

• rgbToHsl(rgbArray)

• hslToRgb(hslArray)

意味は見たまま。説明の必要もない。手順は次のよう。

1. rgbToHsl でRGBをHSLに変換

2. Hue（色相）を操作する

3. hslToRgb でHSLをRGBに戻す

エクスプレッションで色を拾った場合、4つの要素の入った配列が返ってくる。4つめはアルファなのでここでは無視する。つまり[R,G,B]が返ってくる。先のエクスプレッションで変換した場合、[R,G,B]の配列が[H,S,L]の配列になる。またその逆もしかり。

そしてHSLの取りうる範囲はすべての要素で[0-1]である。一般的に角度は[0°-360°]で表すものであるが、ここでは[0-1]で与える必要があることに注意。180°とか2°とかそのままぶちこんでも全て1(=360°)として扱われてしまう。この辺が初心者が陥りやすい。

[0-360]とか[0-255]とかそれらは人間がわかりやすいための表記であって、パソコンくんには[0-1]がわかりやすいのである。

●1行目

rgb = value;

このプロパティ自身のエクスプレッション適用前の値を変数rgbに格納。

●2行目

hue = effect("色相オフセット")(1);

このレイヤーのエフェクト「色相オフセット」の「角度」の値を変数hueに格納。もし別のレイヤー（コントロール用のレイヤーとか）から拾うときはレイヤーの指定も忘れず。

●3行目

hue = (hue%360/360) + (hue < 0);

hueはそのままだと周回も足した角度を表している。角度のプロパティは「0x+0.0°」という表記になっていて「0x」は周回、「+0.0°」は[-360～360]の角度を表している。例えば値が「2x+90°」だとすると1周360°だから「2*360+90」=で、hueには810という値が入ることになる。反時計回りだと負の値を取るので、「-2x-90°」となれば-810となる。

この値を前述の通り[0-1]に収めないといけないのでその計算をしている。角度としてはマイナス値は間違っていないが、今回色相に与える値としては適切でないので[0°-360°]の範囲を示す[0-1]に変換しないといけない。

色相に周回の考えは要らないので「0x+0.0°」の「+0.0°」の部分だけほしい。

hue%360

これでhueを360で割った余り、つまり周回を無視した「+0.0°」の部分だけを取り出せた。hueがどんな値であってもこれで[-360-+360]の値に変換された。さらにそれを360で割ることで[-1-+1]の範囲に収めることができるので、

 (hue%360/360)

となる。前述の通り角度は負の値の可能性もある。正の場合はそのままでよいが。負の場合、hueに360°分プラスして正の値に戻す。先の計算ですでにhueは[-1-+1]に収めているので、1周分の加算で[0-1]に収まる。hueが正か負か判断するので

(hue < 0)

とすると、hueが0か正の場合「false」、負の場合「true」が返ってくる。「true」「false」は計算式中でそれぞれ「1」「0」に自動変換される。結果、負のときは +1、正のときは+0となる。

以上の計算でhueを[0-1]に収めることができた。

●4行目

hsl = rgbToHsl(rgb);

最初に格納したRGB値をHSLに変換したものを変数hslに格納。

●5行目

hsl[0] = (hsl[0] +  hue)%1;

hslは[H,S,L,A]4つの要素をもつ配列。その1つ目が色相の値になるので、hsl[0]に先ほど求めたhueを足す。ここで足した結果、値が1を超える可能性がある。越えた分は周回として3行目と同様、捨ててしまっていい。小数部分だけほしいので、

%1

で、1で割った余り、つまり小数部分のみ抜き出している。これでhsl[0]はもとの色から「色相オフセット」分だけ色相が調整された[0-1]の値になった。

●6行目

hslToRgb(hsl);

求めたHSL値をRGBに変換する。これでプロパティに調整後の値がぶちこまれる。

色相オフセット」エフェクトをOFFにしているときは色相調整されない、とう風にしてみるには、2行目をこうする。

hue = effect("色相オフセット")(1) * effect("色相オフセット").enabled;

エフェクトの有効無効をenabledで判断。TRUE/FALSEが返ってくる。前述の通り、これらは「1/0」に暗黙の変換がされるのでOFFの場合は自動的にhue自体が0になり、エクスプレッションで色相オフセットの計算がなされても変わらずもとの色を保ったままになる。