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

OKLab color gradients were partially implemented (#230)

Browse Source 
in RadialGradient.kt and NPointLinearGradient.kt

Add OKLab variation to DemoNPointLinearGradient.kt

Mention OKLab (l, a, b) ranges and meaning.
This commit is contained in:
Abe Pazos
2022-02-28 21:00:25 +01:00
committed by GitHub
parent ccc3ed5bbc
commit 6e29423448
4 changed files with 52 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
orx-shade-styles/src/demo/kotlin/DemoNPointLinearGradient01.kt
View File

@@ -1,15 +1,15 @@
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.color.ColorXSVa
import org.openrndr.color.rgb
import org.openrndr.extensions.SingleScreenshot
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 multi color linear gradient.
* 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
@@ -19,33 +19,46 @@ fun main() {
application {
program {
val numPoints = 8
val gradient = NPointLinearGradient(Array(numPoints) {
ColorXSVa(it * 360.0 / numPoints, 1.0, 1.0).toRGBa()
})
// 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))
// The points should be sorted values between 0.0 and 1.0
gradient.points = Array(numPoints) {
// uniform distribution
// (it / (numPoints - 1.0))
// skewed and animated distribution
(it / (numPoints - 1.0)).pow(1.0 + 0.5 * sin(seconds))
}
gradient.rotation = seconds * 10
shadeStyle = gradient
stroke = rgb(0.35)
fill = ColorRGBa.WHITE
strokeWeight = 8.0
gradient.rotation = seconds * 10
circle(bounds.position(0.34, 0.5), 110.0)
gradients.forEachIndexed { i, gradient ->
shadeStyle = gradient
gradient.points = distribution
gradient.rotation += 90
rectangle(Rectangle.fromCenter(
bounds.position(0.655, 0.5), 200.0, 200.0))
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
)
)
}
}
}
}