OKLab color gradients were partially implemented (#230)

in RadialGradient.kt and NPointLinearGradient.kt

Add OKLab variation to DemoNPointLinearGradient.kt

Mention OKLab (l, a, b) ranges and meaning.

orx-color/src/commonMain/kotlin/spaces/ColorOKLABa.kt

@@ -6,7 +6,10 @@ import org.openrndr.math.Vector4
 import kotlin.math.pow
 
 /**
- * Color in OKLab color space
+ * Color in OKLab color space.
+ * [l] = lightness: black (0.0) to white (1.0),
+ * [a] = red (-1.0) to green (1.0),
+ * [b] = yellow (-1.0) to blue (1.0).
  */
 data class ColorOKLABa(val l: Double, val a: Double, val b: Double, val alpha: Double = 1.0) :
     ConvertibleToColorRGBa,

orx-shade-styles/src/commonMain/kotlin/NPointLinearGradient.kt

@@ -5,6 +5,8 @@ import org.openrndr.color.ColorRGBa
 import org.openrndr.color.ConvertibleToColorRGBa
 import org.openrndr.draw.ShadeStyle
 import org.openrndr.extra.parameters.Description
+import org.openrndr.extra.shaderphrases.preprocess
+import org.openrndr.extras.color.phrases.ColorPhraseBook
 import org.openrndr.extra.color.spaces.ColorOKLABa
 import org.openrndr.math.CastableToVector4
 import org.openrndr.math.Vector2
@@ -16,7 +18,7 @@ open class NPointLinearGradientBase<C>(
     offset: Vector2 = Vector2.ZERO,
     rotation: Double = 0.0
 ) : ShadeStyle()
-        where C : ConvertibleToColorRGBa, C : AlgebraicColor<C>, C : CastableToVector4 {
+        where C : ConvertibleToColorRGBa, C : AlgebraicColor<C>, C: CastableToVector4 {
 
     var colors: Array<C> by Parameter()
 
@@ -26,11 +28,15 @@ open class NPointLinearGradientBase<C>(
     var rotation: Double by Parameter()
 
     init {
+        ColorPhraseBook.register()
         this.colors = colors
         this.points = points
         this.offset = offset
         this.rotation = rotation
 
+        fragmentPreamble = """
+            |#pragma import color.oklab_to_linear_rgb
+            |#pragma import color.linear_rgb_to_srgb""".trimMargin().preprocess()
         fragmentTransform = """
             vec2 coord = (c_boundsPosition.xy - 0.5 + p_offset);
             

orx-shade-styles/src/commonMain/kotlin/RadialGradient.kt

@@ -6,6 +6,8 @@ import org.openrndr.draw.shadeStyle
 import org.openrndr.extra.parameters.ColorParameter
 import org.openrndr.extra.parameters.Description
 import org.openrndr.extra.parameters.DoubleParameter
+import org.openrndr.extra.shaderphrases.preprocess
+import org.openrndr.extras.color.phrases.ColorPhraseBook
 import org.openrndr.extra.color.spaces.ColorOKLABa
 import org.openrndr.math.CastableToVector4
 import org.openrndr.math.Vector2
@@ -33,6 +35,7 @@ where C : ConvertibleToColorRGBa, C : AlgebraicColor<C>, C: CastableToVector4 {
     var exponent: Double by Parameter()
 
     init {
+        ColorPhraseBook.register()
         this.color0 = color0
         this.color1 = color1
         this.offset = offset
@@ -40,6 +43,9 @@ where C : ConvertibleToColorRGBa, C : AlgebraicColor<C>, C: CastableToVector4 {
         this.length = length
         this.exponent = exponent
 
+        fragmentPreamble = """
+            |#pragma import color.oklab_to_linear_rgb
+            |#pragma import color.linear_rgb_to_srgb""".trimMargin().preprocess()
         fragmentTransform = """
             vec2 coord = (c_boundsPosition.xy - 0.5 + p_offset/2.0) * 2.0;
             

orx-shade-styles/src/demo/kotlin/DemoNPointLinearGradient01.kt

@@ -1,15 +1,15 @@
 import org.openrndr.application
-import org.openrndr.color.ColorRGBa
 import org.openrndr.color.ColorXSVa
 import org.openrndr.color.rgb
-import org.openrndr.extensions.SingleScreenshot
+import org.openrndr.extra.color.spaces.toOKLABa
 import org.openrndr.extra.shadestyles.NPointLinearGradient
+import org.openrndr.extra.shadestyles.NPointLinearGradientOKLab
 import org.openrndr.shape.Rectangle
 import kotlin.math.pow
 import kotlin.math.sin
 
 /**
- * Demonstrate using a multi color linear gradient.
+ * Demonstrate using a multicolor linear gradient.
  * The gradient has 8 static saturated colors.
  * The positions of the colors are first distributed
  * uniformly between 0.0 and 1.0 and then animated towards one of
@@ -19,33 +19,46 @@ fun main() {
     application {
         program {
             val numPoints = 8
-            val gradient = NPointLinearGradient(Array(numPoints) {
+            // Create gradients using two different color spaces
-                ColorXSVa(it * 360.0 / numPoints, 1.0, 1.0).toRGBa()
+            val gradients = listOf(
-            })
+                NPointLinearGradient(Array(numPoints) {
+                    ColorXSVa(it * 360.0 / numPoints, 1.0, 1.0).toRGBa()
+                }),
+                // OKLab is better at maintaining luminosity across the gradient
+                NPointLinearGradientOKLab(Array(numPoints) {
+                    ColorXSVa(it * 360.0 / numPoints, 1.0, 1.0).toRGBa()
+                        .toOKLABa()
+                })
+            )
 
             extend {
+                // The points should be sorted values between 0.0 and 1.0
+                val distribution = Array(numPoints) {
+                    // uniform distribution
+                    // (it / (numPoints - 1.0))
+
+                    // skewed and animated distribution
+                    (it / (numPoints - 1.0)).pow(1.0 + 0.5 * sin(seconds))
+                }
                 drawer.run {
                     clear(rgb(0.2))
-                    // The points should be sorted values between 0.0 and 1.0
-                    gradient.points = Array(numPoints) {
-                        // uniform distribution
-                        // (it / (numPoints - 1.0))
-
-                        // skewed and animated distribution
-                        (it / (numPoints - 1.0)).pow(1.0 + 0.5 * sin(seconds))
-                    }
-                    gradient.rotation = seconds * 10
-                    shadeStyle = gradient
                     stroke = rgb(0.35)
-                    fill = ColorRGBa.WHITE
                     strokeWeight = 8.0
 
-                    gradient.rotation = seconds * 10
+                    gradients.forEachIndexed { i, gradient ->
-                    circle(bounds.position(0.34, 0.5), 110.0)
+                        shadeStyle = gradient
+                        gradient.points = distribution
 
-                    gradient.rotation += 90
+                        gradient.rotation = seconds * 10
-                    rectangle(Rectangle.fromCenter(
+                        circle(bounds.position(0.34, 0.29 + 0.44 * i), 110.0)
-                            bounds.position(0.655, 0.5), 200.0, 200.0))
+
+                        gradient.rotation += 90
+                        rectangle(
+                            Rectangle.fromCenter(
+                                bounds.position(0.655, 0.29 + 0.44 * i), 200.0
+                            )
+                        )
+                    }
                 }
             }
         }