Matrix Coloring System

Thanks for mici1234 to explaining the flash filter! (?

Everyone knows how to color by HEX color, it's simple 6 digits and # at start, but not everyone knows how to color by matrix, and in fact addition of color matrices probably caused MORE confusion across community than variables.

This is because matrices are mathematical objects, and they are definitely weird to work with if you don't have any experience with them. Worry not, matrices are simple once you get their idea.

Before we get into coloring with matrices, lets first learn what a matrix is. Wikipedia explains matrices as such:

In mathematics, a matrix (pl.: matrices) is a rectangular array or table of numbers, symbols, or expressions, arranged in rows and columns, which is used to represent a mathematical object or a property of such an object.

Hmm... "Rectangular array or table of numbers" and "arranged in rows and columns"... So, does that hint to something like arrays of arrays? Yep, that's basically matrix for you.

---

Basics of 2D-array

Here's the example for a (2x3) 2D array. Note that the structure of the array is (rows x columns).

	Column 1	Column 2	Column 3
Row 1	3	-1	5.5
Row 2	2	-12	alpha

In programming, we will declare this array such as this:

dynamic[2][3] array = [[3, -1, 5.5],[2, -12, "alpha"]];

Matrix Multiplication

Now you learnt what matrix is, but knowing matrix alone is not enough. You need to learn matrix multiplication too, you won't be doing matrix multiplication in order to use color matrices, but you need to understand what matrix multiplication does if you want to use color matrix actions without being blind.

So, remember, rows are horizontal, and columns are vertical, matrix multiplication algorithm is basically:

• Each ROW of first matrix is multiplied with ALL of second matrix's COLUMNS and for each row x column, their respecting items are multiplied then all sum, then adding it to resulting matrix. This is hard to understand without examples, so let's see this happen with 1x2 multiplied with 2x2:

$$[\begin{matrix} 1 & 2 \end{matrix}] * [\begin{matrix} 3 & 4\\ 5 & 6 \end{matrix}]$$

• What happens next is that each row of matrix 1 is then multiplied with columns of second matrix and then added into resulting matrix, as shown:

$$[\begin{matrix} 1 & 2 \end{matrix}] * [\begin{matrix} 3 & 4\\ 5 & 6 \end{matrix}] = [\begin{matrix} [\begin{matrix} 1 & 2 \end{matrix}] * [\begin{matrix} 3 & 5 \end{matrix}] [\begin{matrix} 1 & 2 \end{matrix}] * [\begin{matrix} 4 & 6 \end{matrix}] \end{matrix}]$$

• Now how do we multiply lists? Simple, you multiply respective items and then add them all. (Check the color for respective multiplication)

$$[\begin{matrix} 1 & 2 \end{matrix}] * [\begin{matrix} 3 & 4\\ 5 & 6 \end{matrix}] = [\begin{matrix} [\begin{matrix} \color{red}1 & \color{yellow}2 \end{matrix}] * [\begin{matrix} \color{red}3 & \color{yellow}5 \end{matrix}] [\begin{matrix} \color{green}1 & 2 \end{matrix}] * [\begin{matrix} \color{green}4 & 6 \end{matrix}] \end{matrix}]$$

In this case, [1 2] * [3 5] -> （1 * 3） + （2 * 5）
Same applies to other ways.

• So the final result will be:

$$[\begin{matrix} 1 & 2 \end{matrix}] * [\begin{matrix} 3 & 4\\ 5 & 6 \end{matrix}] = [\begin{matrix} 13 & 16 \end{matrix}]$$

You don't understand? Don't feel too bad, it took me a while to get it as well, for now just simply try to understand those formula. what happens, then do some practicing and use this website to check the result.

The 4 * 5 RGBA Matrix

RGBA is shorthand for Red, Green, Blue, Alpha. You should be familiar with first 3, alpha is simply "transparency".

There are 4 rows for R,G,B,A and 5 columns for R,G,B,A then Additive column.

	Red	Green	Blue	Alpha	Additive
Red	RR	RG	RB	RA
Green	GR	GG	GB	GA
Blue	BR	BG	BB	BA
Alpha	AR	AG	AB	AA

And "Identity" (Identity Matrix just means matrix that when you multiply something with it, it stays unchanged, think of it as 1 in multiplication, anything multiplied with 1 is still that "anything") is as follows:

	Red	Green	Blue	Alpha	Additive
Red	1	0	0	0	0
Green	0	1	0	0	0
Blue	0	0	1	0	0
Alpha	0	0	0	1	0

From this table, you will need 4 rows, which stands for Red, Green, Blue and Alpha. Based on the matrix multiplication above, then you will be able to know what to do.

Here are your quick startups for doing the code. Credit to yex for the template code.

uid: #ColorMatrixArray
enabled: true
maxcalls: 1

VarSetValue( "VarRedRow", "1,0,0,0,0" );
VarSetValue( "VarGreenRow", "0,1,0,0,0" );
VarSetValue( "VarBlueRow", "0,0,1,0,0" );
VarSetValue( "VarAlphaRow", "0,0,0,1,0" );
VarSetStringReplaceVarWithVarValues( "VarArrayChannel", "VarRedRow,VarGreenRow,VarBlueRow,VarAlphaRow" );
op349( "VarArrayChannel", "," );
op403( "0", "VarArrayChannel" );

And if you want to test your matrix without going into PB2, check the website below:

SVG Color Matrix Mixerpqina

Trigger Actions

Now while matrix is multi-dimensional, meaning that it has rows and columns, PB2 arrays are only one dimensional, so there is only a "line". You cannot even have array inside array in case of PB2 because of how add element was coded. So how do we do matrix you ask? Very simple, remember how 4x5 matrix has 4x5 = 20 elements? You make array with 20 elements. And then trigger action interprets each 5 element as a "row".

If you look at trigger action above, you can see that you have separate variable for each row, then you join them all by ,, then splitting by , to get you 4(rows) x 5(columns) = 20 element array.

There are 2 actions that take advantage of matrix (There is more that is planned.), Decor and gun one.

If you understand matrix multiplication, you already know what to do. And remember, those actions say array 'B', it just means variable that has array. And in case of color matrixes, it holds 4x5 = 20 elements.