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

[orx-shadestyles] Improve gradient and imageFill shadestyles

Browse Source
This commit is contained in:
Edwin Jakobs
2025-02-25 12:16:57 +01:00
parent 21a3d7f483
commit 9a93d95318
30 changed files with 1296 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
orx-shade-styles/src/jvmDemo/kotlin/DemoAllGradients01.kt
View File

@@ -1,89 +0,0 @@
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.draw.isolated
import org.openrndr.extra.shadestyles.*
import org.openrndr.math.Polar
import org.openrndr.shape.Rectangle
/**
* Example of 5 gradient styles.
* NPointLinear and NPoingGradient have separate demos.
*/
fun main() = application {
configure {
width = 1000
height = 500
}
program {
// Create gradients with initial colors
val gradients = listOf(
RadialGradient(ColorRGBa.PINK, ColorRGBa.WHITE),
AngularGradient(ColorRGBa.PINK, ColorRGBa.WHITE),
NPointGradient(Array(4) {
ColorRGBa.PINK.shade(it / 3.0)
}),
LinearGradient(ColorRGBa.PINK, ColorRGBa.WHITE),
HalfAngularGradient(ColorRGBa.PINK, ColorRGBa.WHITE)
)
extend {
gradients.forEachIndexed { gradientId, gradient ->
for (column in 0 until 10) {
val color1 = ColorRGBa.PINK.toHSVa().shiftHue(column * 12.0)
.shade(0.5).toRGBa()
val w = width.toDouble() / 10.0
val h = height.toDouble() / gradients.size
val rect = Rectangle(column * w, gradientId * h, w, h)
val offset = Polar((seconds + column) * 15.0, 0.3).cartesian
drawer.isolated {
when (gradient) {
is RadialGradient -> {
gradient.color1 = color1
gradient.exponent = column / 3.0 + 0.3
gradient.length = 0.6
gradient.offset = offset
}
is AngularGradient -> {
gradient.color1 = color1
gradient.exponent = column / 3.0 + 0.3
gradient.rotation = (seconds - column) * 10.0
gradient.offset = offset
}
is LinearGradient -> {
gradient.color1 = color1
gradient.exponent = column / 3.0 + 0.3
gradient.rotation = seconds * 10.0
}
is HalfAngularGradient -> {
gradient.color1 = color1
gradient.exponent = column / 3.0 + 0.3
gradient.rotation = (column - seconds) * 10.0
gradient.offset = offset
}
is NPointGradient -> {
// Animate points.
// We could also animate colors.
gradient.points = Array(gradient.colors.size) {
rect.center + Polar(
it * 90.0 +
column * 36 - seconds * 10,
40.0
).cartesian
}
}
}
shadeStyle = gradient
rectangle(rect)
}
}
}
}
}
}

23
orx-shade-styles/src/jvmDemo/kotlin/DemoImageFit01.kt
View File

@@ -1,23 +0,0 @@
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.draw.loadImage
import org.openrndr.extra.shadestyles.imageFit
import org.openrndr.extra.shadestyles.linearGradient
import org.openrndr.math.Vector2
import org.openrndr.shape.Circle
import kotlin.math.cos
import kotlin.math.sin
fun main() = application {
program {
val image = loadImage("demo-data/images/image-001.png")
extend {
drawer.shadeStyle = imageFit(image, Vector2(cos(seconds), sin(seconds))) + linearGradient(ColorRGBa.RED, ColorRGBa.BLUE)
drawer.circle(drawer.bounds.center, 200.0)
drawer.rectangle(10.0, 10.0, 400.0, 50.0)
drawer.rectangle(10.0, 10.0, 50.0, 400.0)
drawer.contour(Circle(width/2.0, height/2.0, 50.0).contour)
}
}
}

23
orx-shade-styles/src/jvmDemo/kotlin/DemoLinearGradient.kt
View File

@@ -1,23 +0,0 @@
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extra.color.spaces.toOKLABa
import org.openrndr.extra.shadestyles.linearGradient
fun main() = application {
program {
extend {
drawer.shadeStyle = linearGradient(
ColorRGBa.RED.toOKLABa(),
ColorRGBa.BLUE.toOKLABa(),
)
drawer.rectangle(120.0, 40.0, 200.0, 400.0)
drawer.shadeStyle = linearGradient(
ColorRGBa.RED,
ColorRGBa.BLUE
)
drawer.rectangle(120.0 + 200.0, 40.0, 200.0, 400.0)
}
}
}

