Question

I am wanting to make a progress-bar-type-thing which goes from green-orange-red as it moves across the screen. For example:

How can I find what the colour should be at a given point?

Answer 1

Edit: here’s a link to a jsfiddle implementing this: http://jsfiddle.net/EAM9a/

For the simplest method, you can do a linear interpolation between the colors. Let’s assume that the progress goes from 0.0 to 1.0 to make things easy. So

0.0 - green  - rgb(0,   100, 0)
0.5 - orange - rgb(255, 165, 0)
1.0 - red    - rgb(139,   0, 0)

Then we can just interpolate between green and orange or between orange and red, depending on the color we want.

var  green = [0, 100, 0],
    orange = [255, 165, 0],
       red = [139, 0, 0];

function color(val) {
  if (val < 0.5) {
    return colorToString(interpolate(val * 2, green, orange));
  } else {
    return colorToString(interpolate((val-0.5) * 2, orange, red));
  }
}

// val should be in the range [0.0, 1.0]
// rgb1 and rgb2 should be an array of 3 values each in the range [0, 255]
function interpolate(val, rgb1, rgb2) {
  var rgb = [0,0,0];
  var i;
  for (i = 0; i < 3; i++) {
    rgb[i] = rgb1[i] * (1.0 - val) + rgb2[i] * val;
  }
  return rgb;
}

// quick helper function to convert the array into something we can use for css
function colorToString(rgb) {
  return "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")";
}