[orx-fx] Directional blur tweaks (#357)

orx-fx/src/jvmDemo/kotlin/DemoDirectionalBlur01.kt

@@ -6,6 +6,19 @@ import org.openrndr.math.smoothstep
 import kotlin.math.cos
 import kotlin.math.sin
 
+/**
+ * Demonstrates how to use [DirectionalBlur] by creating a `direction`
+ * ColorBuffer in which the red and green components of the pixels point
+ * in various directions where to sample pixels from. All the pixel colors
+ * of the ColorBuffer are set one by one using two for loops.
+ *
+ * Note the FLOAT32 color type of the buffer to allow for negative values,
+ * so sampling can happen from every direction.
+ *
+ * Every 60 animation frames the `centerWindow` property is toggled
+ * between true and false to demonstrate how the result changes.
+ *
+ */
 fun main() = application {
     program {
         val db = DirectionalBlur()
@@ -31,6 +44,7 @@ fun main() = application {
                 drawer.image(image)
             }
             db.window = 10
+            db.centerWindow = frameCount % 120 > 60
             db.apply(arrayOf(rt.colorBuffer(0), direction), blurred)
             drawer.image(blurred)
         }

orx-fx/src/jvmDemo/kotlin/DemoDirectionalDisplace01.kt

@@ -0,0 +1,50 @@
+import org.openrndr.application
+import org.openrndr.color.ColorRGBa
+import org.openrndr.color.rgb
+import org.openrndr.draw.ColorType
+import org.openrndr.draw.colorBuffer
+import org.openrndr.draw.loadImage
+import org.openrndr.drawImage
+import org.openrndr.extra.fx.distort.DirectionalDisplace
+import org.openrndr.extra.noise.simplex
+import org.openrndr.extra.shapes.primitives.grid
+import kotlin.math.cos
+
+/**
+ * Demonstrate how to use [DirectionalDisplace].
+ *
+ * The direction map is populated using `drawImage` instead of
+ * pixel by pixel. A grid of circles is drawn, each circle with a
+ * color based on simplex noise. The R and G channels of the colors
+ * control the direction of the sampling. By animating the sampling
+ * distance the result oscillates between no-effect and a noticeable one.
+ */
+fun main() = application {
+    program {
+        val displace = DirectionalDisplace()
+
+        val displaced = colorBuffer(width, height)
+        val direction = drawImage(width, height, type = ColorType.FLOAT32) {
+            clear(ColorRGBa.BLACK)
+            bounds.grid(32, 24).flatten().forEach {
+                fill = rgb(
+                    simplex(133, it.center * 0.004),
+                    simplex(197, it.center * 0.004),
+                    0.0
+                )
+                stroke = null
+
+                //rectangle(it)
+                circle(it.center, 8.0)
+            }
+        }
+        val image = loadImage("demo-data/images/image-001.png")
+        extend {
+            displace.distance = 100.0 + 100.0 * cos(seconds)
+            displace.wrapX = true
+            displace.wrapX = true
+            displace.apply(arrayOf(image, direction), displaced)
+            drawer.image(displaced)
+        }
+    }
+}

orx-fx/src/jvmDemo/kotlin/DemoDirectionalDisplace02.kt

@@ -0,0 +1,45 @@
+import org.openrndr.application
+import org.openrndr.color.ColorRGBa
+import org.openrndr.color.rgb
+import org.openrndr.draw.ColorType
+import org.openrndr.draw.colorBuffer
+import org.openrndr.draw.loadImage
+import org.openrndr.drawImage
+import org.openrndr.extra.fx.distort.DirectionalDisplace
+import org.openrndr.math.Polar
+
+/**
+ * Demonstrate how to use [DirectionalDisplace].
+ *
+ * The program draws 12 overlapping translucent circles on the
+ * `direction` color buffer to produce new color combinations
+ * on the overlapping areas. Those colors specify where the
+ * `DirectionalDisplace` effect will sample pixels from.
+ */
+
+fun main() = application {
+    program {
+        val displace = DirectionalDisplace()
+
+        val displaced = colorBuffer(width, height)
+        val direction = drawImage(width, height, type = ColorType.FLOAT32) {
+            clear(ColorRGBa.BLACK)
+            for(x in 0 until 6) {
+                val offset = Polar(x * 60.0).cartesian
+                fill = rgb(offset.y, offset.x, 0.0, 0.3)
+                stroke = null
+
+                val pos = bounds.center - offset * 110.0
+                circle(pos, 120.0)
+                circle(pos, 80.0)
+            }
+        }
+        val image = loadImage("demo-data/images/image-001.png")
+        extend {
+            displace.distance = 250.0
+            displace.apply(arrayOf(image, direction), displaced)
+            drawer.image(displaced)
+            //drawer.image(direction)
+        }
+    }
+}