corrections

08/README.md

@@ -18,7 +18,7 @@ To rotate objects we also need to move the entire space system. For that we are
 
 ![](matrixes.png)
 
-GLSL has native support for two, three and four dimensional matrices: [```mat2```](http://www.shaderific.com/glsl-types/#2x2floatingpointmatrix) (2x2), [```mat3```](http://www.shaderific.com/glsl-types/#3x3floatingpointmatrix) (3x3) and [```mat4```](4x4floatingpointmatrix) (4x4). GLSL also supports matrix multiplication  (```*```) and a matrix specific function ([```matrixCompMult()```](http://www.shaderific.com/glsl-functions/#componentwisematrixmultiplication)).
+GLSL has native support for two, three and four dimensional matrices: [```mat2```](../glossary/index.html#mat2.md) (2x2), [```mat3```](../glossary/index.html#mat3.md) (3x3) and [```mat4```](../glossary/index.html#mat4.md) (4x4). GLSL also supports matrix multiplication  (```*```) and a matrix specific function ([```matrixCompMult()```](../glossary/index.html#matrixCompMult.md)).
 
 Based on how matrices behave it's possible to construct matrices to produce specific behaviors. For example we can use a matrix to translate a vector:
 
@@ -41,12 +41,8 @@ mat2 rotate2d(float _angle){
 
 According to the way we've been drawing shapes, this is not exactly what we want. Our cross shape is drawn in the center of the canvas which corresponds to the position ```vec2(0.5)```. So, before we rotate the space we need to move shape from the `center` to the ```vec2(0.0)``` coordinate, rotate the space, then finally move it back to the original place.
 
-____comment the code below to show where you're doing the steps described above____
-
 <div class="codeAndCanvas" data="cross-rotate.frag"></div>
 
-____This paragraph is straight-up impossible to understand and I don't think there's a way to write it well without another example, so consider adding another example or taking this paragraph out (I'm not editing it, so if you leave it in let me know and I'll edit it)____ Note that we need to multiply the rotation matrix for the position vector to return a rotated vector which in our example is just the original position variable that we are over writing. If you want to rotate different elements in different proportions you need to “preserve” the original coordinate system by assigning another vector.  
-
 Try the following exercises:
 
 * Uncomment line 42 of above code and pay attention to what happens.
@@ -90,11 +86,8 @@ Try the following exercises to understand more deeply how this works.
 
 The following code is an interesting opportunity to use matrix operations in GLSL to transform colors from one mode to another.
 
-____add some comments to the code below to describe what you're doing____
-
 <div class="codeAndCanvas" data="yuv.frag"></div>
 
 As you can see we are treating colors as vectors by multiplying them with matrices. In that way we “move” the values around.
 
-____what have we learned in this chapter? what's coming next?____
-
+In this chapter we have learn about how to use matrix transformation to move, rotate and scale vectors. This will be esential to compose shapes like the once we learn to do in the previus chapter. On our next step we will apply all what we have learn to make beatiful procedural patterns. You will find that coding repetition and variation can be an exciting practice.

08/cross-rotate.frag

@@ -33,9 +33,12 @@ float cross(in vec2 _st, float _size){
 void main(){
     vec2 st = gl_FragCoord.xy/u_resolution.xy;
     vec3 color = vec3(0.0);
-        
+    
+    // move space from the center to the vec2(0.0)
     st -= vec2(0.5);
+    // rotate the space
     st = rotate2d( sin(u_time)*PI ) * st;
+    // move it back to the original place
     st += vec2(0.5);
 
     // Show the coordinates of the space on the background

08/yuv.frag

@@ -7,10 +7,12 @@ precision mediump float;
 uniform vec2 u_resolution;
 uniform float u_time;
 
+// YUV to RGB matrix
 mat3 yuv2rgb = mat3(1.0, 0.0, 1.13983, 
                     1.0, -0.39465, -0.58060, 
                     1.0, 2.03211, 0.0);
 
+// RGB to YUV matrix
 mat3 rgb2yuv = mat3(0.2126, 0.7152, 0.0722,
                     -0.09991, -0.33609, 0.43600, 
                     0.615, -0.5586, -0.05639);
@@ -19,8 +21,14 @@ void main(){
     vec2 st = gl_FragCoord.xy/u_resolution;
     vec3 color = vec3(0.0);
 
-    st -= 0.5;
-    st *= 2.0;
+    // UV values goes from -1 to 1
+    // So we need to remap st (0.0 to 1.0) 
+    st -= 0.5;  // becomes -0.5 to 0.5
+    st *= 2.0;  // becomes -1.0 to 1.0
+
+    // we pass st as the y & z values of 
+    // a three dimentional vector to be
+    // properly multiply by a 3x3 matrix
     color = yuv2rgb * vec3(0.5, st.x, st.y);
 
     gl_FragColor = vec4(color,1.0);

glossary/mat2.md

@@ -0,0 +1,44 @@
+## Mat2
+2x2 floating point matrix
+
+### Declaration
+```glsl
+mat2 aMat2 = mat2(1.0, 0.0,  // 1. column
+                  0.0, 1.0); // 2. column
+mat2 bMat2 = mat2(1.0);
+mat2 cMat2 = mat2(aVec2, bVec2);
+mat2 dMat2 = mat2(aVec3, aFloat);
+```
+
+### Description
+The data type ```mat2``` is used for floating point matrices with two times two components in column major order. There are several ways to initialize a matrix:
+
+- Components are specified by providing a scalar value for each component (first example). The matrix is filled column by column.
+
+- Components are specified by providing one scalar value. This value is used for the components on the main diagonal (the second example is equivalent to the first).
+
+- Components are specified by providing a combination of vectors and scalars. The respective values are used to initialize the components column by column. The arguments of the constructor must have at least as many components as the matrix that is initialized.
+
+The following examples show how the values of a matrix can be accessed to set or get the values:
+
+```glsl
+mat2 aMat2;
+aMat2[1][1] = 1.0;
+float aFloat = aMat2[1][1];
+
+aMat2[0] = vec2(1.0);
+vec2 aVec2 = aMat2[0];
+```
+
+The values of a matrix can be accessed component-wise or column by column:
+
+- In the first example the bottom right component of a matrix is set to a float value.
+
+- In the second example a new variable of type float is initialized with the value of the bottom right component of a matrix.
+
+- In the third example the first column vector of a matrix is set with a vector.
+
+- In the fourth example a new variable of type float vector is initialized with the column vector.
+
+### See Also
+[mat3](index.html#mat3.md), [mat4](index.html#mat4.md), [matrixCompMult()](index.html#matrixCompMult.md)

glossary/mat3.md

@@ -0,0 +1,46 @@
+## Mat3
+3x3 floating point matrix
+
+### Declaration
+```glsl
+mat3 aMat3 = mat3(1.0, 0.0, 0.0,  // 1. column
+                  0.0, 1.0, 0.0,  // 2. column
+                  0.0, 0.0, 1.0); // 3. column
+mat3 bMat3 = mat3(1.0);
+
+mat3 cMat3 = mat3(aVec3, bVec3, cVec3);
+mat3 dMat3 = mat3(aVec4, aVec3, bVec4, aFloat);
+```
+
+### Description
+The data type ```mat3``` is used for floating point matrices with three times three components in column major order. There are several ways to initialize a matrix:
+
+- Components are specified by providing a scalar value for each component (first example). The matrix is filled column by column.
+
+- Components are specified by providing one scalar value. This value is used for the components on the main diagonal (the second example is equivalent to the first).
+
+- Components are specified by providing a combination of vectors and scalars. The respective values are used to initialize the components column by column. The arguments of the constructor must have at least as many components as the matrix that is initialized.
+
+The following examples show how the values of a matrix can be accessed to set or get the values:
+
+```glsl
+mat3 aMat3;
+aMat3[2][2] = 1.0;
+float aFloat = aMat3[2][2];
+
+aMat3[0] = vec3(1.0);
+vec3 aVec3 = aMat3[0];
+```
+
+The values of a matrix can be accessed component-wise or column by column:
+
+- In the first example the bottom right component of a matrix is set to a float value.
+
+- In the second example a new variable of type float is initialized with the value of the bottom right component of a matrix.
+
+- In the third example the first column vector of a matrix is set with a vector.
+
+- In the fourth example a new variable of type float vector is initialized with the column vector.
+
+### See Also
+[mat2](index.html#mat2.md), [mat4](index.html#mat4.md), [matrixCompMult()](index.html#matrixCompMult.md)

glossary/mat4.md

@@ -0,0 +1,46 @@
+## Mat4
+4x4 floating point matrix
+
+### Declaration
+```glsl
+mat4 aMat4 = mat4(1.0, 0.0, 0.0, 0.0,  // 1. column
+                  0.0, 1.0, 0.0, 0.0,  // 2. column
+                  0.0, 0.0, 1.0, 0.0,  // 3. column
+                  0.0, 0.0, 0.0, 1.0); // 4. column
+mat4 bMat4 = mat4(1.0);
+
+mat4 cMat4 = mat4(aVec4, bVec4, cVec4, dVec4);
+mat4 dMat4 = mat4(aVec4, aVec3, bVec4, cVec4, aFloat);
+```
+
+### Description
+The data type mat4 is used for floating point matrices with four times four components in column major order. There are several ways to initialize a matrix:
+
+- Components are specified by providing a scalar value for each component (first example). The matrix is filled column by column.
+
+- Components are specified by providing one scalar value. This value is used for the components on the main diagonal (the second example is equivalent to the first).
+
+- Components are specified by providing a combination of vectors and scalars. The respective values are used to initialize the components column by column. The arguments of the constructor must have at least as many components as the matrix that is initialized.
+
+The following examples show how the values of a matrix can be accessed to set or get the values:
+
+```glsl
+aMat4[3][3] = 1.0;
+float aFloat = aMat4[3][3];
+
+aMat4[0] = vec4(1.0);
+vec4 aVec4 = aMat4[0];
+```
+
+The values of a matrix can be accessed component-wise or column by column:
+
+- In the first example the bottom right component of a matrix is set to a float value.
+
+- In the second example a new variable of type float is initialized with the value of the bottom right component of a matrix.
+
+- In the third example the first column vector of a matrix is set with a vector.
+
+- In the fourth example a new variable of type float vector is initialized with the column vector.
+
+### See Also
+[mat2](index.html#mat2.md), [mat3](index.html#mat3.md), [matrixCompMult()](index.html#matrixCompMult.md)