根据室外温度设置背景颜色

Question

嘿嘿，

我有一个温度小部件要在我正在进行的项目中实现。 没什么特别困难的，我有一个免费的 API 来检索我需要的数据等。

但是，和我一起工作的可爱设计师会有一个颜色功能，我不知道如何开始......

他会根据当前的天气温度定义背景颜色。

我的意思是如果温度很冷，比如-20，背景颜色应该是蓝色/紫色/任何冷色；当它是温暖的时候，比如 25，它应该有一个像橙色/红色这样的热背景色。

我认为我可以轻松使用一系列“温度步骤”，但我更喜欢使用可以根据温度定义颜色的函数。我知道这很奇怪，我不知道是否有一种算法可以通过它的温度颜色来定义颜色...... 这篇文章对http://en.wikipedia.org/wiki/Color_temperature很有帮助，但是比较复杂，如果有人有任何想法，即使是一个开始，我也很感兴趣！

我看到了这个帖子： Display temperature as a color with C#?

但我没有使用 C#，也不想使用，所以如果 JavaScript 中有解决方案，那就完美了。如果有服务器端需要，我最终可以使用 PHP 或 NodeJS。

编辑 - 回答：

最后，由于图形的需要，我没有选择使用真正的颜色渐变数组。 但我仍然必须根据温度混合最近台阶的颜色！ 我为此编写了一个小型 JS 库，您很快就能在 GitHub 上找到它，我将在此处发布链接。

你可以在这里找到它：

The presentation website of the project

Or the github project

Answer 1

您的颜色范围看起来与“HSL 颜色空间”中的“仅色调”扫描相同，从 -30ºC 的 270º（紫色）到 +30ºC 的 30º（橙色）

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

如果t 超出范围，请在调用上述表达式之前对其进行钳制，或在之后将h 钳制到所需的色调范围。

在支持的浏览器上，您可以使用hsl(h, s, l) 颜色字符串，或使用常用的"HSL to RGB" 函数将 HSL 颜色转换为 RGB。

见http://jsfiddle.net/V5HyL/

Answer 2

这是一种特殊情况，不是通用解决方案，但通过简单地在色调之间进行线性渐变并在中间范围（即绿色）中处理混合，您可以在没有颜色步进的情况下获得合理的近似值：

演示：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();
};

Answer 3

关于色温的维基百科文章与您的问题无关。维基百科文章仅与数字成像专家相关。在这种情况下，色温意味着不同的东西......

您的问题是关于如何以摄氏度可视化某个温度。没有标准算法可以做到这一点。如何解决这个任务取决于设计师。

我可能会为每 2.5°C 或 5°C 构建一个 rgb 值数组，然后将 rgb 混合为两者之间的温度值。

Answer 4

我最近遇到了一个难题，即使用时间数据来显示该时间对应的天空颜色。很难，以下是我探索的三种方式：

1) 坏方法：分别为您的 R、G、B 通道创建一个函数，该函数将接受您的温度的 x 轴截距，并为您的红色通道、蓝色通道和绿色通道输出一个 y 轴截距在您拥有的温度和相应颜色范围内进行通道。为了做到这一点，我将通过沿颜色范围对温度的一些主要划分进行采样并绘制尽可能多的点，然后通过每个通道的点绘制 6 次多项式来对其进行逆向工程。你会得到一个函数，它可以接受一个温度值，并为 alpha 1 的 RGB 颜色的 R、G 和 B 通道组合 3 个输出。应该可以工作，但还没有测试过，我不愿意哈哈

2) 为每种主要颜色创建一个背景类（您决定这是 5 种颜色还是 50 种颜色）并使用 alpha 混合在它们之间切换。这就是我最终用于解决问题的方法。

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 酷:)

祝你好运！