PIXI.filters.ColorMatrixFilter

class ColorMatrixFilter extends PIXI.Filter

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);

Summary

Properties from ColorMatrixFilter

number

alpha = 1

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

Array<number>

matrix = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]

Methods from ColorMatrixFilter

void	blackAndWhite(multiply: boolean)
void	brightness(b: number, multiply: boolean)
void	browni(multiply: boolean)
void	colorTone(desaturation: number, toned: number, lightColor: number, darkColor: number, multiply: boolean)
void	contrast(amount: number, multiply: boolean)
void	desaturate() Desaturate image (remove color) Call the saturate function
void	greyscale(scale: number, multiply: boolean)
void	hue(rotation: number, multiply: boolean)
void	kodachrome(multiply: boolean)
void	lsd(multiply: boolean) LSD effect
void	negative(multiply: boolean)
void	night(intensity: number, multiply: boolean)
void	polaroid(multiply: boolean)
void	predator(amount: number, multiply: boolean) Predator effect
void	reset() Erase the current matrix by setting the default one.
void	saturate(amount: number, multiply: boolean)
void	sepia(multiply: boolean)
void	technicolor(multiply: boolean)
void	tint(color: number, multiply: boolean)
void	toBGR(multiply: boolean)
void	vintage(multiply: boolean)

Properties inherited from Filter

boolean	autoFit = true
PIXI.BLEND_MODES	blendMode = PIXI.BLEND_MODES.NORMAL
boolean	enabled If enabled is true the filter is applied, if false it will not.
boolean	legacy
PIXI.MSAA_QUALITY	multisample The samples of the filter.
number	padding
number	resolution
PIXI.State	state The WebGL state the filter requires to render.

Properties inherited from Shader

PIXI.Program

program

Program that the shader uses.

Dict<any>

uniforms

Methods inherited from Filter

void	apply(filterManager: PIXI.FilterSystem, input: PIXI.RenderTexture, output: PIXI.RenderTexture, clearMode: PIXI.CLEAR_MODES, _currentState: object)

Public Properties

alpha ColorMatrixFilter.ts:572

alpha: number = 1

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.

matrix ColorMatrixFilter.ts:557

matrix: Array<number> = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]

The matrix of the color matrix filter

Public Methods

blackAndWhite ColorMatrixFilter.ts:179

blackAndWhite(multiply: boolean) → {void}

Set the black and white matrice.

Parameters:
Name	Type	Description
multiply	boolean	if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

Returns:
Type	Description
void

brightness ColorMatrixFilter.ts:119

brightness(b: number, multiply: boolean) → {void}

Adjusts brightness

Parameters:
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

Returns:
Type	Description
void

browni ColorMatrixFilter.ts:401

browni(multiply: boolean) → {void}

Brown delicious browni filter (thanks Dominic Szablewski)

Parameters:
Name	Type	Description
multiply	boolean	if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

Returns:
Type	Description
void

colorTone ColorMatrixFilter.ts:435

colorTone(desaturation: number, toned: number, lightColor: number, darkColor: number, multiply: boolean) → {void}

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

Parameters:
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

Returns:
Type	Description
void

contrast ColorMatrixFilter.ts:248

contrast(amount: number, multiply: boolean) → {void}

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

Parameters:
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

Returns:
Type	Description
void

desaturate ColorMatrixFilter.ts:293

desaturate() → {void}

Desaturate image (remove color) Call the saturate function

Returns:
Type	Description
void

greyscale ColorMatrixFilter.ts:161

greyscale(scale: number, multiply: boolean) → {void}

Set the matrices in grey scales

Parameters:
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

Returns:
Type	Description
void

hue ColorMatrixFilter.ts:196

hue(rotation: number, multiply: boolean) → {void}

Set the hue property of the color

Parameters:
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

Returns:
Type	Description
void

kodachrome ColorMatrixFilter.ts:384

kodachrome(multiply: boolean) → {void}

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

Parameters:
Name	Type	Description
multiply	boolean	if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

Returns:
Type	Description
void

lsd ColorMatrixFilter.ts:525

lsd(multiply: boolean) → {void}

LSD effect

Multiply the current matrix

Parameters:
Name	Type	Description
multiply	boolean	if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

Returns:
Type	Description
void

negative ColorMatrixFilter.ts:299

negative(multiply: boolean) → {void}

Negative image (inverse of classic rgb matrix)

Parameters:
Name	Type	Description
multiply	boolean	if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

Returns:
Type	Description
void

night ColorMatrixFilter.ts:469

night(intensity: number, multiply: boolean) → {void}

Night effect

Parameters:
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

Returns:
Type	Description
void

polaroid ColorMatrixFilter.ts:350

polaroid(multiply: boolean) → {void}

Polaroid filter

Parameters:
Name	Type	Description
multiply	boolean	if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

Returns:
Type	Description
void

predator ColorMatrixFilter.ts:489

predator(amount: number, multiply: boolean) → {void}

Predator effect

Erase the current matrix by setting a new indepent one

Parameters:
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

Returns:
Type	Description
void

reset ColorMatrixFilter.ts:544

reset() → {void}

Erase the current matrix by setting the default one.

Returns:
Type	Description
void

saturate ColorMatrixFilter.ts:271

saturate(amount: number, multiply: boolean) → {void}

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

Parameters:
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

Returns:
Type	Description
void

sepia ColorMatrixFilter.ts:316

sepia(multiply: boolean) → {void}

Sepia image

Parameters:
Name	Type	Description
multiply	boolean	if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

Returns:
Type	Description
void

technicolor ColorMatrixFilter.ts:333

technicolor(multiply: boolean) → {void}

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

Parameters:
Name	Type	Description
multiply	boolean	if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

Returns:
Type	Description
void

tint ColorMatrixFilter.ts:137

tint(color: number, multiply: boolean) → {void}

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.

Parameters:
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

Returns:
Type	Description
void

toBGR ColorMatrixFilter.ts:367

toBGR(multiply: boolean) → {void}

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

Parameters:
Name	Type	Description
multiply	boolean	if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

Returns:
Type	Description
void

vintage ColorMatrixFilter.ts:418

vintage(multiply: boolean) → {void}

Vintage filter (thanks Dominic Szablewski)

Parameters:
Name	Type	Description
multiply	boolean	if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix

Returns:
Type	Description
void