Set color shade based on variable number with PHP

Question

Ok, I don't even know where to start with this one! I'll try and explain what I want to achieve, and we'll go from there....

I have a list of dates each with an associated number, say from 20-100. What I want to do is to output the date in a shade which represents the associated number. So 20 would display in a light blue and 100 in a dark blue. My code so far looks like this...

dateArray = Array('2001-01-01'=>30, '2001-02-01'=>40, '2001-03-01'=>50, '2001-04-01'=>60, '2001-05-01'=>70, '2001-06-01'=>80, '2001-07-01'=>90, '2001-08-01'=>90, '2001-09-01'=>80, '2001-10-01'=>70, '2001-11-01'=>60, '2001-12-01'=>50)  

$maxNum = max($dateArray);
$minNum = min($dateArray);

foreach($dateArray AS $date => $num){

$lightest = 'rgb(204,204,255)';
$darkest = 'rgb(0, 0, 179)';

///magic that converts $num into $shade goes here///

echo "<span style='color:$shade'>$date</span><br>" 

} 

Any ideas? Thanks

Answer 1

I would do something like that :

$dateArray = Array('2001-01-01'=>30, '2001-02-01'=>40, '2001-03-01'=>50,   '2001-04-01'=>60, '2001-05-01'=>70, '2001-06-01'=>80, '2001-07-01'=>90, '2001-08-01'=>90, '2001-09-01'=>80, '2001-10-01'=>70, '2001-11-01'=>60, '2001-12-01'=>50)

// get max and min values
$maxNum = max($dateArray);
$minNum = min($dateArray);

// set rgb values for max and min
$lightest = array(204, 204, 255);
$darkest = array(0, 0, 179);

foreach($dateArray AS $date => $num)
{
    // get a "delta" where the current num value is
    $delta = ($num / $maxNum) - $minNum;

    // get a pro-rata values thanks to $delta
    $shadesNum = array(
        $delta * ($lightest[0] - $darkest[0]) + $darkest[0],
        $delta * ($lightest[1] - $darkest[1]) + $darkest[1],
        $delta * ($lightest[2] - $darkest[2]) + $darkest[2]
    );

    echo "<span style='rgb(".implode(',', $shadesNum).")'>$date</span><br>";
}

Answer 2

Some languages have a "lerp" function - linear interpolation. Quite useful. My suggestion:

for ($x1=20; $x1<=100; $x1+=10)
  echo $x1 . ": " . getshade($x1) . "<br />\n";

function getshade($num) {
  $rlight = 204;
  $glight = 204;
  $blight = 255;
  $rdark = 0;
  $gdark = 0;
  $bdark = 179;
  $lightnum = 20;
  $darknum = 100;
  $k01 = ($num-$lightnum)/($darknum-$lightnum); // 0 to 1
  $rshade = ilerp($rlight, $rdark, $k01);
  $gshade = ilerp($glight, $gdark, $k01);
  $bshade = ilerp($blight, $bdark, $k01);
  return "rgb($rshade,$gshade,$bshade)"; }

function lerp($start, $end, $k01) { // linear interpolation
  return $k01*$end + (1.0-$k01)*$start; }
function ilerp($start, $end, $k01) { // integer lerp
  return intval($k01*$end + (1.0-$k01)*$start); }

EDIT: Same thing but better:

$rgblight = [204,204,255];
$rgbdark = [0,0,179];
$numlight = 20;
$numdark = 100;

for ($x1=20; $x1<=100; $x1+=10)
  echo $x1 . ": " . getshade2($x1, $numlight, $numdark, $rgblight, $rgbdark) . "<br />\n";

function getshade2($num, $numlight, $numdark, $rgblight, $rgbdark) {
  $k01 = ($num-$numlight)/($numdark-$numlight);
  for ($i1=0; $i1<3; $i1+=1)
    $rgb[$i1] = ilerp($rgblight[$i1], $rgbdark[$i1], $k01);
  return "rgb({$rgb[0]},{$rgb[1]},{$rgb[2]})"; }