Support different Gradient modes for Color gradient brushes

[jongleur1983]

In general Gradients from colorA to colorB can have different styles, e.g. gradienting around the color-wheel (clockwise, counter-clockwise), gradienting in a straight line in the color cube or something else. A sample for that can be seen in Gimp, that has the following options (condensed to those relevant for ImageSharp Gradients):

Translated to English:

1. Foreground to Background - hard edge
2. Foreground to Background - HSV color counter-clockwise
3. Foreground to background - HSV color clockwise
4. Foreground to background - RGB

Option 3 and 4 don't differ on the red-to-yellow example, but do on green-to-red:

Up to now there's no option on how to calculate the gradients yet. Currently we calculate an intermediate color by this code:

https://github.com/SixLabors/ImageSharp/blob/133d90879b17577032a4cc165014915c0829540e/src/ImageSharp.Drawing/Processing/GradientBrush.cs#L121

If I'm not mistaking that's how option 4 from GIMP works.

With the options from the GIMP example above this would be exchanged by HardEdge: onLocalGradient > 0.5 ? toAsVector : fromAsVector for HsvClockwise and HsvCounterClockwise the logic basically would be

• linear interpolation of Hue and Saturation component
• blending the V(alue) component as a linear blending around the color cone edge in the given direction (clockwise or counter-clockwise).

Conversion HSV<>RGB is already implenmented in HsvAndRgbConverter.cs

[JimBobSquarePants]

@jongleur1983 We don't actually calculate the intermediate color that way anymore.

https://github.com/SixLabors/ImageSharp/blob/133d90879b17577032a4cc165014915c0829540e/src/ImageSharp.Drawing/Processing/GradientBrush.cs#L121

[jongleur1983]

thanks @JimBobSquarePants changed the description accordingly. Did not meant to close this issue, sorry for that. Not sure how to undo the stuff the automation did as a result...

[JimBobSquarePants]

@jongleur1983 Don't worry about it mate. I closed another one with a commit message the other day by accident!

[JimBobSquarePants]

Revisiting this after several years.

Hard edges can already be achieved. It works like CSS gradients in that you add additional stops.

For example, the following stops were used to generate the above image.

new ColorStop(0, Color.Red),
new ColorStop(0.5f, Color.Red),
new ColorStop(0.5f, Color.Yellow),
new ColorStop(1f, Color.Yellow)

The difference between 3 and 4 is the result of gamma handling. We can mimic 3 by transforming the colors to the linear equivalent. CSS defaults to our approach though for RGB as it's interpreted as sRGB.