orx/orx-fx/README.md

orx-fx

Ready-to-use GPU-based visual effects or filters. Most include orx-parameters annotations so they can be easily controlled via orx-gui.

The provided filters are based on OPENRNDR's Filter class

All filters provided by orx-fx assume pre-multiplied alpha inputs, which is OPENRNDR's default.

Effects index

Here's a (potentially incomplete) list of the effects provided by orx-fx. Explore the source for an up-to-date list.

Anti-alias

• FXAA, fast approximate anti-aliasing.

Blends

Blend filters take two inputs ("source" and "destination"), they are intended to be used in orx-compositor's layer blend. All blend filters are opacity preserving.

Photoshop-style blends

• ColorBurn
• ColorDodge
• Darken
• HardLight
• Lighten
• Multiply
• Normal
• Overlay
• Screen
• Add, add source and destination inputs
• Subtract, substract destination color from source color

Porter-Duff blends

• SourceIn, Porter-Duff source-in blend, intersect source and destination opacity and keep source colors
• SourceOut, Porter-Duff source-out blend, subtract destination from source opacity and keep source colors
• SourceAtop, Porter-Duff source-atop blend, uses destination opacity, layers source on top and keeps both colors
• DestinationIn, Porter-Duff destination-in blend, intersect source and destination opacity and keep source colors
• DestinationOut, Porter-Duff destination-out blend, subtract destination from source opacity and keep destination colors
• DestinationAtop, Porter-Duff destination-atop blend, uses source opacity, layers destination on top and keeps both colors
• Xor, Porter-Duff xor blend, picks colors from input with highest opacity or none with opacities are equal

Various blends

• Passthrough, pass source color and opacity.

Blurs

Most blur effects are opacity preserving

• ApproximateGaussianBlur, a somewhat faster but less precise implementation of GaussianBlur
• Bloom, a multi-pass bloom/glow effect
• BoxBlur, a simple but fast box blur
• FrameBlur
• GaussianBlur, a slow but precise Gaussian blur
• HashBlur, a noisy blur effect
• LaserBlur
• LineBlur
• MipBloom
• ZoomBlur, a directional blur with a zooming effect

Color

• ChromaticAberration, a chromatic aberration effect based on RGB color separation
• ColorCorrection, corrections for brightness, contrast, saturation and hue
• ColorLookup, Color LUT filter
• ColorMix, filter implementation of OPENRNDR's color matrix mixing
• Duotone, maps luminosity to two colors, very similar to LumaMap but uses LAB color interpolation.
• DuotoneGradient, a two-point gradient version of Duotone
• Invert
• LumaMap, maps luminosity to two colors
• LumaOpacity, maps luminosity to opacity but retains source color
• LumaThreshold, applies a treshold on the input luminosity and maps to two colors
• Posterize, a posterize effect
• Sepia, applies a reddish-brown monochrome tint that imitates an old photograph
• SetBackground
• SubtractConstant, subtract a constant color from the source color

Color conversion

• OkLabToRgb
• RgbToOkLab

Distortion

All distortion effects are opacity preserving

• BlockRepeat - repeats a single configurable block of the source input
• DisplaceBlend
• Fisheye
• FluidDistort
• Lenses
• HorizontalWave - applies a horizontal wave effect on the source input
• VerticalWave - applies a vertical wave effect on the source input
• PerspectivePlane - applies a planar perspective distortion on the source input
• Perturb
• PolarToRectangular
• RectangularToPolar
• StackRepeat - repeats the source input in a stack fashion
• StretchWaves
• TapeNoise
• Tiles
• VideoGlitch

Dither

• ADither - a selection of dithering effects
• CMYKHalftone - a configurable CMYK halftoning effect
• Crosshatch - crosshatching effect
• LumaHalftone - a halftoning effect based on luminosity

Edges

• LumaSobel - A Sobel-kernel based luminosity edge detector
• EdgesWork - An edges filter doubling as erosion
• Contour - detects multi-level contours
• New: CannyEdgeDetector

Grain

• FilmGrain - adds film-like grain to the source input

Shadow

• DropShadow - adds a drop shadow based on the opacity in the input image

Tonemap

• Uncharted2Tonemap - implements the Uncharted2 tonemapper

Transform

• FlipVertically - flips the source input vertically.

Post extension

The Post extension provides an easy way to apply filters to your drawings. Allocating and resizing color buffers is all taken care of by Post.

To get additional intermediate color buffers one can access intermediate[x]

fun main() = application {
    configure {
        windowResizable = true
    }
    program {
        extend(Post()) {
            val blur = ApproximateGaussianBlur()
            val add = Add()
            post { input, output ->
                blur.window = 50
                blur.sigma = 50.0
                blur.apply(input, intermediate[0])
                add.apply(arrayOf(input, intermediate[0]), output)
            }
        }
        extend {
            drawer.circle(width / 2.0, height / 2.0, 100.0)
        }
    }
}

Colormap

Colormap filters operate only on the RED color channel. For example depth maps from orx-depth-camera.

They allow selection of min / max value range and applying exponential shaping curve within this range:

• GrayscaleColormap - maps to gray tones
• SpectralZucconiColormap - maps to natural light dispersion spectrum as described by Alan Zucconi in the Improving the Rainbow article.
• TurboColormap - maps to Turbo Colormap according to Turbo, An Improved Rainbow Colormap for Visualization by Google.

Demos

DemoApproximateGaussianBlur01

source code

DemoBlur01

source code

DemoCannyEdgeDetector01

source code

DemoColorDuotone01

source code

DemoColorDuotoneGradient01

source code

DemoColormapGrayscale

source code

DemoColormapSpectralZucconi

source code

DemoColormapTurbo

source code

DemoColorPosterize01

source code

DemoCompositeFilter01

source code

DemoContour01

Demonstrate the Contour filter @author Edwin Jakobs

source code

DemoDirectionalBlur01

Demonstrates how to use [DirectionalBlur] by creating a direction ColorBuffer in which the red and green components of the pixels point in various directions where to sample pixels from. All the pixel colors of the ColorBuffer are set one by one using two for loops.

Note the FLOAT32 color type of the buffer to allow for negative values, so sampling can happen from every direction.

Every 60 animation frames the centerWindow property is toggled between true and false to demonstrate how the result changes.

source code

DemoDirectionalDisplace01

Demonstrate how to use [DirectionalDisplace].

The direction map is populated using drawImage instead of pixel by pixel. A grid of circles is drawn, each circle with a color based on simplex noise. The R and G channels of the colors control the direction of the sampling. By animating the sampling distance the result oscillates between no-effect and a noticeable one.

source code

DemoDirectionalDisplace02

Demonstrate how to use [DirectionalDisplace].

The program draws 12 overlapping translucent circles on the direction color buffer to produce new color combinations on the overlapping areas. Those colors specify where the DirectionalDisplace effect will sample pixels from.

source code

DemoDistortLenses01

source code

DemoDitherLumaHalftone01

source code

DemoFluidDistort01

source code

DemoOkLab01

This demonstrates converting a [ColorBuffer] from and to (OK)LAB color space using the [RgbToOkLab] and [OkLabToRgb] filters. The (OK)Lab representation is signed and requires a floating point representation.

source code

DemoPost01

source code

DemoSpectralBlend01

source code