[RESOLVED] Color based on temperature

[scrupul0us]

I've been all over the webs mainly staring a Kelvin based charts (Candle Red to Clear Sky Blue) but I can't seemingly find what I'm looking for.

I'm looking to simply define a shade of blue to 0F and a shade of red to 100 F (or possibly another finite range) and based on the temperature it will output a color between those two shades

I am mainly using jQuery on this project and I have seen some jQuery Heat/Color libraries out there but none seemingly do what I want/need so I'm more than amicable to use PHP on the back-end to push the resultant color to the front end of the application.

[bradgrafelman]

What format are you looking for the color inputs/outputs to be in?

My first guess would be to look at this purely mathematically - you're just mapping a value on one linear scale to another. For example, using (r,g,b) notation, you could say the linear temp scale of [0, 100] corresponds to the linear color scale [(0,0,255), (255,0,0)]. Treating them just as numbers/tuples, a temperature of 25 would yield a result of roughly (64, 0, 191) (this cute purple).

[scrupul0us]

I'd be more-so looking for a color scale like this:

http://www.mediacollege.com/lighting/colour/images/colour-temperature.gif

[Weedpacket]

A LUT for that is something I put together for the GIMP, once. Here's the table converted to PHP, with a function to use it. Defined over the range 1000K - 10000K.

function blackbody_colour($temperature)
{

// RGB LUT; blackbody spectrum linearly interpolated over 19 segments.
static $spectrum = array(array(255, 1, 0),
	array(255, 32, 0),
	array(255, 59, 2),
	array(255, 88, 17),
	array(255, 115, 38),
	array(255, 139, 64),
	array(255, 161, 94),
	array(255, 181, 125),
	array(255, 198, 158),
	array(255, 213, 190),
	array(255, 226, 221),
	array(255, 238, 251),
	array(231, 226, 255),
	array(210, 213, 255),
	array(194, 204, 255),
	array(181, 195, 255),
	array(170, 188, 255),
	array(161, 182, 255),
	array(153, 176, 255));

// clamp and normalise $temperature from Kelvin to [0,1]
$temperature = min(10000, max(1000, $temperature));
$temperature = ($temperature - 1000) / (10000 - 1000);

$point = $temperature * 18;
$lower = (int)floor($point);
$upper = (int)ceil($point);
if($lower == $upper)
{
	return $spectrum[$lower];
}
else
{
	$point = $point - $lower;
	list($lr, $lg, $lb) = $spectrum[$lower];
	list($ur, $ug, $ub) = $spectrum[$upper];
	$r = intval(($ur - $lr) * $point + $lr);
	$g = intval(($ug - $lg) * $point + $lg);
	$b = intval(($ub - $lb) * $point + $lb);
	return array($r, $g, $b);
}
}

[scrupul0us]

"For the GIMP" =)

Thanks Weed, I'll give er' a go and see what I can do with it.

Thanks =)

[scrupul0us]

So a little update... I've done a bunch of playing around and this seems to work pretty good:

data = parseInt(data,10); 
var cssObj = '';

temp = data / 100;

red = 0;
blue = 0;
green = 0;


if(temp >= 0 && temp < .5) //green stays at 100% and red raises to 100%
{
	green = 1;
	red = 2 * temp;
}

if (temp >= .5 && temp <= 1) //red stays at 100% and green decays
{
	red = 1;
	green = 1 - 2 * (temp - 0.5);
}

red = parseInt(red * 255,10);
green = parseInt(green * 255,10);

var rgb = 'rgb('+red+','+green+','+blue+')';

the only issue here is the scale is 0 - 100...

I've been putzing around with the math for a few hours and for the life of me can't seem to adjust it so the scale is 50 - 100

the above code is javascript but this is math follow up not a javascript follow up

My first though is to divide by 200 instead of 100 when I set my temp variable and then add 50 somewhere to make the scale-up but I either end up with all greens or all reds... not greens around 50 and reds around 90+

Please save me from my mathematical incompetence!

[Weedpacket]

scrupul0us wrote:

//green stays at 100% and red raises to 100%

Well, this is an entirely different spectrum - "green hot" is a new one on me 🙂

scrupul0us wrote:

the only issue here is the scale is 0 - 100...

I've been putzing around with the math for a few hours and for the life of me can't seem to adjust it so the scale is 50 - 100

Do you mean you want the input range to be [50,100] instead of the [0,100] that it currently is? In other words; currently, 0 maps to green and 100 maps to red; you want 50 to map to green and 100 to map to red (and values in the range [0,50) aren't passed)?

To linearly rescale data ∊ [50,100] to temp ∊ [0,1] we need a and b so that the line temp = a×data+b. We need two points to define a line - and we have them: when data=50, temp=0; and when data=100, temp = 1.

0 = 50a+b
1 = 100a+b

Subtracting the first equation from the second

1-2(0) = 100a+b-2(50a+b)
    1 = 100a+b-100a-2b
    1 = b-2b
    b = -1

And from that and [font=monospace]100a+b = 1[/font] we get [font=monospace]a = 1/50[/font].

So [font=monospace]temp = data/50-1[/font]. Or [font=monospace]temp = (2 * (data - 50))/100[/font] if you want to be a little more explicit about what's going on (namely: [50,100] -> [0,50] -> [0,100] -> [0,1]).

Incidentally: [font=monospace]green = 1 - 2 (temp - 0.5);[/font] could be simplified to [font=monospace]green = 2 (1 - temp);[/font]

[scrupul0us]

lol, green hot... the first bracket is greener as its closer to 0* 🙂

THANK YOU for showing your work... That is so much more tremendously helpful than the fact that it works!

I'll have to see if I can find a way to pass $min and $max values so the scale will be variable on the fly for future applications

[Weedpacket]

Assuming the target interval is still [0,1]...

0 = min × a + b
1 = max × a + b

1-0 = (max × a + b) - (min × a + b)
  1 = max × a - min × a
  1 = (max - min) × a

  a = 1 / (max - min)

 0 = min × a + b
 0 = min / (max - min) + b
-b = min / (max - min)
 b = min / (min - max)



temp = data × a + b
     = data / (max - min) + min / (min - max)
     = data / (max - min) - min / (max - min)
     = (data - min) / (max - min)

And of course if you replace [font=monospace]0[/font] and [font=monospace]1[/font] in the first two equations with other numbers, and carry the changes through to the other equations, you can map [min,max] to some other interval. Indeed, if you replace them with p and q you end up with the general formula for linear interpolation.

[scrupul0us]

Thanks as usual Mr. Packet =)