A simple 2x2 Coons Patch mesh gradient where the eight outer corners are black and the center corner is white. A distinct white cross can be seen.
A Work in Progress — Last updated 5 January 2012
After playing around with Coons Patch mesh gradients in Inkscape, one significant weakness with the gradients has been identified. Cyril came up with the following example that clearly demonstrates the problem:
A simple 2x2 Coons Patch mesh gradient where the eight outer corners are black and the center corner is white. A distinct white cross can be seen.
The apparent cross is due to the non-smooth transition across the patch boundary. In a Coons Patch, the color of a point is found by a linear interpolation between corner points. See: Cyril's comments for more details.
This problem of non-smoothness can be seen even in simple linear gradients:
Linear gradients consisting of five stops. The outer two are black, the center one is white, and the remaining two are set to 90% white. The position of the 90% white stops are different for each gradient. The red line shows the black to white profile for each gradient.
As one can see in the above linear gradients, the eye is fooled into thinking that the location of the 90% white stop is whiter than the areas immediate right and left of the stop. This is due to the Mach Banding effect.
Moving the "handle" points, which are by default one-third of the way between corner points, can smooth out the transition. While moving the handles along a linear Bezier curve does not change the shape of the curve, moving them does change the "speed" of the parameterization which changes the color profile. This is illustrated below:
The top gradient is a linear gradient. The middle gradient is a Coons Patch mesh gradient that duplicates the linear gradient. The location of the Bezier handles (circles) are shown in blue. They are at their default positions spaces one-third of the way between the corner points (squares). The bottom gradient is a Coons Patch mesh gradient where the top and bottom handles have been moved to smooth out the transition across the patch boundaries. The 90% stop has been changed to 80%. The purple line on the bottom gradient shows the new color profile.
Coons patches are defined by four Beziers. The curves define not only the geometric outline but also how the color is spread inside the patch as illustrated below:
Left: Color defined by a two-dimension bi-linear interpolation of the corner colors. Right: the color interpolation mapped to the patch region. The Bezier end points (corners) and handles are shown as diamonds and circles respectively.
If a side of a patch is a line, it is possible to change the color profile independently of the curve shape in a limited way by moving the Bezier handles along the line as as the color profile is dependent on the "speed" of the curve's parameterization.
Three Coons patch meshes are shown where the left corners are black and the right corners are white. Overlaid each gradient is the color profile determined by the handle placements of the top and bottom Bezier curves. The top gradient shows the color profile with the default handle placement (i.e. when a curve is defined by a lineto). The Bezier handles of top and bottom of the mesh are shown in blue while the color profile with the profile's effective Bezier handles are shown in red. The middle gradient shows the the color profile when the handle "lengths" are zero (i.e. when the handles are placed on top of the corners. The bottom gradient shows the color profile when the handles are placed over the opposite corners.
Note that in the above figure the effective Bezier handles of the color profile are constrained to horizontal lines one-third of the distance between the top and bottom range of the color profile. As a result, one can never have a profile where the derivative of the color change at a boundary is zero. Also note, the handles can be moved outside the gradient region to the left or right but that causes a discontinuity in the color profile as the effective profile Bezier will overlap itself.
The introduction of "tensor" terms to the mesh gradient allows further control of the way color is spread inside the mesh. The tensor points act as "handles" of a virtual Bezier curve with the ends being opposite side Bezier handles. They control the spread of color along this Bezier in the same way that the side Bezier handles control the color profile along the patch sides. However, moving the tensor control points still does not allow one to avoid discontinuities at patch boundaries.
So why don't Adobe Illustrator and Corel Draw have the same problems with their meshes that are illustrated above? Cyril has discovered that a single patch in Illustrator gets exported to multiple patches in PDF. This has two possible advantages:
Cyril found a discussion of Illustrator and Corel Draw in a paper by Sun, Liang, Wen, and Shum. The authors claim that in order to reproduce Illustrator and Corel Draw's meshes they need a "monotonic cubic spline" instead of a linear interpolation.
Some comments about the paper:
By dividing each mesh in two both vertically and horizontally it is possible to reduce effects of non-smooth transitions:
The original 2x2 Coons Patch mesh has been converted to a 4x4 mesh by dividing each patch in two both vertically and horizontally. Edge effects have been reduced. One could probably do better by automating the division and placement of handles.