44
orx-shade-styles/src/jvmDemo/kotlin/DemoNPointGradient01.kt
View File

@@ -1,44 +0,0 @@
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.color.ColorXSVa
import org.openrndr.extra.shadestyles.NPointGradient
import org.openrndr.math.Polar
import org.openrndr.shape.ShapeContour
import kotlin.math.PI
import kotlin.math.cos
/**
* Demonstrate using an n-point gradient.
* The gradient has 8 points in screen coordinates and 8 colors.
* The colors are fixed, the points of the gradient move.
* A contour is drawn using the same points from the gradient,
* but note that this is not necessary: you can animate the gradient
* on a static shape (a circle for example) or you can animate a shape
* with a static gradient.
*/
fun main() = application {
program {
val numPoints = 8
val gradient = NPointGradient(Array(numPoints) {
ColorXSVa(it * 360.0 / numPoints, 1.0, 1.0).toRGBa()
})
extend {
drawer.run {
clear(ColorRGBa.WHITE.shade(0.9))
val t = PI * 2 * (frameCount % 300) / 300.0
val points = Array(numPoints) {
val lfo = cos(it * PI / 2 - t)
val theta = it * 360.0 / numPoints - 22.5 * lfo
val radius = 200 + 170 * lfo
bounds.center + Polar(theta, radius).cartesian
}
gradient.points = points
shadeStyle = gradient
stroke = ColorRGBa.WHITE
strokeWeight = 4.0
contour(ShapeContour.fromPoints(points.asList(), true))
}
}
}
}

64
orx-shade-styles/src/jvmDemo/kotlin/DemoNPointLinearGradient01.kt
View File

@@ -1,64 +0,0 @@
import org.openrndr.application
import org.openrndr.color.ColorXSVa
import org.openrndr.color.rgb
import org.openrndr.extra.color.spaces.toOKLABa
import org.openrndr.extra.shadestyles.NPointLinearGradient
import org.openrndr.extra.shadestyles.NPointLinearGradientOKLab
import org.openrndr.shape.Rectangle
import kotlin.math.pow
import kotlin.math.sin
/**
* Demonstrate using a multicolor linear gradient.
* The gradient has 8 static saturated colors.
* The positions of the colors are first distributed
* uniformly between 0.0 and 1.0 and then animated towards one of
* the ends over time using pow() and sin(seconds).
*/
fun main() = application {
program {
val numPoints = 8
// Create gradients using two different color spaces
val gradients = listOf(
NPointLinearGradient(Array(numPoints) {
ColorXSVa(it * 360.0 / numPoints, 1.0, 1.0).toRGBa()
}),
// OKLab is better at maintaining luminosity across the gradient
NPointLinearGradientOKLab(Array(numPoints) {
ColorXSVa(it * 360.0 / numPoints, 1.0, 1.0).toRGBa()
.toOKLABa()
})
)
extend {
// The points should be sorted values between 0.0 and 1.0
val distribution = Array(numPoints) {
// uniform distribution
// (it / (numPoints - 1.0))
// skewed and animated distribution
(it / (numPoints - 1.0)).pow(1.0 + 0.5 * sin(seconds))
}
drawer.run {
clear(rgb(0.2))
stroke = rgb(0.35)
strokeWeight = 8.0
gradients.forEachIndexed { i, gradient ->
shadeStyle = gradient
gradient.points = distribution
gradient.rotation = seconds * 10
circle(bounds.position(0.34, 0.29 + 0.44 * i), 110.0)
gradient.rotation += 90
rectangle(
Rectangle.fromCenter(
bounds.position(0.655, 0.29 + 0.44 * i), 200.0
)
)
}
}
}
}
}

42
orx-shade-styles/src/jvmDemo/kotlin/DemoNPointRadialGradient01.kt
View File

