mergin master

00/README.md

@@ -38,7 +38,7 @@ Not much! If you have a modern browser that can do WebGL (like Chrome, Firefox o
 
 Alternatively, based on what you have or what you need from this book you can:
 
-- [Make a off-line version of this book](http://thebookofshaders.com/appendix/)
+- [Make an off-line version of this book](http://thebookofshaders.com/appendix/)
 
 - [Run the examples on a RaspberryPi without a browser](http://thebookofshaders.com/appendix/)
 

02/README.md

@@ -12,7 +12,7 @@ Although these simple lines of code don't look like a lot, we can infer substant
 
 1. Shader Language has a single ```main``` function that returns a color at the end. This is similar to C.
 
-2. The final pixel color is assigned to the reserve global variable ```gl_FragColor```.
+2. The final pixel color is assigned to the reserved global variable ```gl_FragColor```.
 
 3. This C-flavored language has built in *variables* (like ```gl_FragColor```), *functions* and *types*. In this case we've just been introduced to ```vec4``` that stands for a four dimensional vector of floating point precision. Later we will see more types like ```vec3``` and ```vec2``` together with the popular: ```float```, ```int``` and ```bool```.
 
@@ -20,7 +20,7 @@ Although these simple lines of code don't look like a lot, we can infer substant
 
 5. Another important *C feature* we can see in this example is the presence of preprocessor macros. Macros are part of a pre-compilation step. With them it is possible to ```#define``` global variables and do some basic conditional operation ( with ```#ifdef``` and ```#endif```). All the macro comands begin with a hashtag (```#```). Pre-compilation happens right before compiling and copies all the calls to ```#defines``` and check ```#ifdef``` (is defined) and ```#ifndef``` (is not defined) conditionals. In our "hello world!" example above, we only insert the line 2 if ```GL_ES``` is defined, which mostly happens when the code is compiled on mobile devices and browsers.
 
-6. Float types are vital in shaders, so the level of *precision* is crucial. Lower precision means faster rendering, but on behalf of quality. You can be picky and specify the precision of each variable that uses floating point. In the first line (```precision mediump float;```) we are setting all floats to medium precision. But we can choose to set them to low (```precision lowp float;```) or high (```precision highp float;```).
+6. Float types are vital in shaders, so the level of *precision* is crucial. Lower precision means faster rendering, but at the cost of quality. You can be picky and specify the precision of each variable that uses floating point. In the first line (```precision mediump float;```) we are setting all floats to medium precision. But we can choose to set them to low (```precision lowp float;```) or high (```precision highp float;```).
 
 7. The last, and maybe most important, detail is that GLSL specs don’t guarantee that variables will be automatically casted. What does that mean? Manufacturers have different approaches to accelerate graphic card processes but they are forced to guarantee minimum specs. Automatic casting is not one of them. In our “hello world!” example ```vec4``` has floating point precision and for that it expects to be assigned with ```floats```. If you want to make good consistent code and not spend hours debugging white screens, get used to putting the point ( ```.``` ) in your floats. This kind of code will not always work:
 

08/README.md

@@ -1,5 +1,7 @@
 ## 2D Matrices
 
+<canvas id="custom" class="canvas" data-fragment-url="matrix.frag"  width="700px" height="200px"></canvas>
+
 ### Translate
 
 In the previous chapter we learned how to make some shapes - the trick to moving those shapes is to move the coordinate system itself. We can achieve that by simply adding a vector to the ```st``` variable that contains the location of each fragment. This causes the whole space coordinate system to move. 

08/cross-animated.frag

@@ -0,0 +1,55 @@
+// Author @patriciogv - 2015
+// http://patriciogonzalezvivo.com
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+#define PI 3.14159265359
+
+uniform vec2 u_resolution;
+uniform float u_time;
+
+mat2 rotate2d(float _angle){
+    return mat2(cos(_angle),-sin(_angle),
+                sin(_angle),cos(_angle));
+}
+
+float box(in vec2 _st, in vec2 _size){
+    _size = vec2(0.5) - _size*0.5;
+    vec2 uv = smoothstep(_size,
+                        _size+vec2(0.001),
+                        _st);
+    uv *= smoothstep(_size,
+                    _size+vec2(0.001),
+                    vec2(1.0)-_st);
+    return uv.x*uv.y;
+}
+
+float cross(in vec2 _st, float _size){
+    return  box(_st, vec2(_size,_size/4.)) + 
+            box(_st, vec2(_size/4.,_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*0.5)*PI ) * st;
+    // move it back to the original place
+    st += vec2(0.5);
+    
+    // To move the cross we move the space
+    vec2 translate = vec2(cos(u_time),sin(u_time));
+    st += translate*0.35;
+
+    // Show the coordinates of the space on the background
+    // color = vec3(st.x,st.y,0.0);
+
+    // Add the shape on the foreground
+    color += vec3(cross(st,0.25));
+
+    gl_FragColor = vec4(color,1.0);
+}

08/matrix.frag

@@ -0,0 +1,53 @@
+// Author @patriciogv - 2015
+// http://patriciogonzalezvivo.com
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+                
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+float random(in float x){
+    return fract(sin(x)*43758.5453);
+}
+
+float random(in vec2 st){
+    return fract(sin(dot(st.xy ,vec2(12.9898,78.233))) * 43758.5453);
+}
+
+float rchar(in vec2 outer,in vec2 inner){
+    float grid = 5.;
+    vec2 margin = vec2(.2,.05);
+    float seed = 23.;
+    vec2 borders = step(margin,inner)*step(margin,1.-inner);
+    return step(.5,random(outer*seed+floor(inner*grid))) * borders.x * borders.y;
+}
+
+vec3 matrix(in vec2 st){
+    float rows = 80.0;
+    vec2 ipos = floor(st*rows);
+
+    ipos += vec2(.0,floor(u_time*20.*random(ipos.x)));
+
+    
+    vec2 fpos = fract(st*rows);
+    vec2 center = (.5-fpos);
+
+    float pct = random(ipos);
+    float glow = (1.-dot(center,center)*3.)*2.0;
+
+    // vec3 color = vec3(0.643,0.851,0.690) * ( rchar(ipos,fpos) * pct );
+    // color +=  vec3(0.027,0.180,0.063) * pct * glow;
+    return vec3(rchar(ipos,fpos) * pct * glow);
+}
+
+void main(){
+    vec2 st = gl_FragCoord.st/u_resolution.xy;
+    st.y *= u_resolution.y/u_resolution.x;
+    vec3 color = vec3(0.0);
+
+    color = matrix(st);
+    gl_FragColor = vec4( 1.-color , 1.0);
+}