javascript - 機能的な「リカラー」の実装

Question

タスクがあります: 写真のすべてのポイントにユーザー色相 (0-360)、彩度 (0-100) が付けられます。最初のポイント変換明度 (-100-0-100) を取得し、次のように変換します。

私はそれが何であるかを理解していませんか？グラフには何が表示されますか? 明度を変更するには？

Answer 1

中央の線は、たとえば 0 から 255 までのピクセル値です。

上の線は、50% の明度を追加することを示しています。入力値が 0 (中央の線) の場合、実際には 50% が追加されますが、最大値 (255) に近づくと、値が > 255 にならないように値がスケーリングされます。

結論は同じですが、逆の方法で 50% を差し引きます。入力値 0 では変化はありません。最大値でのみ、実際に明度を 50% 下げることができます。

参照しているモデルは HSL (または HSV) モデルです。色相、彩度、輝度を調整するには、最初に RGB モデルを HSL に変換し、次に明るさの L を調整してから元に戻すことができます。

ここでこれを使用するパレットを備えたフィドラーがあります：
http://jsfiddle.net/AbdiasSoftware/wYBEU/

そこには2つの関数があり、数学を示していますrgb2hsv():hsv2rgb

プロセスは次のようになりますrgb2hsv -> adjust L -> hsv2rgb(HSL を直接使用できない場合)。

RGB から HSV:

function rgb2hsv() {

    var rr, gg, bb,

    r = arguments[0] / 255,
    g = arguments[1] / 255,
    b = arguments[2] / 255,
    h, s,

    v = Math.max(r, g, b),
    diff = v - Math.min(r, g, b),
    diffc = function (c) {
        return (v - c) / 6 / diff + 0.5;
    };

    if (diff === 0) {
        h = s = 0;

    } else {
        s = diff / v;

        rr = diffc(r);
        gg = diffc(g);
        bb = diffc(b);

        if (r === v) {h = bb - gg}
        else if (g === v) {h = (0.3333333333) + rr - bb} 
        else if (b === v) {h = (0.6666666667) + gg - rr};
        if (h < 0) {h += 1}
        else if (h > 1) {h -= 1}
    }

    return {
        h: h * 360,
        s: s * 100,
        v: v * 100
    }
};

HSV から RGB:

function hsv2rgb(h, s, v) {

    h /= 60;
    s *= 0.01;
    v *= 0.01;

    var i = Math.floor(h);
    var f = h - i;
    var m = v * (1 - s);
    var n = v * (1 - s * f);
    var k = v * (1 - s * (1 - f));
    var rgb;

    switch (i) {
        case 0:
            rgb = [v, k, m];
            break;
        case 1:
            rgb = [n, v, m];
            break;
        case 2:
            rgb = [m, v, k];
            break;
        case 3:
            rgb = [m, n, v];
            break;
        case 4:
            rgb = [k, m, v];
            break;
        case 5:
        case 6:
            rgb = [v, m, n];
        break;
    }

    return {
        r: rgb[0] * 255 |0,
        g: rgb[1] * 255 |0,
        b: rgb[2] * 255 |0
    }
}

例：

このRGB値があるとしましょう-

Thatv は、輝度の HSV 219、95、および 100 を提供します。

ここで行う必要があるのは、ルミナンスをたとえば 50 に調整して、hsv2rgb を介してフィードすることだけです。

var rgb = hsv2rgb(219, 95, 50);

rgb( rgb.r、rgb.g、rgb.b) には、輝度が調整された新しい RGB 値が含まれています。