javascript - poner - Establecer color de fondo basado en la temperatura exterior
imagen de fondo html5 (4)
Heyoh SO
Tengo un widget de temperatura para implementar en un proyecto en el que estoy trabajando. Nada es especialmente difícil, tengo una API gratuita para recuperar los datos que necesito, etc.
PERO, el diseñador encantador que trabaja conmigo tendría una característica de color para la cual no tengo una buena idea para comenzar ...
Él definiría un color de fondo dependiendo de la temperatura actual del clima.
Quiero decir que si la temperatura es fría, como -20, el color de fondo debe ser azul / violeta / cualquier color frío; y cuando hace calor, como 25, debe tener un color de fondo cálido como naranja / rojo.
Creo que podría trabajar fácilmente con una serie de "pasos de temperatura", pero preferiría trabajar con una función que pudiera definir el color dependiendo de la temperatura. Sé que es extraño, no sé si hay un algoritmo para definir un color por su color de temperatura ... Este artículo es útil http://en.wikipedia.org/wiki/Color_temperature pero bastante complicado, si alguien tiene Cualquier idea, incluso para empezar, estoy muy interesada!
Vi este hilo: ¿ Muestra la temperatura como un color con C #?
Pero no estoy usando C # y no quiero hacerlo, así que si hay una solución en JavaScript, sería perfecta. Eventualmente puedo trabajar con PHP o NodeJS si hay una necesidad del lado del servidor.
EDITAR - Respuesta :
Finalmente, no tuve la opción de usar una matriz de degradado de colores reales, debido a las necesidades gráficas. ¡Pero todavía tenía que mezclar los colores de los pasos más cercanos dependiendo de la temperatura! Escribí una pequeña biblioteca de JS para hacer eso, que pronto podrás encontrar en GitHub, publicaré el enlace aquí.
Lo puedes encontrar aquí:
El artículo de wikipedia sobre la temperatura del color no está relacionado con su problema. El artículo de wikipedia solo es relevante para expertos en imágenes digitales. La temperatura del color en este contexto significa algo diferente ...
Su problema es sobre cómo visualizar una cierta temperatura en grados celsius. No hay un algoritmo estándar para hacer esto. Depende del diseñador cómo resolver esta tarea.
Probablemente compilaría una serie de valores rgb para cada 2.5 ° C o 5 ° C y luego mezclaría con rgb para los valores de temperatura intermedios.
Este es un caso especial, no una solución genérica, pero simplemente haciendo un gradiente lineal entre tonos y arrugando la mezcla en el rango medio (es decir, el verde) puede obtener una aproximación razonable sin cambiar de color:
Demostración: 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();
};
Hace poco tuve este dilema con el uso de datos de tiempo para mostrar los colores del cielo con los que ese tiempo correspondería. Es difícil, aquí hay tres maneras que exploré:
1) La forma incorrecta: haga una función para sus canales R, G, B por separado que acepte una intersección x de su temperatura, y escupa una intersección y para su canal rojo, canal azul y canal verde sobre el Gama de temperaturas y colores correspondientes que tienes. Para hacer esto, realizaría ingeniería inversa muestreando a lo largo de la gama de colores una división importante de las temperaturas y trazando tantos puntos como pueda y luego dibujando un polinomio de 6º grado a través de los puntos para cada uno de los canales. Obtendría una función que podría aceptar un valor de temperatura y combinar 3 salidas para los canales R, G y B de un color RGB para alfa 1. Debería funcionar, no lo he probado y no estoy dispuesto a jaja
2) Cree una clase de fondo para cada uno de los colores principales (usted decidió si esto es 5 o 50 colores) y alterne entre ellos con una mezcla alfa. Esto es lo que terminé usando para mi problema.
if(temp > 0 && temp <= 5)
{
greenBackground.alpha == 1
yellowBakckground.alpha == (temp/5)
}
else if(temp > 5 && temp <= 10)
etc ...
Entonces, si tu temperatura era de 2.5, entonces sería un 50% de mezcla de amarillo y verde.
Pude implementar esta opción en 1 noche y el resultado se ve excelente. Lleva mucho tiempo, pero es factible y no es tan desordenado como podría pensar.
3) Cree y almacene una matriz con colores RGB muestreados desde su gradiente contra todos los enteros posibles (no hay tantos entre -30 y 30) y redondee los datos de la API a valores enteros si es necesario. Eso sería lo más simple, supongo. Definitivamente no es tan genial como la Opción 1 aunque :)
¡Buena suerte!
Su rango de colores parece ser el mismo que un barrido "solo en tono" en "espacio de color HSL" desde 270º (violeta) a -30ºC hasta 30º (naranja) a + 30ºC
var hue = 30 + 240 * (30 - t) / 60;
Si t está fuera de rango, cámbiela antes de llamar a la expresión anterior, o marque h al rango de tono deseado después.
En los navegadores compatibles, puede usar una hsl(h, s, l) , o usar las funciones "HSL a RGB" comúnmente disponibles para convertir el color HSL en RGB.