@@ -1,42 +0,0 @@
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.color.rgb
import org.openrndr.extra.shadestyles.NPointRadialGradient
import org.openrndr.shape.Circle
import kotlin.random.Random
/**
* Demonstrate using a multicolor radial gradient.
* The gradient has 5 colors (first and last ones are transparent).
* Any of the properties can be animated, including colors and points.
* See DemoNPointLinearGradient01.kt for an example of animated properties.
*/
fun main() = application {
program {
val gradient = NPointRadialGradient(
arrayOf(
ColorRGBa.PINK.opacify(0.0),
ColorRGBa.PINK, ColorRGBa.WHITE, ColorRGBa.PINK,
ColorRGBa.PINK.opacify(0.0)
), arrayOf(0.0, 0.4, 0.5, 0.6, 1.0)
)
val circles = List(25) {
Circle(
Random.nextDouble() * drawer.width,
Random.nextDouble() * drawer.height,
Random.nextDouble() * 150.0
)
}
extend {
drawer.run {
clear(rgb(0.2))
shadeStyle = gradient
fill = ColorRGBa.WHITE
stroke = null
circles(circles)
}
}
}
}

17
orx-shade-styles/src/jvmDemo/kotlin/DemoRadialGradient01.kt
View File

@@ -1,17 +0,0 @@
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extra.shadestyles.radialGradient
import kotlin.math.cos
fun main() = application {
program {
extend {
drawer.shadeStyle = radialGradient(
ColorRGBa.PINK,
ColorRGBa.PINK.toHSVa().shiftHue(180.0).shade(0.5).toRGBa(),
exponent = cos(seconds) * 0.5 + 0.5
)
drawer.rectangle(120.0, 40.0, 400.0, 400.0)
}
}
}

80
orx-shade-styles/src/jvmDemo/kotlin/gradients/DemoGradient01.kt Normal file
View File

@@ -0,0 +1,80 @@
package gradients
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extra.shadestyles.fills.SpreadMethod
import org.openrndr.extra.shadestyles.fills.gradients.gradient
import org.openrndr.math.Vector2
import kotlin.math.cos
fun main() {
application {
configure {
width = 720
height = 720
}
program {
extend {
drawer.shadeStyle = gradient<ColorRGBa> {
stops[0.0] = ColorRGBa.RED
stops[0.1] = ColorRGBa.GREEN
stops[0.2] = ColorRGBa.PINK
stops[0.9] = ColorRGBa.WHITE
stops[1.0] = ColorRGBa.BLACK
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)
drawer.shadeStyle = gradient<ColorRGBa> {
stops[0.0] = ColorRGBa.RED
stops[0.1] = ColorRGBa.GREEN
stops[0.2] = ColorRGBa.PINK
stops[0.9] = ColorRGBa.WHITE
stops[1.0] = ColorRGBa.BLACK
spreadMethod = SpreadMethod.REFLECT
stellar {
radius = (cos(seconds) * 0.25 + 0.5) * 0.5
sharpness = 0.5
sides = 6
rotation = seconds * 36.0
}
}
drawer.rectangle(360.0, 0.0, 360.0, 360.0)
drawer.shadeStyle = gradient<ColorRGBa> {
stops[0.0] = ColorRGBa.RED
stops[0.1] = ColorRGBa.GREEN
stops[0.2] = ColorRGBa.PINK
stops[0.9] = ColorRGBa.WHITE
stops[1.0] = ColorRGBa.BLACK
spreadMethod = SpreadMethod.REFLECT
radial {
radius = (cos(seconds) * 0.25 + 0.5) * 0.5
}
}
drawer.rectangle(360.0, 360.0, 360.0, 360.0)
drawer.shadeStyle = gradient<ColorRGBa> {
stops[0.0] = ColorRGBa.RED
stops[0.1] = ColorRGBa.GREEN
stops[0.2] = ColorRGBa.PINK
stops[0.9] = ColorRGBa.WHITE
stops[1.0] = ColorRGBa.BLACK
spreadMethod = SpreadMethod.REPEAT
linear {
start = Vector2(0.45, 0.45).rotate(seconds * 36.0)
end = Vector2(0.55, 0.55).rotate(seconds * 36.0)
}
}
drawer.rectangle(0.0, 360.0, 360.0, 360.0)
}
}
}
}

64
orx-shade-styles/src/jvmDemo/kotlin/gradients/DemoGradient02.kt Normal file
View File

@@ -0,0 +1,64 @@
package gradients
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.draw.loadFont
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
fun main() {
application {
configure {
width = 720
height = 720
}
program {
extend {
drawer.shadeStyle = gradient<ColorRGBa> {
stops[0.0] = ColorRGBa.BLUE_STEEL
stops[0.75] = ColorRGBa.WHITE
stops[0.8] = ColorRGBa.BLACK
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; } """
stellar {
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
stops[0.8] = ColorRGBa.BLACK
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; } """
stellar {
radius = drawer.bounds.width/4.0
center = drawer.bounds.position(0.5, 0.0)
sides = 6
sharpness = 0.5
rotation = seconds * 36.0
}
}
drawer.fontMap = loadFont("demo-data/fonts/IBMPlexMono-Regular.ttf", 196.0)
for (i in 0 until 5) {
drawer.text("Gradient", 0.0, 128.0 + i * drawer.height / 5.0)
}
}
}
}
}

