Как получить плавный градиент от красного до белого от 0 до 1?

Question

Как мне сгенерировать значение от красного до белого при использовании шкалы от 0 до 1?

У меня есть список значений от 0 до 1, и если значение равно 0, я хочу показать полностью красныйи если значение равно 1, я хочу показать полностью белый.

Я уверен, что есть API, чтобы найти это значение, но я рисую пробел на нем.

Вот что у меня есть:

var color:Number = value==0 ? 0xFF0000 : 0xFFFFFF;

Это, очевидно, не поддерживает значения градиента.

Код для JavaScript также поможет решить эту проблему.

Answer 1

У меня есть список значений от 0 до 1 ...

Предположим, этот список является массивом с именем myList. Он имеет 100 значений в диапазоне от 0 до 1 (или 0,99).

Чтобы отобразить длину 100 записей в ожидаемые 255 (зеленого и синего, чтобы получить белый), просто разделите:

(255/myList.length); //gives 2.55
2.55 * ( myList[i] * 100 ) //gives 0-255 range version (eg: myList[i]==0.5... now is 127)

Сначала объявите некоторые переменные ...

public var temp_R :uint = 0;
public var temp_G :uint = 0;
public var temp_B :uint = 0;

public var RGB :uint = 0; //output colour (24-bit)

Затем просто обновите, используя цикл For ...

for (var j:uint = 0; j < myList.length; j++)
{
    //maximum 255 is divided by total values...
    //multiply by 100 to ramp up the List value... eg: If "myList[j]" == 0.5 then we want as == 50
    temp_Int = (255 / myList.length) * ( 100 * myList[j] ); 

    if( temp_Int > 255) { temp_Int = 255;} //clamp to 255 range

    temp_R = 255; //kept as constant value of 255
    temp_G = temp_B = temp_Int; //for whitening, these other two share same value

    RGB = (temp_R << 16) | (temp_G << 8) | temp_B; //generate output colour

    temp_BMD.setPixel(j, k, RGB );
}

Та же логика в незначительном более компактном цикле

for (var j:uint = 0; j < myList.length; j++)
{
    temp_Int = (255 / myList.length) * ( 100 * myList[j] );
    temp_R = 255; temp_G = temp_B = temp_Int; //set R to 255, set G and B to "temp_Int"
    RGB = (temp_R << 16) | (temp_G << 8) | temp_B; //generate output colour
    //temp_BMD.setPixel(j, 0, RGB ); //visual test on a Bitmap-Data object
}

Примечание: Вы также можете «уменьшить» точку пика, используя (255 / (myList.length / X) );, где X - это небольшое значение, такое как 2, 4 или 8. Может быть, это в некоторой степени полезно для более поздних проектов.

Answer 2

Я думаю, что нашел API. Это в ColorUtils.adjustBrightness ();

Если я передам значение RGB и значение яркости * 256, это как возвращение отрегулированного цвета. Если бы цвет, который я хотел настроить, не был белым, я не думаю, что эта функция будет работать.

var color:Number = adjustBrightness(0xFF0000, brightness*256);

public static function adjustBrightness(rgb:uint, brite:Number):uint
{
    var r:Number = Math.max(Math.min(((rgb >> 16) & 0xFF) + brite, 255), 0);
    var g:Number = Math.max(Math.min(((rgb >> 8) & 0xFF) + brite, 255), 0);
    var b:Number = Math.max(Math.min((rgb & 0xFF) + brite, 255), 0);

    return (r << 16) | (g << 8) | b;
} 

// there is an alternative method that accepts a value from -100 to 100
var color:Number = adjustBrightness(0xFF0000, brightness*100);

public static function adjustBrightness2(rgb:uint, brite:Number):uint
{
    var r:Number;
    var g:Number;
    var b:Number;

    if (brite == 0)
        return rgb;

    if (brite < 0)
    {
        brite = (100 + brite) / 100;
        r = ((rgb >> 16) & 0xFF) * brite;
        g = ((rgb >> 8) & 0xFF) * brite;
        b = (rgb & 0xFF) * brite;
    }
    else // bright > 0
    {
        brite /= 100;
        r = ((rgb >> 16) & 0xFF);
        g = ((rgb >> 8) & 0xFF);
        b = (rgb & 0xFF);

        r += ((0xFF - r) * brite);
        g += ((0xFF - g) * brite);
        b += ((0xFF - b) * brite);

        r = Math.min(r, 255);
        g = Math.min(g, 255);
        b = Math.min(b, 255);
    }

    return (r << 16) | (g << 8) | b;
}