Jak interpolować wartości barwy w przestrzeni barw HSV?

Chociaż ta odpowiedź jest spóźniona, przyjęta jest błędna, stwierdzając, że barwa powinna być w granicach [0, 255]; również więcej sprawiedliwości można zrobić z jaśniejszym wyjaśnieniem i kodem.

Barwa jest wartością kątową w przedziale [0, 360); Pełne koło, gdzie 0 = 360. Przestrzeń kolorów HSV jest łatwiejsza do wizualizacji i bardziej intuicyjna dla ludzi niż RGB. HSV tworzy cylinder, z którego kawałek jest wyświetlany w wielu próbnikach kolorów, podczas gdy RGB jest naprawdę kostką i nie jest to dobry wybór dla selektor kolorów; większość tych, którzy go używają, musiałaby zatrudnić więcej suwaków niż jest to wymagane dla selektora HSV.

Wymaganiem podczas interpolacji odcienia jest to, aby mniejszy łuk był wybrany tak, aby sięgał z jednego odcienia do drugiego. Tak więc, biorąc pod uwagę dwie wartości barwy, istnieją cztery możliwości, podane z przykładowymi kątami poniżej:

Δ |  ≤ 180  |  > 180
--|---------|---------
+ |  40, 60 | 310, 10
− |  60, 40 | 10, 310

if Δ = 180 then both +/− rotation are valid options

Weźmy + jako obrót przeciwnie do ruchu wskazówek zegara i − jako obrót zgodnie z ruchem wskazówek zegara. Jeśli różnica w wartości bezwzględnej przekracza 180, normalizuj ją o ± 360, aby upewnić się, że wielkość jest w granicach 180; to również odwraca kierunek, słusznie.

var d = h2 - h1;
var delta = d + ((Math.abs(d) > 180) ? ((d < 0) ? 360 : -360) : 0);

Teraz po prostu podziel delta przez wymaganą liczbę kroków, aby uzyskać wagę każdej iteracji pętli, aby dodać kąt początkowy podczas interpolacji.

var new_angle = start + (i * delta);

Odpowiednia funkcja]}

function interpolate(h1, h2, steps) {
  var d = h2 - h1;
  var delta = (d + ((Math.abs(d) > 180) ? ((d < 0) ? 360 : -360) : 0)) / (steps + 1.0);
  var turns = [];
  for (var i = 1; d && i <= steps; ++i)
    turns.push(((h1 + (delta * i)) + 360) % 360);
  return turns;
}

"use strict";

function interpolate(h1, h2, steps) {
  var d = h2 - h1;
  var delta = (d + ((Math.abs(d) > 180) ? ((d < 0) ? 360 : -360) : 0)) / (steps + 1.0);
  var turns = [];
  for (var i = 1; d && i <= steps; ++i)
    turns.push(((h1 + (delta * i)) + 360) % 360);
  return turns;
}

function get_results(h1, h2, steps) {
  h1 = norm_angle(h1);
  h2 = norm_angle(h2);
  var r = "Start: " + h1 + "<br />";
  var turns = interpolate(h1, h2, steps);
  r += turns.length ? "Turn: " : "";
  r += turns.join("<br />Turn: ");
  r += (turns.length ? "<br />" : "") + "Stop: " + h2;
  return r;
}

function run() {
  var h1 = get_angle(document.getElementById('h1').value);
  var h2 = get_angle(document.getElementById('h2').value);
  var steps = get_num(document.getElementById('steps').value);
  var result = get_results(h1, h2, steps);

  document.getElementById('res').innerHTML = result;
}

function get_num(s) {
  var n = parseFloat(s);
  return (isNaN(n) || !isFinite(n)) ? 0 : n;
}

function get_angle(s) {
  return get_num(s) % 360;
}

function norm_angle(a) {
  a %= 360;
  a += (a < 0) ? 360 : 0;
  return a;
}

<h1 id="title">Hue Interpolation</h1>
Angle 1
<input type="text" id="h1" />
<br />Angle 2
<input type="text" id="h2" />
<br />
<br />Intermediate steps
<input type="text" id="steps" value="5" />
<br />
<br/>
<input type="submit" value="Run" onclick="run()" />
<p id="res"></p>