Установите цвет фона на основе наружной температуры

Ответ 1

Недавно у меня была эта головоломка с использованием данных времени, чтобы отобразить цвета неба, которые это время соответствовало бы. Это сложно, вот три способа, которые я изучил:

1) Неправильный способ: выполните функцию для ваших каналов R, G, B отдельно, которые будут принимать х-перехват вашей температуры и выплюнуть y-перехват для вашего красного канала, синего канала и зеленого канал в диапазоне температур и соответствующих цветов, которые у вас есть. Чтобы сделать это, я бы перепроектировал его, взяв образец по цветовой гамме для некоторого большого деления температур и набросив столько точек, сколько вы можете, а затем нарисовать полином 6-й степени через точки для каждого из каналов. Вы получите функцию, которая могла бы принять значение температуры и объединить 3 выхода для R, G и B каналов цвета RGB для альфа-1. Если вы работаете, не тестировали его, и я не желаю хаха

2) Создайте фоновый класс для каждого из основных цветов (вы решили, будет ли это 5 или 50 цветов) и переключайтесь между ними с помощью альфа-смеси. Это то, что я в конечном итоге использовал для своей проблемы.

if(temp > 0 && temp <= 5)
{
     greenBackground.alpha == 1
     yellowBakckground.alpha == (temp/5)
}
else if(temp > 5 && temp <= 10)

и т.д...

Итак, если ваш темп равен 2,5, то это будет 50% сочетание желтого и зеленого

Я смог реализовать этот вариант за 1 ночь, и результат выглядит великолепно! Это много времени, но умело и не так грязно, как вы думаете.

3) Создайте и сохраните массив с цветами RGB, отобранными из вашего градиента, против всех возможных целых чисел (не существует , которые много от -30 до 30) и вокруг данных API до целых значений если нужно. Это было бы самым простым, я полагаю. Определенно не так классно, как вариант 1, хотя:)

Удачи!

Ответ 2

Ваш цветовой диапазон выглядит так же, как "оттенок только" в "цветовом пространстве HSL" от 270º (фиолетовый) при -30ºC до 30º (оранжевый) при + 30ºC

var hue = 30 + 240 * (30 - t) / 60;

Если t находится вне допустимого диапазона, зажмите его перед вызовом вышеуказанного выражения или закрепите h до нужного диапазона оттенков.

В поддерживаемых браузерах вы можете использовать цветную строку hsl(h, s, l) или использовать общедоступные "HSL to RGB" для преобразования цвета HSL в RGB.

См. http://jsfiddle.net/V5HyL/

Ответ 3

Это особый случай, а не общее решение, но, просто выполняя линейный градиент между оттенками и сглаживая смесь в среднем диапазоне (т.е. зеленый), вы можете получить разумное приближение без изменения цвета:

Демо: http://jsfiddle.net/bcronin/kGqbR/18/

//
// Function to map a -30 to 30 degree temperature to 
// a color
//
var F = function(t)
{
    // Map the temperature to a 0-1 range
    var a = (t + 30)/60;
    a = (a < 0) ? 0 : ((a > 1) ? 1 : a);

    // Scrunch the green/cyan range in the middle
    var sign = (a < .5) ? -1 : 1;
    a = sign * Math.pow(2 * Math.abs(a - .5), .35)/2 + .5;

    // Linear interpolation between the cold and hot
    var h0 = 259;
    var h1 = 12;
    var h = (h0) * (1 - a) + (h1) * (a);

    return pusher.color("hsv", h, 75, 90).hex6();
};

Ответ 4

Статья в википедии о цветовой температуре не связана с вашей проблемой. Статья в Википедии относится только к специалистам по цифровой визуализации. Цветовая температура в этом контексте означает нечто иное...

Ваша проблема заключается в том, как визуализировать определенную температуру в градусах Цельсия. Для этого нет стандартного алгоритма. Как решить эту задачу разработчику.

Я бы, вероятно, построил массив значений rgb на каждые 2,5 ° C или 5 ° C, а затем смешал rgb для значений температуры между ними.