Как интерполировать значения оттенков в цветовом пространстве HSV?

Ответ 1

Вам нужно просто выяснить, какой из них является самым коротким путем, начиная от оттенка до оттенка. Это можно сделать легко, так как значения оттенков варьируются от 0 до 255.

Вы можете сначала вычесть нижний оттенок из более высокого, затем добавить 256 в нижний, чтобы снова проверить разницу с обмениваемыми операндами.

int maxCCW = higherHue - lowerHue;
int maxCW = (lowerHue+256) - higherHue;

Итак, вы получите два значения, чем больше вы решите, нужно ли идти по часовой стрелке или против часовой стрелки. Затем вам нужно будет найти способ сделать интерполяцию работать по модулю 256 оттенка, поэтому, если вы интерполируете от 246 до 20, если коэффициент равен >= 0.5f, вы должны reset hue to 0 ( так как он достигает 256 и hue = hue%256 в любом случае).

На самом деле, если вы не заботитесь о оттенке при интерполяции по 0, но просто применяйте оператор modulo после вычисления нового оттенка, он должен работать в любом случае.

Ответ 2

Хотя этот ответ задерживается, принятый неверен, указав, что оттенок должен быть в пределах [0, 255]; также более справедливым может быть сделано с более ясным объяснением и кодом.

Оттенок является значением angular в интервале [0, 360]; полный круг, где 0 = 360. Цветовое пространство HSV легче визуализировать и более интуитивно понятное для людей, чем RGB. HSV образует цилиндр, из которого срез показан во многих сборщиках цветов, а RGB - действительно куб и на самом деле не является хорошим выбором для выбора цвета; большинство из них, которые его используют, должны будут использовать больше ползунков, чем требуется для сборщика HSV.

Требование при интерполировании оттенка состоит в том, что меньшая дуга выбирается для достижения от одного оттенка к другому. Поэтому, учитывая два значения оттенка, есть четыре возможности, приведенные ниже с примерами углов:

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

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

Возьмем + как против часовой стрелки, а − - по часовой стрелке. Если разница в абсолютном значении превышает 180, то нормализуйте его на ± 360, чтобы убедиться, что величина находится в пределах 180; это также верно меняет направление.

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

Теперь просто разделите delta на необходимое количество шагов, чтобы получить вес каждой итерации цикла, чтобы добавить к начальному углу во время интерполяции.

var new_angle = start + (i * delta);

Релевантная функция, взятая из следующего следующего кода:

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>