mirror of
https://github.com/photonstorm/phaser
synced 2024-11-17 10:18:42 +00:00
Swapped to 5x4 array and added in some new color effects
This commit is contained in:
Richard Davey
parent
691b680e36
commit
471e64d989
1 changed files with 161 additions and 77 deletions
|
|
@ -8,7 +8,7 @@ var Class = require('../utils/Class');
|
|||
|
||||
/**
|
||||
* @classdesc
|
||||
* The ColorMatrix class creates a 5x5 matrix that can be used in shaders and graphics
|
||||
* The ColorMatrix class creates a 5x4 matrix that can be used in shaders and graphics
|
||||
* operations. It provides methods required to modify the color values, such as adjusting
|
||||
* the brightness, setting a sepia tone, hue rotation and more.
|
||||
*
|
||||
|
|
@ -37,10 +37,19 @@ var ColorMatrix = new Class({
|
|||
1, 0, 0, 0, 0,
|
||||
0, 1, 0, 0, 0,
|
||||
0, 0, 1, 0, 0,
|
||||
0, 0, 0, 1, 0,
|
||||
0, 0, 0, 0, 1
|
||||
0, 0, 0, 1, 0
|
||||
];
|
||||
|
||||
/**
|
||||
* The value that determines how much of the original color is used
|
||||
* when mixing the colors. A value between 0 (all original) and 1 (all final)
|
||||
*
|
||||
* @name Phaser.Display.ColorMatrix#alpha
|
||||
* @type {number}
|
||||
* @since 3.50.0
|
||||
*/
|
||||
this.alpha = 1;
|
||||
|
||||
/**
|
||||
* Is the ColorMatrix array dirty?
|
||||
*
|
||||
|
|
@ -122,12 +131,6 @@ var ColorMatrix = new Class({
|
|||
m[18] = 1;
|
||||
m[19] = 0;
|
||||
|
||||
m[20] = 0;
|
||||
m[21] = 0;
|
||||
m[22] = 0;
|
||||
m[23] = 0;
|
||||
m[24] = 1;
|
||||
|
||||
this._dirty = true;
|
||||
|
||||
return this;
|
||||
|
|
@ -168,7 +171,7 @@ var ColorMatrix = new Class({
|
|||
* @method Phaser.Display.ColorMatrix#brightness
|
||||
* @since 3.50.0
|
||||
*
|
||||
* @param {number} [value=0] - The amount of brightness to apply to this ColorMatrix.
|
||||
* @param {number} [value=0] - The amount of brightness to apply to this ColorMatrix. Between 0 (black) and 1.
|
||||
*
|
||||
* @return {this} This ColorMatrix instance.
|
||||
*/
|
||||
|
|
@ -176,43 +179,54 @@ var ColorMatrix = new Class({
|
|||
{
|
||||
if (value === undefined) { value = 0; }
|
||||
|
||||
var b = value + 1;
|
||||
var b = value;
|
||||
|
||||
return this.multiply(this._matrix, [
|
||||
return this.multiply([
|
||||
b, 0, 0, 0, 0,
|
||||
0, b, 0, 0, 0,
|
||||
0, 0, b, 0, 0,
|
||||
0, 0, 0, 1, 0,
|
||||
0, 0, 0, 0, 1
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
/**
|
||||
* Changes the saturation of this ColorMatrix by the given amount.
|
||||
*
|
||||
* @method Phaser.Display.ColorMatrix#saturation
|
||||
* @method Phaser.Display.ColorMatrix#saturate
|
||||
* @since 3.50.0
|
||||
*
|
||||
* @param {number} [value=0] - The amount of saturation to apply to this ColorMatrix.
|
||||
*
|
||||
* @return {this} This ColorMatrix instance.
|
||||
*/
|
||||
saturation: function (value)
|
||||
saturate: function (value)
|
||||
{
|
||||
if (value === undefined) { value = 0; }
|
||||
|
||||
var x = value * 2 / 3 + 1;
|
||||
var x = (value * 2 / 3) + 1;
|
||||
var y = ((x - 1) * -0.5);
|
||||
|
||||
return this.multiply(this._matrix, [
|
||||
return this.multiply([
|
||||
x, y, y, 0, 0,
|
||||
y, x, y, 0, 0,
|
||||
y, y, x, 0, 0,
|
||||
0, 0, 0, 1, 0,
|
||||
0, 0, 0, 0, 1
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
/**
|
||||
* Desaturates this ColorMatrix (removes color from it).
|
||||
*
|
||||
* @method Phaser.Display.ColorMatrix#saturation
|
||||
* @since 3.50.0
|
||||
*
|
||||
* @return {this} This ColorMatrix instance.
|
||||
*/
|
||||
desaturate: function ()
|
||||
{
|
||||
return this.saturate(-1);
|
||||
},
|
||||
|
||||
/**
|
||||
* Rotates the hues of this ColorMatrix by the value given.
|
||||
*
|
||||
|
|
@ -235,12 +249,11 @@ var ColorMatrix = new Class({
|
|||
var lumG = 0.715;
|
||||
var lumB = 0.072;
|
||||
|
||||
return this.multiply(this._matrix, [
|
||||
return this.multiply([
|
||||
lumR + cos * (1 - lumR) + sin * (-lumR),lumG + cos * (-lumG) + sin * (-lumG),lumB + cos * (-lumB) + sin * (1 - lumB), 0, 0,
|
||||
lumR + cos * (-lumR) + sin * (0.143),lumG + cos * (1 - lumG) + sin * (0.140),lumB + cos * (-lumB) + sin * (-0.283), 0, 0,
|
||||
lumR + cos * (-lumR) + sin * (-(1 - lumR)),lumG + cos * (-lumG) + sin * (lumG),lumB + cos * (1 - lumB) + sin * (lumB), 0, 0,
|
||||
0, 0, 0, 1, 0,
|
||||
0, 0, 0, 0, 1
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
|
|
@ -250,11 +263,33 @@ var ColorMatrix = new Class({
|
|||
* @method Phaser.Display.ColorMatrix#grayscale
|
||||
* @since 3.50.0
|
||||
*
|
||||
* @param {number} [value=1] - The grayscale scale (0 is black).
|
||||
*
|
||||
* @return {this} This ColorMatrix instance.
|
||||
*/
|
||||
grayscale: function ()
|
||||
grayscale: function (value)
|
||||
{
|
||||
return this.saturation(-1);
|
||||
if (value === undefined) { value = 1; }
|
||||
|
||||
return this.saturation(-value);
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets this ColorMatrix to be black and white.
|
||||
*
|
||||
* @method Phaser.Display.ColorMatrix#blackWhite
|
||||
* @since 3.50.0
|
||||
*
|
||||
* @return {this} This ColorMatrix instance.
|
||||
*/
|
||||
blackWhite: function ()
|
||||
{
|
||||
return this.multiply([
|
||||
0.3, 0.6, 0.1, 0, 0,
|
||||
0.3, 0.6, 0.1, 0, 0,
|
||||
0.3, 0.6, 0.1, 0, 0,
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -272,14 +307,13 @@ var ColorMatrix = new Class({
|
|||
if (value === undefined) { value = 0; }
|
||||
|
||||
var v = value + 1;
|
||||
var o = -128 * (v - 1);
|
||||
var o = -0.5 * (v - 1);
|
||||
|
||||
return this.multiply(this._matrix, [
|
||||
return this.multiply([
|
||||
v, 0, 0, 0, o,
|
||||
0, v, 0, 0, o,
|
||||
0, 0, v, 0, o,
|
||||
0, 0, 0, 1, 0,
|
||||
0, 0, 0, 0, 1
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
|
|
@ -293,7 +327,12 @@ var ColorMatrix = new Class({
|
|||
*/
|
||||
negative: function ()
|
||||
{
|
||||
return this.contrast(-2);
|
||||
return this.multiply([
|
||||
-1, 0, 0, 1, 0,
|
||||
0, -1, 0, 1, 0,
|
||||
0, 0, -1, 1, 0,
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -306,12 +345,11 @@ var ColorMatrix = new Class({
|
|||
*/
|
||||
desaturateLuminance: function ()
|
||||
{
|
||||
return this.multiply(this._matrix, [
|
||||
return this.multiply([
|
||||
0.2764723, 0.9297080, 0.0938197, 0, -37.1,
|
||||
0.2764723, 0.9297080, 0.0938197, 0, -37.1,
|
||||
0.2764723, 0.9297080, 0.0938197, 0, -37.1,
|
||||
0, 0, 0, 1, 0,
|
||||
0, 0, 0, 0, 1
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
|
|
@ -325,12 +363,51 @@ var ColorMatrix = new Class({
|
|||
*/
|
||||
sepia: function ()
|
||||
{
|
||||
return this.multiply(this._matrix, [
|
||||
return this.multiply([
|
||||
0.393, 0.7689999, 0.18899999, 0, 0,
|
||||
0.349, 0.6859999, 0.16799999, 0, 0,
|
||||
0.272, 0.5339999, 0.13099999, 0, 0,
|
||||
0, 0, 0, 1, 0,
|
||||
0, 0, 0, 0, 1
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
/**
|
||||
* Applies a night vision tone to this ColorMatrix.
|
||||
*
|
||||
* @method Phaser.Display.ColorMatrix#night
|
||||
* @since 3.50.0
|
||||
*
|
||||
* @param {number} [intensity=0.1] - The intensity of this effect.
|
||||
*
|
||||
* @return {this} This ColorMatrix instance.
|
||||
*/
|
||||
night: function (intensity)
|
||||
{
|
||||
if (intensity === undefined) { intensity = 0.1; }
|
||||
|
||||
return this.multiply([
|
||||
intensity * (-2.0), -intensity, 0, 0, 0,
|
||||
-intensity, 0, intensity, 0, 0,
|
||||
0, intensity, intensity * 2.0, 0, 0,
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
/**
|
||||
* Applies a trippy color tone to this ColorMatrix.
|
||||
*
|
||||
* @method Phaser.Display.ColorMatrix#lsd
|
||||
* @since 3.50.0
|
||||
*
|
||||
* @return {this} This ColorMatrix instance.
|
||||
*/
|
||||
lsd: function ()
|
||||
{
|
||||
return this.multiply([
|
||||
2, -0.4, 0.5, 0, 0,
|
||||
-0.5, 2, -0.4, 0, 0,
|
||||
-0.4, -0.5, 3, 0, 0,
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
|
|
@ -344,12 +421,11 @@ var ColorMatrix = new Class({
|
|||
*/
|
||||
brown: function ()
|
||||
{
|
||||
return this.multiply(this._matrix, [
|
||||
return this.multiply([
|
||||
0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873,
|
||||
-0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127,
|
||||
0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283,
|
||||
0, 0, 0, 1, 0,
|
||||
0, 0, 0, 0, 1
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
|
|
@ -363,12 +439,11 @@ var ColorMatrix = new Class({
|
|||
*/
|
||||
vintagePinhole: function ()
|
||||
{
|
||||
return this.multiply(this._matrix, [
|
||||
return this.multiply([
|
||||
0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123,
|
||||
0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591,
|
||||
0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296,
|
||||
0, 0, 0, 1, 0,
|
||||
0, 0, 0, 0, 1
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
|
|
@ -382,12 +457,11 @@ var ColorMatrix = new Class({
|
|||
*/
|
||||
kodachrome: function ()
|
||||
{
|
||||
return this.multiply(this._matrix, [
|
||||
return this.multiply([
|
||||
1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502,
|
||||
-0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203,
|
||||
-0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946,
|
||||
0, 0, 0, 1, 0,
|
||||
0, 0, 0, 0, 1
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
|
|
@ -401,12 +475,11 @@ var ColorMatrix = new Class({
|
|||
*/
|
||||
technicolor: function ()
|
||||
{
|
||||
return this.multiply(this._matrix, [
|
||||
return this.multiply([
|
||||
1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337,
|
||||
-0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398,
|
||||
-0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138,
|
||||
0, 0, 0, 1, 0,
|
||||
0, 0, 0, 0, 1
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
|
|
@ -420,12 +493,11 @@ var ColorMatrix = new Class({
|
|||
*/
|
||||
polaroid: function ()
|
||||
{
|
||||
return this.multiply(this._matrix, [
|
||||
return this.multiply([
|
||||
1.438, -0.062, -0.062, 0, 0,
|
||||
-0.122, 1.378, -0.122, 0, 0,
|
||||
-0.016, -0.016, 1.483, 0, 0,
|
||||
0, 0, 0, 1, 0,
|
||||
0, 0, 0, 0, 1
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
|
|
@ -439,12 +511,11 @@ var ColorMatrix = new Class({
|
|||
*/
|
||||
shiftToBGR: function ()
|
||||
{
|
||||
return this.multiply(this._matrix, [
|
||||
return this.multiply([
|
||||
0, 0, 1, 0, 0,
|
||||
0, 1, 0, 0, 0,
|
||||
1, 0, 0, 0, 0,
|
||||
0, 0, 0, 1, 0,
|
||||
0, 0, 0, 0, 1
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
},
|
||||
|
||||
|
|
@ -454,37 +525,50 @@ var ColorMatrix = new Class({
|
|||
* @method Phaser.Display.ColorMatrix#multiply
|
||||
* @since 3.50.0
|
||||
*
|
||||
* @param {number[]} a - The first ColorMatrix array to multiply.
|
||||
* @param {number[]} b - The second ColorMatrix array to multiply.
|
||||
* @param {number[]} a - The 5x4 array to multiply with ColorMatrix._matrix.
|
||||
*
|
||||
* @return {this} This ColorMatrix instance.
|
||||
*/
|
||||
multiply: function (a, b)
|
||||
multiply: function (a)
|
||||
{
|
||||
var j;
|
||||
var k;
|
||||
var col = [];
|
||||
// Duplicate _matrix into c
|
||||
|
||||
for (var i = 0; i < 5; i++)
|
||||
var m = this._matrix;
|
||||
var c = [];
|
||||
|
||||
for (var i = 0; i < 20; i++)
|
||||
{
|
||||
for (j = 0; j < 5; j++)
|
||||
{
|
||||
col[j] = a[j + i * 5];
|
||||
}
|
||||
|
||||
for (j = 0; j < 5; j++)
|
||||
{
|
||||
var val = 0;
|
||||
|
||||
for (k = 0; k < 5; k++)
|
||||
{
|
||||
val += b[j + k * 5] * col[k];
|
||||
}
|
||||
|
||||
a[j + i * 5] = val;
|
||||
}
|
||||
c[i] = m[i];
|
||||
}
|
||||
|
||||
// R
|
||||
m[0] = (c[0] * a[0]) + (c[1] * a[5]) + (c[2] * a[10]) + (c[3] * a[15]);
|
||||
m[1] = (c[0] * a[1]) + (c[1] * a[6]) + (c[2] * a[11]) + (c[3] * a[16]);
|
||||
m[2] = (c[0] * a[2]) + (c[1] * a[7]) + (c[2] * a[12]) + (c[3] * a[17]);
|
||||
m[3] = (c[0] * a[3]) + (c[1] * a[8]) + (c[2] * a[13]) + (c[3] * a[18]);
|
||||
m[4] = (c[0] * a[4]) + (c[1] * a[9]) + (c[2] * a[14]) + (c[3] * a[19]) + c[4];
|
||||
|
||||
// G
|
||||
m[5] = (c[5] * a[0]) + (c[6] * a[5]) + (c[7] * a[10]) + (c[8] * a[15]);
|
||||
m[6] = (c[5] * a[1]) + (c[6] * a[6]) + (c[7] * a[11]) + (c[8] * a[16]);
|
||||
m[7] = (c[5] * a[2]) + (c[6] * a[7]) + (c[7] * a[12]) + (c[8] * a[17]);
|
||||
m[8] = (c[5] * a[3]) + (c[6] * a[8]) + (c[7] * a[13]) + (c[8] * a[18]);
|
||||
m[9] = (c[5] * a[4]) + (c[6] * a[9]) + (c[7] * a[14]) + (c[8] * a[19]) + c[9];
|
||||
|
||||
// B
|
||||
m[10] = (c[10] * a[0]) + (c[11] * a[5]) + (c[12] * a[10]) + (c[13] * a[15]);
|
||||
m[11] = (c[10] * a[1]) + (c[11] * a[6]) + (c[12] * a[11]) + (c[13] * a[16]);
|
||||
m[12] = (c[10] * a[2]) + (c[11] * a[7]) + (c[12] * a[12]) + (c[13] * a[17]);
|
||||
m[13] = (c[10] * a[3]) + (c[11] * a[8]) + (c[12] * a[13]) + (c[13] * a[18]);
|
||||
m[14] = (c[10] * a[4]) + (c[11] * a[9]) + (c[12] * a[14]) + (c[13] * a[19]) + c[14];
|
||||
|
||||
// A
|
||||
m[15] = (c[15] * a[0]) + (c[16] * a[5]) + (c[17] * a[10]) + (c[18] * a[15]);
|
||||
m[16] = (c[15] * a[1]) + (c[16] * a[6]) + (c[17] * a[11]) + (c[18] * a[16]);
|
||||
m[17] = (c[15] * a[2]) + (c[16] * a[7]) + (c[17] * a[12]) + (c[18] * a[17]);
|
||||
m[18] = (c[15] * a[3]) + (c[16] * a[8]) + (c[17] * a[13]) + (c[18] * a[18]);
|
||||
m[19] = (c[15] * a[4]) + (c[16] * a[9]) + (c[17] * a[14]) + (c[18] * a[19]) + c[19];
|
||||
|
||||
this._dirty = true;
|
||||
|
||||
return this;
|
||||
|
|
|
|||
Loading…
Reference in a new issue