math - 使用 SVG 渐变为三角形 "naturally"着色

Question

我有 3 个点的颜色为 H1、H2 和 H3，其中每个 Hi 都有 100%
饱和度和值(value)，只有色调变化。换句话说，这些
是“彩虹”颜色。

我想使用 SVG 的渐变功能为三角形着色
“自然”。换句话说，接近 H1 的点应该有色调 H1，
着色应该是连续的，等等。

这个问题定义明确吗？真的有这样的(独特的？)着色吗？

未成年人:我不认为色调会“环绕”。换句话说，
色相 0.995 和 0.003 之间的颜色是 0.499，而不是 0.999。

如果这个问题有解决方案，是否可以延伸到“自然”
着色平面上任何一组彩色点的凸包，使用
德劳内三角剖分？

Answer 1

我意识到这个线程已经死了。但是我发布此答案是希望将来对某人有用。如果您可以将方程式扩展到正确的 SVG 标记中，那么我们已经完成了。我为 cocoa 开发了这个特殊的解决方案，但数学是完全相关的。

该方法涉及一些矩阵数学来找到三角形的梯度向量，它给出了相对于 z 的最陡上升的 (x,y) 方向——这是颜色梯度的方向。颜色梯度的起点/终点由梯度矢量斜率(通过 x,y 原点约束)与三角形平面上描述 zmin 和 zmax 的等值线的交点确定。

首先，平面与三个点相交{p1, p2, p3}三角形的大小可以用以下等式来描述:

A1(x) + A2(y) + A3(z) - A = 0

其中 A 是行列式:

    |p1x  p1y  p1z|
A = |p2x  p2y  p2z|
    |p3x  p3y  p3z|

和 Ai是相同的行列式，但替换列 i使用列向量:

            1                     |p1x  1  p1z|
column(i) = 1          e.g., A2 = |p2x  1  p2z|
            1                     |p3x  1  p3z|

梯度向量 grad(z)描述了最陡上升的方向，也是颜色梯度的轨迹:

grad(z) = [-A1/A3 (i), -A2/A3 (j)]

所以在 x,y 平面上，这个梯度向量沿着一条线:

y = x * A2/A1 + b, 

其中 b 可以是任何东西，但让我们设置 b = 0 .这将颜色梯度轨迹限制为与原点相交的线:

y = x * A2/A1                 [eqn 1]

这条线描述了颜色渐变方向。起点和终点将由这条线与 zmax 和 zmin 等值线的交点确定。

现在，对于任何定义的值 zmax和 zmin ，我们可以这样描述三角形定义的平面上的平行线:

A1(x) + A2(y) + A3(zmax) - A = 0                 [eqn 2]
and
A1(x) + A2(y) + A3(zmin) - A = 0                 [eqn 3]

使用上面的等式 1-3，我们可以求解 G1和 G2 ，分别是颜色渐变的起点和终点。

G1 = (xmin,ymin)
G2 = (xmax,ymax)

在哪里

xmin = (A - A3*zmin) / (A1 + A2^2 / A1)
ymin = xmin * A2/A1

xmax = (A - A3*zmax) / (A1 + A2^2 / A1)
ymax = xmax * A2/A1

注意 A1 = 0 的特殊情况，对应于完全垂直的颜色渐变路径。在这种情况下:

for A1 == 0:

G1 = (0,ymin)
G2 = (0,ymax),
where
ymin = (A - A3*zmin) / A2
ymax = (A - A3*zmax) / A2

唯一的其他特殊情况是 p1z = p2z = p3z .这将尝试将渐变路径拉伸(stretch)为无限长。在这种特殊情况下，三角形应该只涂上纯色，而不是经过所有的数学运算。

剩下的就是将三角形设置为剪切区域并从 G1 绘制渐变。至 G2 .我包括一个带有相关线性方程的问题域图。另请注意，颜色梯度沿每个三角形边缘线性变化，因此 OP 关于 delaunay 三角剖分的问题是正确的。正是出于这个原因，我开发了这种方法 - 为三角网格的面着色。下图显示了 zmax == p3z > p1z > p2z > zmin 的情况。 .