Как рассчитать четырехцветный градиент?

Если у меня четыре цвета (A, B, C и D) на четырех углах квадрата, и я хочу заполнить этот квадрат градиентом, который прекрасно сочетается между четырьмя цветами, как бы я вычислил цвет точки E

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

Любая идея, как это сделать? Скорость и простота предпочтительнее точности.

цвета http://rabien.com/image/colours.png

Ответы

Ответ 1

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

Если у вас есть значения HSV для двух цветов, вы просто делаете линейную интерполяцию для H, S и V, и у вас хорошие цвета (интерполяция в пространстве RGB всегда приводит к "плохим" результатам).

Вы также можете найти здесь, чтобы перейти от RGB к HSV и от HSV к RGB соответственно.

Теперь, для вашей проблемы с четырьмя углами, вы можете сделать линейную комбинацию четырех значений H/S/V, взвешенных по расстоянию от E до четырех точек A, B, C и D.

EDIT: тот же метод, что и tekBlues, но в пространстве HSV (его легко проверить в RGB и в пространствах HSV. И вы увидите различия. В HSV вы просто поворачиваете хроматический цилиндр, и это почему он дает хороший результат)

EDIT2: если вы предпочитаете "скорость и простоту", вы можете использовать L1-норму, а не L2-норму (эвклидову норму)

Итак, если a - размер вашего квадрата, а координата ваших точек - A (0, 0), B (0, a), C (a, 0), D (a, a), то оттенок точки E (x, y) можно вычислить с помощью:

Hue(E) = ( Hue(B)*y/a + Hue(A)*(1-y/a) ) * (x/a)  +  ( Hue(D)*y/a + Hue(C)*(1-y/a) ) * (1-x/a)

где Hue(A) - это оттенок точки A, Hue(B) оттенок B и т.д.

Вы применяете те же формулы для насыщенности и значения.

Как только у вас есть значение Hue/Saturation/Value для вашей точки E, вы можете преобразовать его в пространстве RGB.

Ответ 2

Ознакомьтесь с этим сайтом, который дает визуальную демонстрацию комментария @ThibThib о том, что "градиенты в HSV будут более насыщенными":

http://www.perbang.dk/rgbgradient/

Это создатель градиента, который создаст и покажет BOTH градиент RGB и градиент HSV.

Если вы попробуете 9 шагов от FFAAAA до AAFFAA (светло-красный до зеленого), вы получите приятный переход через светло-желтый цвет, а HSV и RGB выглядят одинаково.

Но попробуйте 9 шагов от FF0000 до 00FF00 (жирный красный до зеленого), и вы увидите переход RGB через яркую зеленовато-коричневую. Градиент HSV, однако, переходит через жирный желтый цвет.

Ответ 3

  • Определите расстояние от точки E до каждой точки A, B, C, D

  • Цвет для точки E будет комбинацией красного/зеленого/синего. Рассчитайте каждую ось цвета как среднее значение той же оси цвета для A, B, C, D, оценивая расстояние.

    distance_a = sqrt ((xa-xe) ^ 2 + (ya-ye) ^ 2)

    distance_b =....

    sum_distances = distance_a + distance_b...

    red = (red_adistance_a + red_bdistance_b...)/sum_distances

    color_E = ColorFromARgb (красный, зеленый, синий)