[orx-shapes] Demo comments

This commit is contained in:
Abe Pazos
2025-08-30 23:56:56 +02:00
parent 2c3417dad6
commit ea4a2c0d89
12 changed files with 196 additions and 64 deletions

View File

@@ -5,6 +5,15 @@ import org.openrndr.color.ColorRGBa
import org.openrndr.extra.shapes.bezierpatches.bezierPatch
import org.openrndr.shape.Circle
/**
* Demonstrates how to draw a bezier patch and its corresponding contours.
* The bezier patch is generated from a circular shape and is assigned colors
* for each control point. The patch is subdivided into horizontal and vertical
* contours, which are rendered to visualize the structure of the bezier patch.
*
* The bezier patch constructor expects a contour with 4 segments, for example
* a rectangular contour or a circle, which in OPENRNDR is made out of 4 segments.
*/
fun main() = application {
program {
extend {

View File

@@ -7,6 +7,17 @@ import org.openrndr.extra.color.spaces.toOKLABa
import org.openrndr.extra.shapes.bezierpatches.bezierPatch
import org.openrndr.shape.Circle
/**
* Demonstrates how to use bezier patches with specified colors and displays text labels for
* the color space used in each. This method:
*
* - Creates two bezier patches with different color spaces (RGB and OKLab).
* - Draws these bezier patches using the drawer.
* - Renders text labels to differentiate the color spaces used.
*
* The bezier patches are created from closed circular contours and colored by specifying
* a grid of colors matching the patch's vertices.
*/
fun main() = application {
configure {
width = 720

View File

@@ -13,56 +13,66 @@ import org.openrndr.shape.Circle
import org.openrndr.shape.Rectangle
import kotlin.math.min
/**
* Demonstrates how to render a grid of bezier patches that morph between a rectangle and
* a rotated circle contour.
* These shapes are transformed into bezier patches, and their colors are interpolated through a blend
* factor calculated for each cell in the grid.
*
* The grid layout contains 4 columns and 4 rows with margins and gutters.
* Each cell's center serves as the drawing position for a blended bezier patch.
*/
fun main() = application {
configure {
width = 720
height = 720
}
program {
val colors = listOf(
listOf(
ColorRGBa.PINK.toOKLABa(),
ColorRGBa.PINK.toOKLABa(),
ColorRGBa.PINK.toOKLABa(),
ColorRGBa.PINK.toOKLABa()
),
listOf(
ColorRGBa.RED.toOKLABa(),
ColorRGBa.RED.toOKLABa(),
ColorRGBa.RED.toOKLABa(),
ColorRGBa.RED.toOKLABa()
),
listOf(
ColorRGBa.BLUE.toOKLABa(),
ColorRGBa.BLUE.toOKLABa(),
ColorRGBa.BLUE.toOKLABa(),
ColorRGBa.BLUE.toOKLABa()
),
listOf(
ColorRGBa.WHITE.toOKLABa(),
ColorRGBa.WHITE.toOKLABa(),
ColorRGBa.WHITE.toOKLABa(),
ColorRGBa.WHITE.toOKLABa()
),
)
val grid = drawer.bounds.grid(4, 4, marginX = 20.0, marginY = 20.0, gutterX = 10.0, gutterY = 10.0)
val cellWidth = grid[0][0].width
val cellHeight = grid[0][0].height
val a = bezierPatch(Rectangle.fromCenter(Vector2.ZERO, cellWidth, cellHeight).contour)
.withColors(colors)
val b = bezierPatch(
Circle(Vector2.ZERO, min(cellWidth, cellHeight) / 2.0).contour.transform(
buildTransform {
rotate(Vector3.UNIT_Z, 45.0)
}
)
).withColors(colors)
extend {
drawer.clear(ColorRGBa.BLACK)
val colors = listOf(
listOf(
ColorRGBa.PINK.toOKLABa(),
ColorRGBa.PINK.toOKLABa(),
ColorRGBa.PINK.toOKLABa(),
ColorRGBa.PINK.toOKLABa()
),
listOf(
ColorRGBa.RED.toOKLABa(),
ColorRGBa.RED.toOKLABa(),
ColorRGBa.RED.toOKLABa(),
ColorRGBa.RED.toOKLABa()
),
listOf(
ColorRGBa.BLUE.toOKLABa(),
ColorRGBa.BLUE.toOKLABa(),
ColorRGBa.BLUE.toOKLABa(),
ColorRGBa.BLUE.toOKLABa()
),
listOf(
ColorRGBa.WHITE.toOKLABa(),
ColorRGBa.WHITE.toOKLABa(),
ColorRGBa.WHITE.toOKLABa(),
ColorRGBa.WHITE.toOKLABa()
),
)
val grid = drawer.bounds.grid(4, 4, marginX = 20.0, marginY = 20.0, gutterX = 10.0, gutterY = 10.0)
val cellWidth = grid[0][0].width
val cellHeight = grid[0][0].height
val a = bezierPatch(Rectangle.fromCenter(Vector2(0.0, 0.0), cellWidth, cellHeight).contour)
.withColors(colors)
val b = bezierPatch(
Circle(0.0, 0.0, min(cellWidth, cellHeight) / 2.0).contour.transform(
buildTransform {
rotate(Vector3.UNIT_Z, 45.0)
}
)
).withColors(colors)
for (y in grid.indices) {
for (x in grid[y].indices) {

View File

@@ -0,0 +1,56 @@
package bezierpatch
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extra.noise.uniform
import org.openrndr.extra.shapes.adjust.adjustContour
import org.openrndr.extra.shapes.bezierpatches.bezierPatch
import org.openrndr.math.Vector3
import kotlin.random.Random
/**
* Demonstrates how to create and render a bezier patch with randomized control points
* and colors. The bezier patch is derived from a scaled-down copy of the
* drawer bounds, converted to a contour and deformed using `adjustContour`.
*
* The bezier patch uses 16 randomly generated colors chunked into 4 lists with 4 colors each.
*
*/
fun main() = application {
program {
val r = Random(1213)
val bp = bezierPatch(
adjustContour(drawer.bounds.offsetEdges(-50.0).contour) {
vertices.forEach {
it.rotate(Double.uniform(10.0, 30.0, r))
}
}
).withColors(
List(16) {
ColorRGBa.fromVector(Vector3.uniform(0.0, 1.0, r))
}.chunked(4)
)
extend {
drawer.clear(ColorRGBa.PINK)
// Render the colored patch
drawer.bezierPatch(bp)
// Render horizontal and vertical lines in the patch
drawer.stroke = ColorRGBa.BLACK.opacify(0.3)
for (i in 0 until 20) {
drawer.contour(bp.horizontal(i / 19.0))
}
for (i in 0 until 10) {
drawer.contour(bp.vertical(i / 9.0))
}
// Render the contour of the patch
drawer.fill = null
drawer.stroke = ColorRGBa.WHITE
drawer.strokeWeight = 3.0
drawer.contour(bp.contour)
}
}
}