kaze/orx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[orx-shade-styles] Write comments on demos

Browse Source
This commit is contained in:
Abe Pazos
2025-09-20 19:07:38 +02:00
parent ec9ec947a6
commit ec4032c452
29 changed files with 298 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
orx-shade-styles/src/jvmDemo/kotlin/gradients/DemoGradient01.kt
View File

@@ -7,6 +7,14 @@ import org.openrndr.extra.shadestyles.fills.gradients.gradient
import org.openrndr.math.Vector2
import kotlin.math.cos
/**
* Demonstrates how to create 4 animated gradient shade-styles with 5 colors:
* - a linear gradient
* - a stellar gradient
* - a radial gradient
* - a linear gradient with `SpreadMethod.REPEAT`
* Each gradient style has different adjustable attributes.
*/
fun main() {
application {
configure {
@@ -25,7 +33,6 @@ fun main() {
linear {
start = Vector2(0.1, 0.1).rotate(seconds * 36.0, Vector2(0.5, 0.5))
end = Vector2(0.9, 0.9).rotate(seconds * 36.0, Vector2(0.5, 0.5))
}
}
drawer.rectangle(0.0, 0.0, 360.0, 360.0)

30
orx-shade-styles/src/jvmDemo/kotlin/gradients/DemoGradient02.kt
View File

@@ -8,6 +8,18 @@ import org.openrndr.extra.shadestyles.fills.FillUnits
import org.openrndr.extra.shadestyles.fills.SpreadMethod
import org.openrndr.extra.shadestyles.fills.gradients.gradient
/**
* An application with two animated layers of slightly different stellar shade styles.
*
* The bottom layer features a rectangle, while the top layer includes a large text
* repeated 5 times.
*
* The only different between the two shade styles is a minor change in the `levelWarp`
* function, which is used to alter the gradient's level (its normalized `t` value)
* based on the current coordinates being processed, and the original level at this location.
*
* Without this difference, the shader would look identical, and the text would be invisible.
*/
fun main() {
application {
configure {
@@ -24,18 +36,22 @@ fun main() {
quantization = 10
fillUnits = FillUnits.WORLD
spreadMethod = SpreadMethod.REFLECT
levelWarpFunction = """float levelWarp(vec2 p, float level) { return level + cos(p.x*0.01 + level)*0.1; } """
levelWarpFunction = """
float levelWarp(vec2 p, float level) {
return level + cos(p.x * 0.01 + level) * 0.1;
}
""".trimIndent()
stellar {
radius = drawer.bounds.width/4.0
radius = drawer.bounds.width / 4.0
center = drawer.bounds.position(0.5, 0.0)
sides = 6
sharpness = 0.5
rotation = seconds * 36.0
}
}
drawer.rectangle(drawer.bounds)
drawer.shadeStyle = gradient<ColorRGBa> {
stops[0.0] = ColorRGBa.BLUE_STEEL
stops[0.75] = ColorRGBa.WHITE
@@ -44,10 +60,14 @@ fun main() {
quantization = 10
fillUnits = FillUnits.WORLD
spreadMethod = SpreadMethod.REFLECT
levelWarpFunction = """float levelWarp(vec2 p, float level) { return level + 0.1 + cos(p.x*0.01 + level)*0.1; } """
levelWarpFunction = """
float levelWarp(vec2 p, float level) {
return level + 0.1 + cos(p.x * 0.01 + level) * 0.1;
}
""".trimIndent()
stellar {
radius = drawer.bounds.width/4.0
radius = drawer.bounds.width / 4.0
center = drawer.bounds.position(0.5, 0.0)
sides = 6
sharpness = 0.5

5
orx-shade-styles/src/jvmDemo/kotlin/gradients/DemoGradient03.kt
View File

@@ -8,6 +8,11 @@ import org.openrndr.extra.shadestyles.fills.SpreadMethod
import org.openrndr.extra.shadestyles.fills.gradients.gradient
import org.openrndr.math.Vector2
/**
* Demonstrates how to create a rainbow-like rotating `conic` gradient in `OKHSV` color space.
* The gradient consists of ten evenly spaced colors, achieved by shifting the hue of a base color.
* Since the conic gradient covers 360 degrees, changing the `spreadMethod` does not affect the result.
*/
fun main() {
application {
configure {

9
orx-shade-styles/src/jvmDemo/kotlin/gradients/DemoGradient04.kt
View File

@@ -11,6 +11,15 @@ import org.openrndr.extra.shapes.primitives.grid
import org.openrndr.extra.shapes.primitives.placeIn
import org.openrndr.math.Vector2
/**
* Creates a 3x3 grid of gradients demonstrating how the same gradient can look different depending on
* the aspect ratio of the target shape and the fit method used.
*
* The first column features a vertical rectangle.
* The second one, a square, and the third one a horizontal rectangle.
*
* The rows feature the different fit methods: `FillFit.STRETCH`, `FillFit.COVER` and `FillFit.CONTAIN`.
*/
fun main() {
application {
configure {

11
orx-shade-styles/src/jvmDemo/kotlin/gradients/DemoGradient05.kt
View File

@@ -6,7 +6,18 @@ import org.openrndr.extra.color.presets.BLUE_STEEL
import org.openrndr.extra.shadestyles.fills.FillUnits
import org.openrndr.extra.shadestyles.fills.SpreadMethod
import org.openrndr.extra.shadestyles.fills.gradients.gradient
import org.openrndr.math.Vector2
/**
* Reveals the effect of using quantization on a `conic` gradient.
* By using a `quantization` of 10 we get 9 color bands.
*
* Notice how the center of the `conic` gradient is specified in
* screen coordinates. To make this possible, we need to set the
* `fillUnits` to `FillUnits.WORLD`. By default, the center of
* the gradient coordinates is `Vector2(0.5, 0.5)`.
*
*/
fun main() {
application {
configure {

9
orx-shade-styles/src/jvmDemo/kotlin/gradients/DemoGradient06.kt
View File

@@ -10,6 +10,15 @@ import kotlin.math.PI
import kotlin.math.cos
import kotlin.math.sin
/**
* Demonstrates how to animate the `radiusX` and `radiusY` elliptic gradient arguments separately.
* They are animated in a circular fashion, making the ellipse transition between a thin vertical shape,
* a round shape, and a thin horizontal shape.
*
* The `SpreadMethod.REPEAT` setting makes the gradient cover the available space repeating the gradient
* as many times as needed.
*
*/
fun main() = application {
configure {
width = 720

10
orx-shade-styles/src/jvmDemo/kotlin/gradients/DemoGradient07.kt
View File

@@ -10,6 +10,14 @@ import org.openrndr.extra.shadestyles.fills.gradients.gradient
import org.openrndr.extra.shapes.primitives.grid
import org.openrndr.math.Vector2
/**
* A design with 48 vertical bands with gradients. Each one has a unique `quantization`
* value based on the index of the band. All bands have 2 color `stops`:
* `WHITE` at the top (position 0.0), and `BLACK` near the bottom (near position 1.0),
* with the exact value depending on the `quantization` value.
*
* Demonstrates how to produce a quantized gradient with a specific number of equal color bands.
*/
fun main() = application {
configure {
width = 720
@@ -25,7 +33,7 @@ fun main() = application {
drawer.shadeStyle = gradient<ColorRGBa> {
quantization = index + 2
stops[0.0] = ColorRGBa.WHITE
stops[ (quantization) / (quantization+1.0)] = ColorRGBa.BLACK
stops[(quantization) / (quantization + 1.0)] = ColorRGBa.BLACK
fillUnits = FillUnits.BOUNDS
fillFit = FillFit.COVER

13
orx-shade-styles/src/jvmDemo/kotlin/gradients/DemoGradient08.kt
View File

@@ -12,6 +12,13 @@ import org.openrndr.math.Vector2
import org.openrndr.math.asDegrees
import kotlin.math.atan2
/**
* Demonstrates the creation of a grid-based design with 13x13 cells, each with an elliptic gradient
* pointing towards the center of the window. The center cell features a circular gradient (by having
* `radiusX` equal to `radiusY`). The farther a cell is from the center, the higher the aspect ratio
* of the ellipse is, becoming closer to a line than to a circle near the corners.
*
*/
fun main() =
application {
configure {
@@ -32,10 +39,10 @@ fun main() =
spreadMethod = SpreadMethod.REPEAT
elliptic {
val v = Vector2(x-6.0, y-6.0)
rotation = atan2(y- 6.0, x - 6.0).asDegrees + 180.0
val v = Vector2(x - 6.0, y - 6.0)
rotation = atan2(y - 6.0, x - 6.0).asDegrees + 180.0
radiusX = 1.0
radiusY = 1.0 / (1.0 + v.length*0.25)
radiusY = 1.0 / (1.0 + v.length * 0.25)
}
}
drawer.rectangle(cell)

11
orx-shade-styles/src/jvmDemo/kotlin/gradients/DemoGradient09.kt
View File

@@ -11,6 +11,17 @@ import org.openrndr.extra.shadestyles.fills.SpreadMethod
import org.openrndr.extra.shadestyles.fills.gradients.gradient
import org.openrndr.extra.shadestyles.fills.patterns.pattern
/**
* Demonstrates two types of shade styles: `pattern` and `luma`.
*
* The `pattern` shade style is used to generate a checkers-pattern.
*
* This example also loads and draws an image using the `luma` shade style
* to map pixel brightnesses to gradient colors. Dark colors are
* mapped to transparent, revealing the checkers-pattern behind it
* in parts of the image.
*
*/
fun main() = application {
configure {
width = 720