根据室外温度设置背景颜色
Heyoh SO，
我有一个温度小部件来实现我正在进行的项目。
没有什么特别困难，我有一个免费的API来检索我需要的数据等。
I have a temperature widget to implement on a project I am working on. Nothing is specially difficult, I've got a free API to retrieve the datas that I need ect.
但是，与我合作的可爱设计师会有一个颜色的功能，我不知道从哪开始...
BUT, the lovely designer who works with me would have a color feature for which I've got no good idea to start with...
他会根据当前的天气温度定义背景颜色。
He would to define a background-color depending on the current weather temperature.
我的意思是如果温度很冷，比如-20，背景颜色应该是蓝色/紫色/任何冷色;当它像25一样温暖时，应该有一个像橙色/红色一样的热背景颜色。
I mean if the temperature is cold, like -20, the background color should be blue / violet / any cold color; and when it's warm, like 25, it should have a hot background-color like orange / red.
我想我可以很容易地使用一系列温度步骤 ，但我更喜欢使用可根据温度定义颜色的功能。我知道这很奇怪，我不知道是否有算法通过它的温度颜色定义颜色...
本文有用 http://en.wikipedia.org/wiki/Color_temperature 但相当复杂，如果有人有任何想法，即使是一个开头，我也很感兴趣！
I think I could easily work with an array of "temperature steps", but I would prefer to work with a function that could define the color depending of the temperature. I know it's strange, I don't know if there is an algorithm to define a color by it's temperature color... This article is helpfull http://en.wikipedia.org/wiki/Color_temperature but quite complicated, if someone has any idea, even for a beginning, I am very interested !
我看到了这个帖子：
用C＃将温度显示为一种颜色？
但我不是在使用C＃而我不想这样做，所以如果有的话在JavaScript中的解决方案，它将是完美的。如果有服务器需要，我最终可以使用PHP或NodeJS。
But I'm not using C# and I don't want to, so if there is a solution in JavaScript, it would be perfect. I can eventually work with PHP or NodeJS if there is a server-side need.
编辑 - 回答：
最后，由于图形需要，我没有选择使用真彩色渐变阵列。
但是我仍然需要根据温度混合最近步骤的颜色！
我写了一个小的JS库，你可以很快在GitHub上找到，我会在这里发布链接。
Finally, I didn't have the choice to use a real colors gradient array, because of the graphic needs. But I still had to mix the colors of the closest steps depending of the temperature ! I wrote a small JS library to do that, that you will be able to find on GitHub soon, I'll post the link here.
你可以在这里找到：
我最近有这个难题，使用时间数据显示那个时间对应的天空颜色。这很艰难，以下是我探索的三种方式：
I recently had this conundrum with using time data to display the colors of the sky that that time would correspond to. It's tough, Here are three ways I explored:
1）坏屁股方式：分别为你的R，G，B通道制作一个接受x的功能 - 除了温度，并在温度范围和相应颜色范围内为红色通道，蓝色通道和绿色通道吐出y截距。为了做到这一点，我将通过对温度的某些主要分区的颜色范围进行采样并对尽可能多的点进行绘制，然后通过每个通道的点绘制6度多项式来对其进行逆向工程。你会得到一个可以接受温度值的功能，并为RGB颜色的R，G和B通道组合3个输出，用于alpha 1.应该工作，虽然没有测试过但不愿意哈哈
1) The bad-ass way: Make a function for your R, G, B channels separately that would accept an x-intercept of your temperature, and spit out a y-intercept for your Red channel, Blue channel and Green channel over the range of temperatures and corresponding colors you have. To make this I would reverse engineer it by sampling along the color range for some major division of the temperatures and plotting as many points as you can and then drawing a 6th degree polynomial through the points for each of the channels. You would get a function which could accept a temperature value and combine 3 outputs for the R, G, and B channels of an RGB color for alpha 1. Should work, haven't tested it though and am not willing to haha
2）为每种主要颜色（您决定是5种还是50种颜色）制作背景类，并使用alpha混合在它们之间切换。这就是我最终用于解决我的问题。
2) Make a background class for each of the major colors (you decided whether this is 5 or 50 colors) and toggle between them with an alpha blend. This is what I ended up using for my issue.
if(temp > 0 && temp <= 5)
{
greenBackground.alpha == 1
yellowBakckground.alpha == (temp/5)
}
else if(temp > 5 && temp <= 10)
等......
所以如果你的温度是2.5那么它将是50％的黄色和绿色混合
So if your temp was 2.5 then it would be 50% mix of yellow and green
我能够在1晚实现这个选项，结果看起来大！这是耗时的，但可行，而不是你想象的那么混乱。
I was able to implement this option in 1 night and the result looks great! It's time consuming, but do-able and not as messy as you might think.
3）制作并存储一个RGB颜色的数组，从渐变中采集所有可能的颜色整数（在-30和30之间没有 很多）并且如果需要，将API的数据四舍五入为整数值。这是我认为最简单的。绝对不如选项1那么酷：）
3) Make and store an array with RGB colors sampled from your gradient against all the possible integers (there aren't that many between -30 and 30) and round the API's data to integer values if needed. That would be the simplest I suppose. Definitely not as cool as Option 1 though :)
祝你好运！