36
orx-shade-styles/src/jvmDemo/kotlin/gradients/DemoGradient03.kt Normal file
View File

@@ -0,0 +1,36 @@
package gradients
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extra.color.presets.BLUE_STEEL
import org.openrndr.extra.color.spaces.OKHSV
import org.openrndr.extra.color.tools.shiftHue
import org.openrndr.extra.shadestyles.fills.SpreadMethod
import org.openrndr.extra.shadestyles.fills.gradients.gradient
import org.openrndr.math.Vector2
fun main() {
application {
configure {
width = 720
height = 720
}
program {
extend {
drawer.shadeStyle = gradient<ColorRGBa> {
for (i in 0 .. 10) {
stops[i/10.0] = ColorRGBa.RED.shiftHue<OKHSV>(i * 36.0)
}
spreadMethod = SpreadMethod.REFLECT
conic {
center = Vector2(0.5, 0.5)
angle = 360.0
rotation = seconds * 10.0
}
}
drawer.rectangle(drawer.bounds)
}
}
}
}

25
orx-shade-styles/src/jvmDemo/kotlin/image/DemoImageFill01.kt Normal file
View File

@@ -0,0 +1,25 @@
package image
import org.openrndr.application
import org.openrndr.draw.loadImage
import org.openrndr.extra.shadestyles.fills.FillUnits
import org.openrndr.extra.shadestyles.fills.SpreadMethod
import org.openrndr.extra.shadestyles.fills.image.imageFill
import org.openrndr.math.transforms.transform
fun main() = application {
configure {
width = 720
height = 720
}
program {
var img = loadImage("demo-data/images/image-001.png")
extend {
drawer.shadeStyle = imageFill {
image = img
}
drawer.circle(drawer.bounds.center, 200.0)
}
}
}

35
orx-shade-styles/src/jvmDemo/kotlin/image/DemoImageFill02.kt Normal file
View File

@@ -0,0 +1,35 @@
package image
import org.openrndr.application
import org.openrndr.draw.loadImage
import org.openrndr.extra.shadestyles.fills.FillUnits
import org.openrndr.extra.shadestyles.fills.SpreadMethod
import org.openrndr.extra.shadestyles.fills.image.imageFill
import org.openrndr.math.transforms.transform
import kotlin.math.cos
fun main() = application {
configure {
width = 720
height = 720
}
program {
var img = loadImage("demo-data/images/image-001.png")
extend {
for (i in 0 until 10) {
drawer.shadeStyle = imageFill {
image = img
fillTransform = transform {
translate(0.5, 0.5)
rotate( cos(i * 0.5 + seconds*10.0) *10.0 )
scale(1.0 - i * 0.05)
translate(-0.5, -0.5)
}
}
//drawer.stroke = null
drawer.circle(drawer.bounds.center, 360.0 - i * 18.0)
}
}
}
}

30
orx-shade-styles/src/jvmDemo/kotlin/image/DemoImageFill03.kt Normal file
View File

@@ -0,0 +1,30 @@
package image
import org.openrndr.application
import org.openrndr.draw.loadImage
import org.openrndr.extra.shadestyles.fills.FillUnits
import org.openrndr.extra.shadestyles.fills.SpreadMethod
import org.openrndr.extra.shadestyles.fills.image.imageFill
import org.openrndr.math.transforms.transform
import kotlin.math.cos
fun main() = application {
configure {
width = 720
height = 720
}
program {
var img = loadImage("demo-data/images/image-001.png")
extend {
drawer.shadeStyle = imageFill {
image = img
parameters["time"] = seconds
domainWarpFunction = """vec2 if_domainWarp(vec2 p) { return p + vec2(cos(p.y * 20.0 + p_time), sin(p.x * 20.0 + p_time)) * 0.1; }"""
spreadMethodX = SpreadMethod.REFLECT
spreadMethodY = SpreadMethod.REFLECT
}
drawer.circle(drawer.bounds.center, 360.0)
}
}
}