Imposta il colore dello sfondo in base alla temperatura esterna

Question

Heyoh SO,

Ho un widget di temperatura da implementare su un progetto su cui sto lavorando. Niente è particolarmente difficile, ho una API gratuita per recuperare i dati che ho bisogno di ect.

MA, la bella designer che lavora con me avrebbe una funzione di colore per il quale ho nessuna buona idea per iniziare con ...

Avrebbe per definire un background-color seconda delle condizioni climatiche attuali temperatura.

Voglio dire, se la temperatura è fredda, come -20, il colore di sfondo deve essere blu/viola/qualsiasi colore freddo; e quando è caldo, come 25, dovrebbe avere uno sfondo caldo come l'arancione/rosso.

Penso che potrei facilmente lavorare con una serie di "gradini di temperatura", ma preferirei lavorare con una funzione che potrebbe definire il colore in base alla temperatura. So che è strano, non so se c'è un algoritmo per definire un colore per il suo colore di temperatura ... Questo articolo è utile http://en.wikipedia.org/wiki/Color_temperature ma piuttosto complicato, se qualcuno ha qualche idea, anche per un inizio, io sono molto interessato !

ho visto questa discussione: Display temperature as a color with C#?

Ma io non sto usando C# e io non voglio, quindi se c'è una soluzione in JavaScript, sarebbe perfetto. Posso eventualmente lavorare con PHP o NodeJS se c'è una necessità sul lato server.

EDIT - Risposta:

Infine, non ho avuto la possibilità di usare una vera e propria gamma di colori di pendenza, a causa delle esigenze grafiche. Ma dovevo ancora mescolare i colori dei passi più vicini a seconda della temperatura! Ho scritto una piccola libreria JS per farlo, che potrete trovare presto su GitHub, posterò il link qui.

Lo si può trovare qui:

The presentation website of the project

Or the github project

Answer 1

Recentemente ho avuto questo enigma con l'utilizzo di dati in tempo per visualizzare i colori del cielo che quel tempo corrisponderebbe a. È difficile, Ecco tre modi che ho esplorato:

1) Il modo cattivo: Crea una funzione per i tuoi canali R, G, B separatamente che accetta un'intercettazione x della tua temperatura, e sputa un -intercettazione per il canale rosso, il canale blu e il canale verde nell'intervallo di temperature e i colori corrispondenti che hai. Per fare ciò, effettuerei il reverse engineering campionando lungo la gamma di colori per una maggiore divisione delle temperature e tracciando più punti possibile e quindi disegnando un polinomio di 6 ° grado attraverso i punti per ciascuno dei canali. Otterrai una funzione che potrebbe accettare un valore di temperatura e combinare 3 uscite per i canali R, G e B di un colore RGB per alpha 1. Dovrebbe funzionare, non averlo provato e non sono disposto a haha ​​

2) Crea una classe in background per ciascuno dei colori principali (hai deciso se questo è di 5 o 50 colori) e passa da una miscela alfa.Questo è quello che ho finito usando per il mio problema.

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

ecc ...

Quindi se il vostro temperatura era 2,5 allora sarebbe il 50% mix di giallo e verde

sono stato in grado di implementare questa opzione in 1 notte e gli sguardi di risultato grande! Richiede molto tempo, ma può farlo e non è così complicato come si potrebbe pensare.

3) rendere e conservare una matrice con i colori RGB campionati dal gradiente contro tutti i possibili numeri interi (non ci sono che molti tra -30 e 30) e tondi dati del API a valori interi, se necessario. Quello sarebbe il più semplice suppongo. Sicuramente non così cool come l'opzione 1 però :)

Buona fortuna!

Answer 2

L'articolo di wikipedia sulla temperatura del colore non è collegato al tuo problema. L'articolo di Wikipedia è pertinente solo per gli esperti di imaging digitale. La temperatura del colore in questo contesto significa qualcosa di diverso ...

Il tuo problema è come visualizzare una certa temperatura in gradi Celsius. Non esiste un algoritmo standard per farlo. Spetta al progettista come risolvere questo compito.

Probabilmente creerò un array di valori rgb per ogni 2,5 ° C o 5 ° C e quindi mieterò per rgb tra i valori di temperatura.

Answer 3

tua gamma di colori sembra essere lo stesso di un "hue-only" spazzare in "spazio colore HSL" da 270 ° (violaceo) a -30 ° C fino a 30 ° (arancione) a + 30 ° C

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

Se t non rientra nell'intervallo, bloccarlo prima di richiamare l'espressione precedente oppure inserire il morsetto h in seguito nell'intervallo di tonalità desiderato.

sui browser supportati è possibile utilizzare una stringa di colore hsl(h, s, l), o utilizzare comunemente disponibili "HSL to RGB" funzioni per convertire il colore HSL in RGB.

Vedi http://jsfiddle.net/V5HyL/

Answer 4

Questa è una speciale-caso, non è una soluzione generica, ma semplicemente facendo un gradiente lineare tra tonalità e scrunching la miscela nella gamma media (cioè il verde) è possibile ottenere un ragionevole approssimazione senza colore di lancio:

Demo: 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(); 
};