0

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.

3
  • 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
    Sep 29, 2012 at 15:21
  • @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
    Oct 1, 2012 at 8:56
  • Will you use that like a gradient scale? If yes, maybe you will need use yellow like a 'middle point'.
    – HugoLemos
    Dec 13, 2012 at 20:08

1 Answer 1

1

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.