概要

  • JavaScript でグラデーション表示を作ってみる。
  • HSV 色空間

HSV 色空間

  • グラデーションを作るには、HSV で作ると簡単。
    • H : 色相。0° ~ 360° の円形で表され、各色が段階的に設定されている。
    • S : 彩度。色の鮮やかさ。0% ~ 100%。
    • V : 明度。色の明るさ。0% ~ 100%。

  • HSV
    • H : Hue
    • S : Saturation chroma
    • V : Value lightness brightness

グラデーションの方法

  • 色相 (H) を回し、色を順に変える。S と V は固定。
  • 彩度 (S) を動かし、鮮やかさを順に変える。H と V は固定。
  • 明度 (V) を動かし、明るさを順に変える。H と S は固定。

HSV => RGB 変換

  • Wikipedia を参照した。JavaScript だと以下の通り。
    • 引数 hsv は object。
    • h : 0.0 ~ 360.0 ( 360 は 0 と同一 )
    • s : 0.0 ~ 1.0
    • v : 0.0 ~ 1.0

/*
 * HSV 色空間 を RGB 色空間に変換します。
 *    hsv : object
 *        h : 0.0 ~ 360.0
 *        s : 0.0 ~ 1.0
 *        v : 0.0 ~ 1.0
 *
 *    rgb : object
 *        r : 0 ~ 255
 *        g : 0 ~ 255
 *        b : 0 ~ 255
 */
function _hsv2Rgb( hsv ) {

    var h_index = Math.floor( hsv.h / 60 ) % 6;
    var f = hsv.h / 60 - h_index;
    var p = hsv.v * ( 1 - hsv.s );
    var q = hsv.v * ( 1 - f * hsv.s );
    var t = hsv.v * ( 1 - ( 1 - f ) * hsv.s );

    var v = hsv.v;
    var r, g, b;
    switch ( h_index ) {
        case 0 : {
            r = v; g = t; b = p;
            break;
        }
        case 1 : {
            r = q; g = v; b = p;
            break;
        }
        case 2 : {
            r = p; g = v; b = t;
            break;
        }
        case 3 : {
            r = p; g = q; b = v;
            break;
        }
        case 4 : {
            r = t; g = p; b = v;
            break;
        }
        case 5 : {
            r = v; g = p; b = q;
            break;
        }
        default : {
            console.log( Warning : "H index" calculation is incorrect. );
            r = v; g = t; b = p;
            break;
        }
    }
    r = Math.floor( r * 255 );
    g = Math.floor( g * 255 );
    b = Math.floor( b * 255 );

    return { r: r, g: g, b: b };
}

  • HSV 色空間を回して色を変化させてみた。
    • 正方形に初期色を割り振り、後は H の値を増やすだけ。



参照

  • Wikipedia HSV色空間