From 8d6b82a24e8d8fc269f2335c60d062d14f02485b Mon Sep 17 00:00:00 2001 From: Abe Pazos Date: Tue, 23 Feb 2021 08:24:10 +0100 Subject: [PATCH] Add comments to bezierPatch demos, simplify. (#173) --- .../src/demo/kotlin/DemoBezierPatch01.kt | 41 ++++++++++++++----- .../src/demo/kotlin/DemoBezierPatch02.kt | 27 +++++++----- .../src/demo/kotlin/DemoBezierPatch03.kt | 34 +++++++++++---- .../src/demo/kotlin/DemoBezierPatch04.kt | 35 ++++++++++------ 4 files changed, 95 insertions(+), 42 deletions(-) diff --git a/orx-shapes/src/demo/kotlin/DemoBezierPatch01.kt b/orx-shapes/src/demo/kotlin/DemoBezierPatch01.kt index 18c022d7..cac3cb07 100644 --- a/orx-shapes/src/demo/kotlin/DemoBezierPatch01.kt +++ b/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) - val bpsub = bp.sub(0.0, 0.0, 0.5, 0.5) + drawer.strokeWeight = 1.0 for (i in 0..50) { drawer.stroke = ColorRGBa.BLACK - drawer.contour(bp.horizontal(i/50.0)) - drawer.contour(bp.vertical(i/50.0)) + 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.vertical(i/50.0)) + drawer.contour(bpSub.horizontal(i / 50.0)) + drawer.contour(bpSub.vertical(i / 50.0)) } } } diff --git a/orx-shapes/src/demo/kotlin/DemoBezierPatch02.kt b/orx-shapes/src/demo/kotlin/DemoBezierPatch02.kt index f7644330..44b836eb 100644 --- a/orx-shapes/src/demo/kotlin/DemoBezierPatch02.kt +++ b/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.Rectangle -import org.openrndr.shape.drawComposition +import org.openrndr.shape.ShapeContour +/** + * 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") } } + + val c = Circle(width / 2.0, height / 2.0, 350.0).contour + val bp = bezierPatch(c) + extend { drawer.clear(ColorRGBa.PINK) - val c = Circle(width/2.0, height/2.0, 350.0).contour - val bp = bezierPatch(c) + drawer.stroke = ColorRGBa.BLACK for (i in 0..10) { - drawer.stroke = ColorRGBa.BLACK - drawer.contour(bp.horizontal(i/10.0)) - drawer.contour(bp.vertical(i/10.0)) - + drawer.contour(bp.horizontal(i / 10.0)) + drawer.contour(bp.vertical(i / 10.0)) } } } diff --git a/orx-shapes/src/demo/kotlin/DemoBezierPatch03.kt b/orx-shapes/src/demo/kotlin/DemoBezierPatch03.kt index cb330491..d686e682 100644 --- a/orx-shapes/src/demo/kotlin/DemoBezierPatch03.kt +++ b/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( - transform { - translate(j * width / 10.0, i * height / 10.0) - } + val starMoved = star.transform( + transform { + translate(j * width / 10.0, i * height / 10.0) + } ) - val dr = bp.distort(r, drawer.bounds) - drawer.contour(dr) + drawer.contour(bp.distort(starMoved, drawer.bounds)) } } } diff --git a/orx-shapes/src/demo/kotlin/DemoBezierPatch04.kt b/orx-shapes/src/demo/kotlin/DemoBezierPatch04.kt index 45d192c9..2b9e54bd 100644 --- a/orx-shapes/src/demo/kotlin/DemoBezierPatch04.kt +++ b/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) - - for (i in 0..50) { - drawer.stroke = ColorRGBa.BLACK.opacify(1.0) - } + drawer.stroke = ColorRGBa.BLACK 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 g2 = bp.gradient(i / 50.0, j / 50.0).normalized - val g = g2.perpendicular() - drawer.lineSegment(p, p + g2 * 10.0) - drawer.lineSegment(p, p - g2 * 10.0) - drawer.lineSegment(p, p + g * 10.0) - drawer.lineSegment(p, p - g * 10.0) + val u = i / 50.0 + val v = j / 50.0 + val pos = bp.position(u, v) + val grad = bp.gradient(u, v).normalized * 10.0 + val perpendicular = grad.perpendicular() + drawer.lineSegment(pos - grad, pos + grad) + drawer.lineSegment(pos - perpendicular, pos + perpendicular) + //drawer.circle(pos + grad, 3.0) } } }