Add comments to bezierPatch demos, simplify. (#173)

orx-shapes/src/demo/kotlin/DemoBezierPatch01.kt

@@ -3,7 +3,17 @@ import org.openrndr.color.ColorRGBa
 import org.openrndr.extensions.SingleScreenshot
 import org.openrndr.extra.shapes.bezierPatch
 import org.openrndr.shape.LineSegment
+import org.openrndr.shape.ShapeContour
 
+/**
+ * Shows how to
+ * - create a [bezierPatch] out of 4 [LineSegment]
+ * - create a sub-patch out of a [bezierPatch]
+ * - create horizontal and vertical [ShapeContour]s out of [bezierPatch]es
+ *
+ * The created contours are horizontal and vertical in "bezier-patch space" but
+ * are rendered deformed following the shape of the bezier patch.
+ */
 fun main() {
     application {
         configure {
@@ -16,23 +26,34 @@ fun main() {
                     this.outputFile = System.getProperty("screenshotPath")
                 }
             }
+
+            // helper to get screen locations using normalized uv values
+            fun pos(u: Double, v: Double) = drawer.bounds.position(u, v)
+            val c0 = LineSegment(pos(0.1, 0.1), pos(0.9, 0.1))
+            val c1 = LineSegment(pos(0.4, 0.3), pos(0.6, 0.4))
+            val c2 = LineSegment(pos(0.4, 0.7), pos(0.6, 0.6))
+            val c3 = LineSegment(pos(0.1, 0.9), pos(0.9, 0.9))
+
+            val bp = bezierPatch(c0.segment, c1.segment, c2.segment, c3.segment)
+            val bpSub = bp.sub(0.1, 0.1, 0.6,0.6)
+
             extend {
                 drawer.clear(ColorRGBa.PINK)
-                val c0 = LineSegment(200.0, 100.0, width-200.0, 100.0).contour.segments.first()
-                val c1 = LineSegment(100.0, 150.0, width-100.0, 150.0).contour.segments.first()
-                val c2 = LineSegment(100.0, height-150.0, width-100.0, height-150.0).contour.segments.first()
-                val c3 = LineSegment(200.0, height-100.0, width-200.0, height-100.0).contour.segments.first()
 
+                // Show the line segments that form the bezier patch
+                drawer.stroke = ColorRGBa.YELLOW
+                drawer.strokeWeight = 5.0
+                drawer.lineSegments(listOf(c0, c1, c2, c3))
 
-                val bp = bezierPatch(c0, c1, c2, c3)
+                drawer.strokeWeight = 1.0
-                val bpsub = bp.sub(0.0, 0.0, 0.5, 0.5)
                 for (i in 0..50) {
                     drawer.stroke = ColorRGBa.BLACK
                     drawer.contour(bp.horizontal(i / 50.0))
                     drawer.contour(bp.vertical(i / 50.0))
+
                     drawer.stroke = ColorRGBa.RED
-                    drawer.contour(bpsub.horizontal(i/50.0))
+                    drawer.contour(bpSub.horizontal(i / 50.0))
-                    drawer.contour(bpsub.vertical(i/50.0))
+                    drawer.contour(bpSub.vertical(i / 50.0))
                 }
             }
         }

orx-shapes/src/demo/kotlin/DemoBezierPatch02.kt

@@ -2,12 +2,18 @@ import org.openrndr.application
 import org.openrndr.color.ColorRGBa
 import org.openrndr.extensions.SingleScreenshot
 import org.openrndr.extra.shapes.bezierPatch
-import org.openrndr.math.bezier
 import org.openrndr.shape.Circle
-import org.openrndr.shape.LineSegment
+import org.openrndr.shape.ShapeContour
-import org.openrndr.shape.Rectangle
-import org.openrndr.shape.drawComposition
 
+/**
+ * Shows how to create a [bezierPatch] out of a
+ * closed [ShapeContour] with 4 curved segments.
+ *
+ * Calling [Circle.contour] is one way of producing
+ * such a contour with vertices at the cardinal points
+ * but one can manually create any other 4-segment closed contour
+ * to use in bezier patches.
+ */
 fun main() {
     application {
         configure {
@@ -20,16 +26,17 @@ fun main() {
                     this.outputFile = System.getProperty("screenshotPath")
                 }
             }
-            extend {
+
-                drawer.clear(ColorRGBa.PINK)
             val c = Circle(width / 2.0, height / 2.0, 350.0).contour
             val bp = bezierPatch(c)
 
-                for (i in 0..10) {
+            extend {
+                drawer.clear(ColorRGBa.PINK)
                 drawer.stroke = ColorRGBa.BLACK
+
+                for (i in 0..10) {
                     drawer.contour(bp.horizontal(i / 10.0))
                     drawer.contour(bp.vertical(i / 10.0))
-
                 }
             }
         }

orx-shapes/src/demo/kotlin/DemoBezierPatch03.kt

@@ -1,12 +1,19 @@
 import org.openrndr.application
 import org.openrndr.color.ColorRGBa
-import org.openrndr.extensions.Screenshots
 import org.openrndr.extensions.SingleScreenshot
 import org.openrndr.extra.shapes.bezierPatch
 import org.openrndr.extra.shapes.distort
 import org.openrndr.extra.shapes.regularStarRounded
 import org.openrndr.math.transforms.transform
 import org.openrndr.shape.Circle
+import org.openrndr.shape.ShapeContour
+
+/**
+ * Shows how to distort [ShapeContour]s using a [bezierPatch]
+ *
+ * In this case the contours are regular stars and the bezier patch
+ * is created using a circular contour with the required 4 segments.
+ */
 fun main() {
     application {
         configure {
@@ -19,26 +26,35 @@ fun main() {
                     this.outputFile = System.getProperty("screenshotPath")
                 }
             }
-            extend(Screenshots())
+
+            val bp = bezierPatch(
+                Circle(width / 2.0, height / 2.0, 350.0).contour
+            )
+            val star = regularStarRounded(
+                7, 30.0, 40.0,
+                0.5, 0.5
+            )
+
             extend {
                 drawer.clear(ColorRGBa.PINK)
-                val bp = bezierPatch(Circle(width / 2.0, height / 2.0, 350.0).contour)
 
+                // draw grid
                 for (i in 0..50) {
                     drawer.stroke = ColorRGBa.BLACK
                     drawer.contour(bp.horizontal(i / 50.0))
                     drawer.contour(bp.vertical(i / 50.0))
                 }
+
+                // draw stars
                 drawer.fill = ColorRGBa.PINK
                 for (j in 1 until 10) {
                     for (i in 1 until 10) {
-                        val r = regularStarRounded(7, 30.0, 40.0, 0.5, 0.5).transform(
+                        val starMoved = star.transform(
                             transform {
                                 translate(j * width / 10.0, i * height / 10.0)
                             }
                         )
-                        val dr = bp.distort(r, drawer.bounds)
+                        drawer.contour(bp.distort(starMoved, drawer.bounds))
-                        drawer.contour(dr)
                     }
                 }
             }

orx-shapes/src/demo/kotlin/DemoBezierPatch04.kt

@@ -1,10 +1,16 @@
 import org.openrndr.application
 import org.openrndr.color.ColorRGBa
-import org.openrndr.extensions.Screenshots
 import org.openrndr.extensions.SingleScreenshot
 import org.openrndr.extra.shapes.bezierPatch
 import org.openrndr.shape.Circle
 
+/**
+ * Shows how to get positions and gradient values of those positions
+ * from a [bezierPatch]
+ *
+ * You can think of bezierPatch.position() as requesting points
+ * in a wavy flag (the bezier patch) using normalized uv coordinates.
+ */
 fun main() {
     application {
         configure {
@@ -17,23 +23,26 @@ fun main() {
                     this.outputFile = System.getProperty("screenshotPath")
                 }
             }
+
+            val bp = bezierPatch(
+                Circle(drawer.bounds.center, 350.0).contour
+                //Rectangle.fromCenter(drawer.bounds.center, 550.0).contour
+            )
+
             extend {
                 drawer.clear(ColorRGBa.PINK)
-                val bp = bezierPatch(Circle(width / 2.0, height / 2.0, 350.0).contour)
+                drawer.stroke = ColorRGBa.BLACK
-
-                for (i in 0..50) {
-                    drawer.stroke = ColorRGBa.BLACK.opacify(1.0)
-                }
 
                 for (j in 1 until 50 step 2) {
                     for (i in 1 until 50 step 2) {
-                        val p = bp.position(i / 50.0, j / 50.0)
+                        val u = i / 50.0
-                        val g2 = bp.gradient(i / 50.0, j / 50.0).normalized
+                        val v = j / 50.0
-                        val g = g2.perpendicular()
+                        val pos = bp.position(u, v)
-                        drawer.lineSegment(p, p + g2 * 10.0)
+                        val grad = bp.gradient(u, v).normalized * 10.0
-                        drawer.lineSegment(p, p - g2 * 10.0)
+                        val perpendicular = grad.perpendicular()
-                        drawer.lineSegment(p, p + g * 10.0)
+                        drawer.lineSegment(pos - grad, pos + grad)
-                        drawer.lineSegment(p, p - g * 10.0)
+                        drawer.lineSegment(pos - perpendicular, pos + perpendicular)
+                        //drawer.circle(pos + grad, 3.0)
                     }
                 }
             }