Программный градиент останавливается с помощью Javascript

Question

Работая с Javascript (jQuery), учитывая 2 цветовых значения (например, 2033ff и 3300a0), как я могу определить определенные градиентные остановки между ними?

Причина в том, что я собираюсь использовать массив значений цвета:

    0 => '000000'
 8400 => 'f0ff00'
44000 => '2033ff'
68400 => '3300a0'

Имеется 86400 секунд в день, 12:00 утра отображается в 0, и 23:59 вечера отображается в 86399. С течением времени цвет фона указанного элемента меняется на соответствующий цвет в списке градиентов с помощью window.setInterval(function(e){ ... }, 1000). Например, 2:32:11PM = 52331, который из примера будет где-то между 2033ff и 3300a0.

Мне не нужно заполнять массив значениями (если это не будет проще), но вместо этого используйте индекс и значение в качестве ссылок.

Answer 1

Просто выполните линейную интерполяцию:

Учитывая 2033ff и 3300a0 в качестве начала и конца, вы сделаете:

red1 = 0x2033ff >> 16;
green1 = (0x2033ff >> 8) & 0xFF;
blue1  = 0x2033ff & 0xFF;

red2 = 0x3300a0 >> 16;
green2 = (0x3300a0 >> 8) & 0xFF;
blue2  = 0x3300a0 & 0xFF;

time = 0.3 // This should be between 0 and 1

outred = time * red1 + (1-time) * red2;
outgreen = time * green1 + (1-time) * green2;
outblue = time * blue1 + (1-time) * blue2;

Answer 2

Я написал библиотеку RainbowVis-JS в качестве общего решения для отображения чисел в цветах. Для вашего примера вы бы использовали:

var rainbow = new Rainbow(); 
rainbow.setSpectrum('2033ff', '3300a0');
rainbow.setNumberRange(1, 86400);
var colour = rainbow.colourAt(52331); // 2c14c5