Add more n-point gradients (#139)

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

@@ -1,13 +1,15 @@
 import org.openrndr.application
 import org.openrndr.color.ColorRGBa
-import org.openrndr.color.ColorXSVa
 import org.openrndr.draw.isolated
 import org.openrndr.extensions.SingleScreenshot
 import org.openrndr.extra.shadestyles.*
 import org.openrndr.math.Polar
 import org.openrndr.shape.Rectangle
-import kotlin.random.Random
 
+/**
+ * Example of 5 gradient styles.
+ * NPointLinear and NPoingGradient have separate demos.
+ */
 fun main() {
     application {
         configure {
@@ -25,7 +27,7 @@ fun main() {
             val gradients = listOf(
                     RadialGradient(ColorRGBa.PINK, ColorRGBa.WHITE),
                     AngularGradient(ColorRGBa.PINK, ColorRGBa.WHITE),
-                    NPointGradient(4, Array(4) {
+                    NPointGradient(Array(4) {
                         ColorRGBa.PINK.shade(it / 3.0)
                     }),
                     LinearGradient(ColorRGBa.PINK, ColorRGBa.WHITE),
@@ -72,7 +74,7 @@ fun main() {
                                 is NPointGradient -> {
                                     // Animate points.
                                     // We could also animate colors.
-                                    gradient.points = Array(gradient.numPoints) {
+                                    gradient.points = Array(gradient.colors.size) {
                                         rect.center + Polar(it * 90.0 +
                                                 column * 36 - seconds * 10,
                                                 40.0).cartesian

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

@@ -27,7 +27,7 @@ fun main() {
             }
 
             val numPoints = 8
-            val gradient = NPointGradient(numPoints, Array(numPoints) {
+            val gradient = NPointGradient(Array(numPoints) {
                 ColorXSVa(it * 360.0 / numPoints, 1.0, 1.0).toRGBa()
             })
 

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

@@ -0,0 +1,59 @@
+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.shadestyles.NPointLinearGradient
+import org.openrndr.shape.Rectangle
+import kotlin.math.pow
+import kotlin.math.sin
+
+/**
+ * Demonstrate using a multi color 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
+ * the ends over time using pow() and sin(seconds).
+ */
+fun main() {
+    application {
+        program {
+            if (System.getProperty("takeScreenshot") == "true") {
+                extend(SingleScreenshot()) {
+                    this.outputFile = System.getProperty("screenshotPath")
+                }
+            }
+
+            val numPoints = 8
+            val gradient = NPointLinearGradient(Array(numPoints) {
+                ColorXSVa(it * 360.0 / numPoints, 1.0, 1.0).toRGBa()
+            })
+
+            extend {
+                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
+                    circle(bounds.position(0.34, 0.5), 110.0)
+
+                    gradient.rotation += 90
+                    rectangle(Rectangle.fromCenter(
+                            bounds.position(0.655, 0.5), 200.0, 200.0))
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,47 @@
+import org.openrndr.application
+import org.openrndr.color.ColorRGBa
+import org.openrndr.color.rgb
+import org.openrndr.extensions.SingleScreenshot
+import org.openrndr.extra.shadestyles.NPointRadialGradient
+import org.openrndr.shape.Circle
+import kotlin.random.Random
+
+/**
+ * Demonstrate using a multi color radial gradient.
+ * The gradient has 5 colors (first and last ones are transparent).
+ * Any of the properties can be animated, including colors and points.
+ * See DemoNPointLinearGradient01.kt for an example of animated properties.
+ */
+fun main() {
+    application {
+        program {
+            if (System.getProperty("takeScreenshot") == "true") {
+                extend(SingleScreenshot()) {
+                    this.outputFile = System.getProperty("screenshotPath")
+                }
+            }
+
+            val gradient = NPointRadialGradient(arrayOf(
+                    ColorRGBa.PINK.opacify(0.0),
+                    ColorRGBa.PINK, ColorRGBa.WHITE, ColorRGBa.PINK,
+                    ColorRGBa.PINK.opacify(0.0)
+            ), arrayOf(0.0, 0.4, 0.5, 0.6, 1.0))
+
+            val circles = List(25) {
+                Circle(Random.nextDouble() * drawer.width,
+                        Random.nextDouble() * drawer.height,
+                        Random.nextDouble() * 150.0)
+            }
+
+            extend {
+                drawer.run {
+                    clear(rgb(0.2))
+                    shadeStyle = gradient
+                    fill = ColorRGBa.WHITE
+                    stroke = null
+                    circles(circles)
+                }
+            }
+        }
+    }
+}