Я пытаюсь интерполировать между двумя цветами в цветовом пространстве HSV, чтобы получить плавный градиент цвета.

Я использую линейную интерполяцию, например:

h = (1 - p) * h1 + p * h2
s = (1 - p) * s1 + p * s2
v = (1 - p) * v1 + p * v2

(где p - это процент, а h1, h2, s1, s2, v1, v2 - компоненты оттенка, насыщенности и значения двух цветов)

Это дает хороший результат для s и v, но не для h. Поскольку компонент оттенка представляет собой угол, для расчета необходимо определить кратчайшее расстояние между h1 и h2, а затем выполнить интерполяцию в правильном направлении (по часовой стрелке или против часовой стрелки).

Какую формулу или алгоритм я должен использовать?

РЕДАКТИРОВАТЬ: Следуя советам Джека, я изменил свою функцию градиента JavaScript, и она работает хорошо. Для тех, кто заинтересован, вот что я закончил:

// create gradient from yellow to red to black with 100 steps
var gradient = hsbGradient(100, [{h:0.14, s:0.5, b:1}, {h:0, s:1, b:1}, {h:0, s:1, b:0}]); 

function hsbGradient(steps, colours) {
  var parts = colours.length - 1;
  var gradient = new Array(steps);
  var gradientIndex = 0;
  var partSteps = Math.floor(steps / parts);
  var remainder = steps - (partSteps * parts);
  for (var col = 0; col < parts; col++) {
    // get colours
    var c1 = colours[col], 
        c2 = colours[col + 1];
    // determine clockwise and counter-clockwise distance between hues
    var distCCW = (c1.h >= c2.h) ? c1.h - c2.h : 1 + c1.h - c2.h;
        distCW = (c1.h >= c2.h) ? 1 + c2.h - c1.h : c2.h - c1.h;
     // ensure we get the right number of steps by adding remainder to final part
    if (col == parts - 1) partSteps += remainder; 
    // make gradient for this part
    for (var step = 0; step < partSteps; step ++) {
      var p = step / partSteps;
      // interpolate h, s, b
      var h = (distCW <= distCCW) ? c1.h + (distCW * p) : c1.h - (distCCW * p);
      if (h < 0) h = 1 + h;
      if (h > 1) h = h - 1;
      var s = (1 - p) * c1.s + p * c2.s;
      var b = (1 - p) * c1.b + p * c2.b;
      // add to gradient array
      gradient[gradientIndex] = {h:h, s:s, b:b};
      gradientIndex ++;
    }
  }
  return gradient;
}