JP / EN

色相環を描画・色を連続的に変化させるサンプルコード

タグ：C++ game

色相を連続的に変化させることで虹のようなエフェクト、あるいはいわゆる「ゲーミングカラー」の発光を描画するコードを描いたので掲載する。 Photoshopなどで生成した虹色画像を素材として持っておくのも一つの手だが、プログラム内で動的に生成することもできる。

やり方としては

[0, 1]の範囲で時間・位置などに応じて連続に変化する変数phaseを用意する。
phaseからその時刻に対応するRGB値を求める

とすればよい

時刻から対応するRGB値を求めるうえでは、三原色R, G, Bの混合率をz, y, z軸とする 3次元空間をイメージすると分かりやすい。

Rに対応する (1, 0, 0), Gに対応する (0, 1, 0), Bに対応する (0, 0, 1) を通過するようにうまく点の軌跡を動かしてやればよい。

厳密にいうと"環"というからには三角関数を使って円状に色を動かさないといけない。しかしそれは若干面倒であるので、赤・緑・青の3原色の間を線形に補間しまってもそれっぽい見た目になるようだ。
厳密な計算式は https://tomari.org/main/java/color/ccal.html などを参照されたい。

以下はC++で色相環におけるphaseから色を求めるサンプルである。

    unsigned int myutil::cyclicColor(double phase)
    {
      unsigned int r = 255;
      unsigned int g = 255;
      unsigned int b = 255;
      phase *= 3.0; // 3つに場合分けするのでわかりやすいように[0, 3]に
      if (phase < 1)
      {
        r = (1 - phase) * 255;
        g = phase * 255;
        b = 0;
      }
      else if (phase < 2)
      {
        g = (2 - phase) * 255;
        b = (phase - 1) * 255;
        r = 0;
      }
      else
      {
        b = (3 - phase) * 255;
        r = (phase - 2) * 255;
        g = 0;
      }
      
      // RGBA形式のunsigned intに詰め込んで返す
      unsigned int blend = (r << 24) | (g << 16) | (b << 8) | 0xff;

      return blend;
}

https://wonderhorn.net/