orx/orx-color

orx-color

Color spaces, palettes, histograms, named colors.

Color presets

orx-color adds an extensive list of preset colors to ColorRGBa. Check sources for a listing of the preset colors.

Color histograms

orx-color comes with tools to calculate color histograms for images.

val histogram = calculateHistogramRGB(image)
val colors = histogram.sortedColors()

Color sequences

Easy ways of creating blends between colors.

Using the rangeTo operator:

for (c in ColorRGBa.PINK..ColorRGBa.BLUE.toHSVa() blend 10) {
    drawer.fill = c
    drawer.rectangle(0.0, 0.0, 40.0, 40.0)
    drawer.translate(0.0, 40.0)
}

Or blends for multiple color stops using colorSequence. Blending takes place in the colorspace of the input arguments.

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

for (c in cs blend (width / 40)) {
    drawer.fill = c
    drawer.stroke = null
    drawer.rectangle(0.0, 0.0, 40.0,  height.toDouble())
    drawer.translate(40.0, 0.0)
}

HSLUVa and HPLUVa colorspaces

Two color spaces are added: ColorHSLUVa and ColorHPLUVa, they are an implementation of the colorspaces presented at hsluv.org

Demos

colormap/DemoSpectralZucconiColormap

source code

colormap/DemoSpectralZucconiColormapPhrase

source code

colormap/DemoSpectralZucconiColormapPlot

source code

colormap/DemoTurboColormap

source code

colormap/DemoTurboColormapPhrase

source code

colormap/DemoTurboColormapPlot

source code

colormatrix/DemoColorMatrix01

This demo modifies the displayed image in each grid cell using color matrix transformations to demonstrate color channel inversions based on the grid cell's index. The image is adjusted to fit within each grid cell while maintaining alignment.

Functionality:

• Loads an image from the specified file path.
• Splits the drawing area into an evenly spaced 4x2 grid.
• Applies different color matrix inversions (red, green, blue) based on the position index.
• Fits the image into each grid cell while providing horizontal alignment adjustments.

source code

colormatrix/DemoColorMatrix02

This demo modifies the displayed image in each grid cell using color matrix transformations to demonstrate color channel inversions based on the grid cell's index. The image is adjusted to fit within each grid cell while maintaining alignment.

Functionality:

• Loads an image from the specified file path.
• Splits the drawing area into an evenly spaced 4x2 grid.
• Applies different color matrix inversions (red, green, blue) based on the position index.
• Fits the image into each grid cell while providing horizontal alignment adjustments.

source code

colormatrix/DemoColorMatrix03

Entry point for an application demonstrating the use of color matrix transformations on an image.

The program initializes a graphical application with a resolution of 720x720 pixels and processes an image to display it in a series of grid cells, applying a hue shift transformation based on the index of each cell.

Key features:

• Loads an image from a specified file path.
• Configures the drawing area to consist of a horizontal grid with 16 cells.
• Applies a color tint transformation utilizing the red channel, shifting its hue progressively per cell index to create a colorful gradient effect.
• Adjusts the positions of the images within each grid cell for aesthetic alignment.

source code

colormatrix/DemoColorMatrix04

Entry point of a graphical application that demonstrates the use of color matrix transformations on an image displayed within a grid layout.

Overview:

• Initializes a window with a resolution of 720x720 pixels.
• Loads an image from the specified file path.
• Splits the drawing canvas into a 7x1 grid of cells.
• In each grid cell, applies custom grayscale transformations to the image using a color matrix. The grayscale transformation coefficients for red, green, and blue channels are computed based on the index of the grid cell.
• Displays the adjusted image in each grid cell with horizontal alignment modifications to position the images dynamically based on their index within the grid.

source code

colorRange/DemoColorRange01

source code

colorRange/DemoColorRange02

source code

colorRange/DemoColorRange03

source code

colorRange/DemoColorRange04

source code

DemoColorPalette01

Demonstrates the creation of color palettes using various available methods

source code

DemoColorPalette02

By default, generated palettes contain colors of varying hue but similar brightness and saturation. Here we alter the brightness of each color using .shade() for an increased dynamic range.

source code

DemoColorPlane01

Visualizes a plane of ColorOKLCH colors as small 3D spheres inside a 3D box. The plane represents all available hues and chromas. The luminosity used to create the colors is modulated over time with a slow sine wave. Instanced rendering is used to render 90 x 100 colored spheres, each with a unique position based on the RGB components of the color.

Since the OKLCH color space is larger than the RGB space, some spheres would be outside the 3D box, but they are actually clipped to the walls.

source code

DemoColorPlane02

source code

DemoColorSequence01

A demo that demonstrates 3D objects with custom shading and color gradients.

The application setup involves:

• Configuring the application window dimensions.
• Creating a color gradient using ColorSequence and converting it to a ColorBuffer for shading purposes.
• Defining a 3D sphere mesh with specified resolution.

The rendering process includes:

• Setting up an orbital camera extension to provide an interactive 3D view.
• Applying a custom fragment shader with a palette-based shading style.
• Rendering a grid of 3D spheres, each transformed and rotated to create a dynamic pattern.

source code

DemoDeltaE

source code

DemoFettePalette01

source code

DemoFettePalette02

source code

DemoHSLUV01

source code

DemoHSLUV02

source code

DemoHueTools01

source code

DemoMixSpectral01

source code

DemoOKHSV01

source code

DemoXSLUV01

source code

histogram/DemoHistogram01

package histogram

import org.openrndr.application import org.openrndr.draw.loadImage import org.openrndr.extra.color.statistics.calculateHistogramRGB

/* Demonstrates how to generate a palette with the top 32 colors of a loaded image, sorted by luminosity. The colors are displayed as rectangles overlayed on top of the image.

source code

histogram/DemoHistogram02

package histogram

import org.openrndr.application import org.openrndr.draw.loadImage import org.openrndr.extra.color.statistics.calculateHistogramRGB import kotlin.math.pow

/* Show the color histogram of an image using non-uniform weighting, prioritizing bright colors.

source code

histogram/DemoHistogram03

package histogram

import org.openrndr.application import org.openrndr.draw.loadImage import org.openrndr.extra.color.statistics.calculateHistogramRGB

/* Create a simple grid-like composition based on colors sampled from image. The cells are 32 by 32 pixels in size and are filled with a random sample taken from the color histogram of the image.

Note: due to its random nature the resulting animation contains flickering colors.

source code