How to map a range of integers to a colour space?

0
votes

I need to map a range of positive integers (e.g. 1 - 15'000) to a colour space such that the minimum value is green and the maximum value is red. I.e. I need an algorithm where I can give an integer (and maybe the min, max values) as an input and receive an RGB value as the output.

I am aware of the possibility to discretise the colour space but i'd prefer a solution where I do not have to.

1
algorithmcolors
I'm pretty sure a mapping like you want is by definition a discrete color space (or subspace of the color space). Why would you want to avoid the very same thing you are trying to accomplish? – zmbq
@zmbq By discretise I meant to divide the colour space into a fixed amount of colours e.g. n RGB values and then map the real range to this one e.g. like this: 1 + ((value - realMin) / (realMax - realMin)) * n). But maybe I used the the word not correct I'm not fluent in english. – rob
Will you use that like a gradient scale? If yes, maybe you will need use yellow like a 'middle point'. – HugoLemos

1 Answers

1
votes

This should get you started:

 ​function getColourFromInt(int){
      var num = Math.abs(int);

      var b2 = Math.floor(num % 16);
      var temp = num / 16;

      var b1 = Math.floor(temp % 16);
      var temp2 = temp / 16;

      var g2 = Math.floor(temp2 % 16);
      var temp3 = temp2 / 16;

      var g1 = Math.floor(temp3 % 16);
      var temp4 = temp3 / 16;

      var r2 = Math.floor(temp4 % 16);
      var temp5 = temp4 / 16;

      var r1 = Math.floor(temp5 % 16);

     var values = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]

     r1 = values[r1]
     r2 = values[r2]
     g1 = values[g1]
     g2 = values[g2]
     b1 = values[b1]
     b2 = values[b2]

     var rgb = r1 + r2 + g1 + g2 + b1 + b2;

     document.getElementById('colour').innerHTML = rgb;

 }

 getColourFromInt(Math.floor(Math.random() * 16*16*16*16*16*16))​

http://jsfiddle.net/pxSMb/