Coloring a triangle "naturally" using SVG gradients

Question

I have 3 points colored H1, H2, and H3, where each Hi is has 100% saturation and value, and only the hue varies. In other words, these are "rainbow" colors.

I want to use SVG's gradient function to color the triangle "naturally". In other words, points close to H1 should have hue H1, the coloring should be continuous, etc.

Is this problem well-defined? Is there really such a (unique?) coloring?

Minor: I don't consider hues to "wrap around". In other words, the color between hues .995 and .003 is .499, not .999.

If this problem has a solution, can it be extended to "naturally" color the convex hull of any set of colored points on the plane, using Delaunay triangulation?

Answer 1

Maybe you should be checking Gouraud Shading, it seems appropriate for what you are looking for. It interpolates given three colors across a triangle's vertices.

Answer 2

You need more than one gradient to achieve what you want on a triangle, since a gradient is an interpolation between two points in the colorspace, but you have three distinct noncollinear points. Using barycentric interpolation, you should apply one gradient per vertex, such that the gradient direction is directed away from the vertex, in the direction perpendicular to the opposite edge. The gradient runs from full saturation at the vertex to zero saturation when it hits the edge.

There are various analogs for barycentric interpolation on convex polygons, but I haven't read that paper in detail to know if it can be achieved as a superposition of linear gradients.

In the end, your problem boils down to interpolation within the polygon, and each interpolation scheme will yield a different (possibly unique) coloring.

Answer 3

It's possible to use svg gradients in combination with svg filters to create certain effects, similar to what I think you're asking for.

Some examples can be seen here: http://www.chaos.org.uk/~eddy/when/2006/ColourCube.xhtml (I'd recommend looking at the results in Opera, the other browsers didn't seem to render the fused gradients correctly). See here for an example of a three-way gradient applied to a triangle.

Answer 4

If the hues don't wrap around it's pretty easy, but the solution is not unique.

Suppose the three hues are different, say H1<H2<H3.

You are going to find a point x₄ in the segment joining x₁ and x₃ (this is where you have choices), and let the whole line joining x₂ and x₄ the same color H₂. Define then the gradient to be perpendicular to this line, having the required distances such as to give the three points the correct hue.

One possible choice of the x₄ point is such that the hue varies linearly between x₁ and x₃. Another one would be the foot of the perpendicular. Any fixed solution won't join with a different trianngle with two common vertices, so for the general coloring it's of no help.