Class: ColorMatrixFilter

PIXI.filters.ColorMatrixFilter

The ColorMatrixFilter class lets you apply a 5x4 matrix transformation on the RGBA color and alpha values of every pixel on your displayObject to produce a result with a new set of RGBA color and alpha values. It's pretty powerful!

 let colorMatrix = new PIXI.filters.ColorMatrixFilter();
 container.filters = [colorMatrix];
 colorMatrix.contrast(2);

Extends

Members

alpha number

The opacity value to use when mixing the original and resultant colors.

When the value is 0, the original color is used without modification. When the value is 1, the result color is used. When in the range (0, 1) the color is interpolated between the original and result by this amount.

Default Value:
  • 1

matrix Array<number>

The matrix of the color matrix filter

Default Value:
  • [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]

Methods

blackAndWhite (multiply) void

ColorMatrixFilter.ts:188

Set the black and white matrice.

Name Type Description
multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

brightness (b, multiply) void

ColorMatrixFilter.ts:125

Adjusts brightness

Name Type Description
b number

value of the brigthness (0-1, where 0 is black)

multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

browni (multiply) void

ColorMatrixFilter.ts:425

Brown delicious browni filter (thanks Dominic Szablewski)

Name Type Description
multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

colorTone (desaturation, toned, lightColor, darkColor, multiply) void

ColorMatrixFilter.ts:461

We don't know exactly what it does, kind of gradient map, but funny to play with!

Name Type Description
desaturation number

Tone values.

toned number

Tone values.

lightColor number

Tone values, example: 0xFFE580

darkColor number

Tone values, example: 0xFFE580

multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

contrast (amount, multiply) void

ColorMatrixFilter.ts:259

Set the contrast matrix, increase the separation between dark and bright Increase contrast : shadows darker and highlights brighter Decrease contrast : bring the shadows up and the highlights down

Name Type Description
amount number

value of the contrast (0-1)

multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

desaturate () void

ColorMatrixFilter.ts:306

Desaturate image (remove color)

Call the saturate function

greyscale (scale, multiply) void

ColorMatrixFilter.ts:169

Set the matrices in grey scales

Name Type Description
scale number

value of the grey (0-1, where 0 is black)

multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

hue (rotation, multiply) void

ColorMatrixFilter.ts:206

Set the hue property of the color

Name Type Description
rotation number

in degrees

multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

kodachrome (multiply) void

ColorMatrixFilter.ts:407

Color reversal film introduced by Eastman Kodak in 1935. (thanks Dominic Szablewski)

Name Type Description
multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

lsd (multiply) void

ColorMatrixFilter.ts:554

LSD effect

Multiply the current matrix

Name Type Description
multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

negative (multiply) void

ColorMatrixFilter.ts:317

Negative image (inverse of classic rgb matrix)

Name Type Description
multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

night (intensity, multiply) void

ColorMatrixFilter.ts:496

Night effect

Name Type Description
intensity number

The intensity of the night effect.

multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

polaroid (multiply) void

ColorMatrixFilter.ts:371

Polaroid filter

Name Type Description
multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

predator (amount, multiply) void

ColorMatrixFilter.ts:517

Predator effect

Erase the current matrix by setting a new indepent one

Name Type Description
amount number

how much the predator feels his future victim

multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

reset () void

ColorMatrixFilter.ts:574

Erase the current matrix by setting the default one

saturate (amount, multiply) void

ColorMatrixFilter.ts:283

Set the saturation matrix, increase the separation between colors Increase saturation : increase contrast, brightness, and sharpness

Name Type Attributes Default Description
amount number 0

The saturation amount (0-1)

multiply boolean <optional>

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

sepia (multiply) void

ColorMatrixFilter.ts:335

Sepia image

Name Type Description
multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

technicolor (multiply) void

ColorMatrixFilter.ts:353

Color motion picture process invented in 1916 (thanks Dominic Szablewski)

Name Type Description
multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

tint (color, multiply) void

ColorMatrixFilter.ts:144

Sets each channel on the diagonal of the color matrix. This can be used to achieve a tinting effect on Containers similar to the tint field of some display objects like Sprite, Text, Graphics, and Mesh.

Name Type Attributes Description
color number

Color of the tint. This is a hex value.

multiply boolean <optional>

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

toBGR (multiply) void

ColorMatrixFilter.ts:389

Filter who transforms : Red -> Blue and Blue -> Red

Name Type Description
multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

vintage (multiply) void

ColorMatrixFilter.ts:443

Vintage filter (thanks Dominic Szablewski)

Name Type Description
multiply boolean

if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

Inherited Properties

From class PIXI.Filter

autoFit boolean inherited

If enabled, PixiJS will fit the filter area into boundaries for better performance. Switch it off if it does not work for specific shader.

Default Value:
  • true

blendMode number inherited

Sets the blendmode of the filter

Default Value:
  • PIXI.BLEND_MODES.NORMAL

enabled boolean inherited

If enabled is true the filter is applied, if false it will not.

Default Value:
  • true

legacy boolean readonly inherited

Legacy filters use position and uvs from attributes (set by filter system)

The samples of the filter.

padding number inherited

The padding of the filter. Some filters require extra space to breath such as a blur. Increasing this will add extra width and height to the bounds of the object that the filter is applied to.

Default Value:
  • 0

resolution number inherited

The resolution of the filter. Setting this to be lower will lower the quality but increase the performance of the filter.

The WebGL state the filter requires to render

From class PIXI.Shader

Program that the shader uses

uniforms object readonly inherited

Shader uniform values, shortcut for uniformGroup.uniforms

Inherited Methods

From class PIXI.Filter

apply (filterManager, input, output, clearMode, currentState) void inherited

Filter.ts:253

Applies the filter

Name Type Attributes Description
filterManager PIXI.FilterSystem

The renderer to retrieve the filter from

input PIXI.RenderTexture

The input render target.

output PIXI.RenderTexture

The target to output to.

clearMode PIXI.CLEAR_MODES <optional>

Should the output be cleared before rendering to it.

currentState object <optional>

It's current state of filter. There are some useful properties in the currentState : target, filters, sourceFrame, destinationFrame, renderTarget, resolution

From class PIXI.Shader

destroy () void inherited

Shader.ts:79