Value as colour representation

Question

Converting a value to a colour is well known, I do understand the following two approaches (very well described in changing rgb color values to represent a value)

Answer 1

Horst,

The example you gave does not create gradients. Instead, they use N preset colors from an array and pick the next color as umbr points out. Something like this:

a = { "#ffffff", "#ff00ff", "#ff0000", "#888888", ... };
c = a[pos / 1000];

were pos is your value from 1 to 30,000 and c is the color you want to use. (you'd need to better define the index than pos / 1000 for this to work right in all situations.)

If you want a gradient effect, you can just use the simple math shown on the other answer you pointed out, although if you want to do that with any number of points, it has to be done with triangles. You'll have a lot of work to determine the triangles and properly define every point.

In JavaScript, it will be dog slow. (with OpenGL it would be instantaneous and you would not even have to compute the gradients, and that would be "faster than realtime.")