Add descriptions to demos

This commit is contained in:
Abe Pazos
2025-11-22 19:08:30 +01:00
parent 72368deb85
commit 522627ca51
45 changed files with 608 additions and 89 deletions

View File

@@ -1,8 +1,5 @@
package colorRange
// Comparison of color lists generated by interpolating from
// PINK to BLUE in different color models
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extra.color.palettes.rangeTo
@@ -11,6 +8,10 @@ import org.openrndr.math.Vector2
import org.openrndr.math.map
import org.openrndr.shape.Rectangle
/**
* Comparison of color lists generated by interpolating from
* `PINK` to `BLUE` in six different color spaces.
*/
fun main() = application {
configure {
width = 720

View File

@@ -1,12 +1,19 @@
package colorRange
// Create a colorSequence with multiple color models
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extra.color.palettes.colorSequence
import org.openrndr.extra.color.spaces.toHSLUVa
/**
* Demonstrates how to create a `ColorSequence` containing three colors, one of them in the HSLUV color space.
*
* Each color in the sequence is assigned a normalized position: in this program, one at the start (0.0),
* one in the middle (0.5) and one at the end (1.0).
*
* The `ColorSpace.blend()` method is used to get a list with 18 interpolated `ColorRGBa` colors,
* then those colors are drawn as vertical rectangles covering the whole window.
*/
fun main() = application {
configure {
width = 720
@@ -14,14 +21,16 @@ fun main() = application {
}
program {
extend {
val cs = colorSequence(0.0 to ColorRGBa.PINK,
0.5 to ColorRGBa.BLUE,
1.0 to ColorRGBa.PINK.toHSLUVa()) // <-- note this one is in hsluv
val cs = colorSequence(
0.0 to ColorRGBa.PINK,
0.5 to ColorRGBa.BLUE,
1.0 to ColorRGBa.PINK.toHSLUVa() // <-- note this color is in HSLUV
)
for (c in cs blend (width / 40)) {
drawer.fill = c
drawer.stroke = null
drawer.rectangle(0.0, 0.0, 40.0, height.toDouble())
drawer.rectangle(0.0, 0.0, 40.0, height.toDouble())
drawer.translate(40.0, 0.0)
}
}

View File

@@ -6,36 +6,43 @@ import org.openrndr.draw.loadFont
import org.openrndr.extra.color.palettes.rangeTo
import org.openrndr.extra.color.spaces.*
/**
* This program creates color interpolations from `ColorRGBa.BLUE` to
* `ColorRGBa.PINK` in 25 steps in multiple color spaces.
*
* The window height is adjusted based on the number of interpolations to show.
*
* The resulting gradients differ in saturation and brightness and apparently include more
* `BLUE` or more `PINK` depending on the chosen color space.
*/
fun main() = application {
val colorA = ColorRGBa.BLUE
val colorB = ColorRGBa.PINK
val stepCount = 25
val allSteps = listOf(
"RGB" to (colorA..colorB blend stepCount),
"RGB linear" to (colorA.toLinear()..colorB.toLinear() blend stepCount),
"HSV" to (colorA..colorB.toHSVa() blend stepCount),
"Lab" to (colorA.toLABa()..colorB.toLABa() blend stepCount),
"LCh(ab)" to (colorA.toLCHABa()..colorB.toLCHABa() blend stepCount),
"OKLab" to (colorA.toOKLABa()..colorB.toOKLABa() blend stepCount),
"OKLCh" to (colorA.toOKLCHa()..colorB.toOKLCHa() blend stepCount),
"OKHSV" to (colorA.toOKHSVa()..colorB.toOKHSVa() blend stepCount),
"OKHSL" to (colorA.toOKHSLa()..colorB.toOKHSLa() blend stepCount),
"HSLUV" to (colorA.toHSLUVa()..colorB.toHSLUVa() blend stepCount),
"XSLUV" to (colorA.toXSLUVa()..colorB.toXSLUVa() blend stepCount),
)
configure {
width = 720
height = 30 + 50 * 11 // row count
height = 30 + 50 * allSteps.size
}
program {
extend {
drawer.clear(ColorRGBa.WHITE)
val colorA = ColorRGBa.BLUE
val colorB = ColorRGBa.PINK
val stepCount = 25
val allSteps = listOf(
"RGB" to (colorA..colorB blend stepCount),
"RGB linear" to (colorA.toLinear()..colorB.toLinear() blend stepCount),
"HSV" to (colorA..colorB.toHSVa() blend stepCount),
"Lab" to (colorA.toLABa()..colorB.toLABa() blend stepCount),
"LCh(ab)" to (colorA.toLCHABa()..colorB.toLCHABa() blend stepCount),
"OKLab" to (colorA.toOKLABa()..colorB.toOKLABa() blend stepCount),
"OKLCh" to (colorA.toOKLCHa()..colorB.toOKLCHa() blend stepCount),
"OKHSV" to (colorA.toOKHSVa()..colorB.toOKHSVa() blend stepCount),
"OKHSL" to (colorA.toOKHSLa()..colorB.toOKHSLa() blend stepCount),
"HSLUV" to (colorA.toHSLUVa()..colorB.toHSLUVa() blend stepCount),
"XSLUV" to (colorA.toXSLUVa()..colorB.toXSLUVa() blend stepCount),
)
drawer.stroke = null
drawer.fontMap = loadFont("demo-data/fonts/IBMPlexMono-Regular.ttf", 16.0)
drawer.translate(20.0, 20.0)
for ((label, steps) in allSteps) {

View File

@@ -14,6 +14,20 @@ import org.openrndr.extra.color.spaces.toXSLUVa
import org.openrndr.extra.meshgenerators.sphereMesh
import org.openrndr.math.Vector3
/**
* A visualization of color interpolations inside a 3D RGB cube with an interactive 3D `Orbital` camera.
*
* The hues of the source and target colors are animated over time.
*
* The color interpolations are shown simultaneously in nine different color spaces, revealing how in
* each case they share common starting and ending points in 3D, but have unique paths going from
* start to end.
*
* By rotating the cube 90 degrees towards the left and slightly zooming out, one can appreciate how
* one of the points moves along the edges of the cube, while the other moves on the edges of a
* smaller, invisible cube.
*
*/
fun main() = application {
configure {
width = 720
@@ -44,9 +58,6 @@ fun main() = application {
"XSLUV" to (colorA.toXSLUVa()..colorB.toXSLUVa() blend stepCount),
)
drawer.stroke = null
drawer.fontMap = loadFont("demo-data/fonts/IBMPlexMono-Regular.ttf", 16.0)
for ((_, steps) in allSteps) {
for (i in steps.indices) {
val srgb = steps[i].toSRGB().clip()

View File

@@ -5,6 +5,14 @@ import org.openrndr.extra.color.colormaps.spectralZucconi6
import org.openrndr.extra.noise.fastFloor
import kotlin.math.sin
/**
* This program demonstrates the `spectralZucconi6()` function, which
* takes a normalized value and returns a `ColorRGBa` using the
* accurate spectral colormap developed by Alan Zucconi.
*
* It draws a varying number of vertical bands (between 16 and 48)
* filled with various hues.
*/
fun main() = application {
configure {
width = 720
@@ -14,12 +22,13 @@ fun main() = application {
extend {
drawer.stroke = null
val stripeCount = 32 + (sin(seconds) * 16.0).fastFloor()
val bandWidth = width / stripeCount.toDouble()
repeat(stripeCount) { i ->
drawer.fill = spectralZucconi6(i / stripeCount.toDouble())
drawer.rectangle(
x = i * width / stripeCount.toDouble(),
x = i * bandWidth,
y = 0.0,
width = width / stripeCount.toDouble(),
width = bandWidth,
height = height.toDouble(),
)
}

View File

@@ -5,6 +5,15 @@ import org.openrndr.draw.shadeStyle
import org.openrndr.extra.color.colormaps.ColormapPhraseBook
import org.openrndr.extra.shaderphrases.preprocess
/**
* This program demonstrates how to use the shader-based version of
* the `spectral_zucconi6()` function, which
* takes a normalized value and returns an `rgb` color using the
* accurate spectral colormap developed by Alan Zucconi.
*
* It shades a full-window rectangle using its normalized `x` coordinate
* in a `ShadeStyle` to choose pixel colors.
*/
fun main() = application {
configure {
width = 720

View File

@@ -8,6 +8,13 @@ import org.openrndr.extra.color.colormaps.spectralZucconi6
import org.openrndr.extra.shaderphrases.preprocess
import org.openrndr.math.Vector2
/**
* This demo uses the shader based `spectral_zucconi6()` function to fill the background,
* then visualizes the red, green and blue components of the colors used in the background
* as red, green and blue line strips.
*
* The Vector2 points for the line strips are calculated only once when the program starts.
*/
fun main() = application {
configure {
width = 720
@@ -20,14 +27,14 @@ fun main() = application {
fragmentTransform = "x_fill.rgb = spectral_zucconi6(c_boundsPosition.x);"
}
// Function that expects as an argument a function to convert a ColorRGBa into a Double,
// and returns a list of Vector2 coordinates.
fun getColormapPoints(
block: ColorRGBa.() -> Double
) = List(width) { x ->
Vector2(
x.toDouble(),
height.toDouble()
- block(spectralZucconi6(x / width.toDouble()))
* height.toDouble()
(1.0 - block(spectralZucconi6(x / width.toDouble()))) * height
)
}
@@ -39,11 +46,13 @@ fun main() = application {
shadeStyle = backgroundStyle
rectangle(bounds)
shadeStyle = null
strokeWeight = 1.0
stroke = ColorRGBa.RED
lineStrip(redPoints)
stroke = ColorRGBa.GREEN
lineStrip(greenPoints)
stroke = ColorRGBa.BLUE
lineStrip(bluePoints)
}

View File

@@ -5,6 +5,15 @@ import org.openrndr.extra.color.colormaps.turboColormap
import org.openrndr.extra.noise.fastFloor
import kotlin.math.sin
/**
* This program demonstrates the `turboColormap()` function, which
* takes a normalized value and returns a `ColorRGBa` using the
* Turbo colormap developed by Google.
*
* It draws a varying number of vertical bands (between 16 and 48)
* filled with various hues.
*/
fun main() = application {
configure {
width = 720

View File

@@ -5,6 +5,15 @@ import org.openrndr.draw.shadeStyle
import org.openrndr.extra.color.colormaps.ColormapPhraseBook
import org.openrndr.extra.shaderphrases.preprocess
/**
* This program demonstrates how to use the shader-based version of
* the `turbo_colormap()` function, which
* takes a normalized value and returns an `rgb` color using the
* Turbo colormap developed by Google.
*
* It shades a full-window rectangle using its normalized `x` coordinate
* in a `ShadeStyle` to choose pixel colors.
*/
fun main() = application {
configure {
width = 720

View File

@@ -8,6 +8,13 @@ import org.openrndr.extra.color.colormaps.turboColormap
import org.openrndr.extra.shaderphrases.preprocess
import org.openrndr.math.Vector2
/**
* This demo uses the shader based `turbo_colormap()` function to fill the background,
* then visualizes the red, green and blue components of the colors used in the background
* as red, green and blue line strips.
*
* The Vector2 points for the line strips are calculated only once when the program starts.
*/
fun main() = application {
configure {
width = 720
@@ -23,10 +30,8 @@ fun main() = application {
block: ColorRGBa.() -> Double
) = List(width) { x ->
Vector2(
x = x.toDouble(),
y = height.toDouble()
- block(turboColormap(x / width.toDouble()))
* height.toDouble()
x.toDouble(),
(1.0 - block(turboColormap(x / width.toDouble()))) * height
)
}
val redPoints = getColormapPoints { r }
@@ -37,11 +42,13 @@ fun main() = application {
shadeStyle = backgroundStyle
rectangle(bounds)
shadeStyle = null
strokeWeight = 1.0
stroke = ColorRGBa.RED
lineStrip(redPoints)
stroke = ColorRGBa.GREEN
lineStrip(greenPoints)
stroke = ColorRGBa.BLUE
lineStrip(bluePoints)
}