Окраска треугольника “естественно” с помощью градиентов SVG
У меня есть 3 точки, окрашенные H1, H2 и H3, где каждый Привет, имеют 100%-ю насыщенность и значение, и только оттенок варьируется. Другими словами, это цвета "радуги".
Я хочу использовать функцию градиента SVG для окраски треугольника "естественно". Другими словами, точки близко к H1 должны иметь H1 оттенка, окраска должна быть непрерывной и т.д.
Действительно ли эта проблема четко определена? Есть ли действительно такой (уникальный?) окраска?
Незначительный: Я не полагаю, что оттенки "повторяются". Другими словами, цвет между оттенками.995 и.003.499, не.999.
Если эта проблема имеет решение, она может быть расширена, чтобы "естественно" окрасить выпуклую оболочку какого-либо набора цветных точек на плоскости, с помощью Триангуляции Делоне?
4 ответа
Вам нужно более одного градиента для достижения того, что вы хотите от треугольника, поскольку градиент - это интерполяция между двумя точками в цветовом пространстве, но у вас есть три различных неколлинеарных точки. Используя барицентрическую интерполяцию, вы должны применить один градиент на вершину так, чтобы направление градиента было направлено от вершины в направлении, перпендикулярном противоположному краю. Градиент изменяется от полного насыщения в вершине до нулевого насыщения, когда он достигает края.
Существуют различные аналоги барицентрической интерполяции на выпуклых многоугольниках , но я не читал подробно эту статью, чтобы узнать, можно ли ее достичь в виде суперпозиции линейных градиентов.
В конце концов, ваша проблема сводится к интерполяции внутри многоугольника, и каждая схема интерполяции дает различную (возможно, уникальную) окраску.
Возможно, вам стоит проверить Gouraud Shading, он кажется подходящим для того, что вы ищете. Он интерполирует заданные три цвета по вершинам треугольника.
Можно использовать svg градиенты в сочетании с svg фильтрами для создания определенных эффектов, похожих на то, о чем, я думаю, вы спрашиваете.
Некоторые примеры можно посмотреть здесь: http://www.chaos.org.uk/~eddy/when/2006/ColourCube.xhtml (я рекомендую посмотреть результаты в Opera, другие браузеры, похоже, не могут правильно отобразить слитые градиенты). Смотрите здесь пример трехстороннего градиента, примененного к треугольнику.
Если оттенки не распределяются вокруг, это довольно просто, но решение не является уникальным.
Предположим, что три оттенка разные, скажем H 1 .
Вы найдете точку x 4 в сегменте, соединяющем x 1 и x 3 (здесь у вас есть выбор), и пусть вся линия, соединяющая x 2 и x 4 одного цвета H 2 . Затем определите градиент, который должен быть перпендикулярен этой линии, с необходимыми расстояниями, чтобы дать трем точкам правильный оттенок.
Один из возможных вариантов точки x 4 таков, что оттенок изменяется линейно между x 1 и x 3 . Другой будет основанием перпендикуляра. Любое фиксированное решение не будет соединяться с другим треугольником с двумя общими вершинами, поэтому для общей раскраски это бесполезно.