going a head on textures

14/README.md

@@ -14,18 +14,18 @@ Once the texture is loaded and linked to a valid ```uniform sampler2D``` you can
 vec4 texture2D(sampler2D texture, vec2 coordinates)  
 ```
 
-Check the following code to see how this works inside a shader:
+Check the following code where we load Hokusai's Wave (1830) as ```uniform sampler2D u_tex0``` and we call every pixel of it inside the billboard:
 
-<div class="codeAndCanvas" data="texture.frag" data-imgs="kanagawa.jpg"></div>
+<div class="codeAndCanvas" data="texture.frag" data-imgs="hokusai.jpg"></div>
 
-Try:
+If you pay attention you will note that the coordinates for the texture are normalized! What a surprise right? Textures coordenates are consisten with the rest of the things we had saw and their coordenates are between 0.0 and 1.0 whitch match perfectly with the normalized space coordinates we have been using. 
+
+Now that you have seen how we load correctly a texture is time to experiment to discover what we can do with it, by trying:
 
 * Scaling the previus texture by half.
 * Rotating the previus texture 90 degrees.
 * Hooking the mouse position to the coordenates to move it.
 
-If you pay attention you will note that the coordinates for the texture are normalized! What a surprise right?
-
 Why you should be excited about textures? Well first of all forget about the sad 255 values for channel, once your image is trasformed into a ```uniform sampler2D``` you have all the values between 0.0 and 1.0 (depending on what you set the ```precision``` to ). That's why shaders can make really beatiful post-processing effects. 
 
 Second, the [```vec2()```](index.html#vec2.md) means you can get values even between pixels. As we said before the textures are a continum. This means that if you set up your texture correctly you can ask for values all arround the surface of your image and the values will smoothly vary from pixel to pixel with no jumps! 
@@ -34,6 +34,25 @@ Finnally, you can setup your image to repeat in the edges, so if you give values
 
 All this features makes your images more like an infinit spandex fabric. You can streach and shrinks your texture without noticing the grid of bites they originally where compose of or the ends of it. To experience this take a look to the following code where we distort a texture using [the noise function we already made](../11/).
 
-<div class="codeAndCanvas" data="texture-noise.frag" data-imgs="kanagawa.jpg"></div>
+<div class="codeAndCanvas" data="texture-noise.frag" data-imgs="hokusai.jpg"></div>
+
+## Texture resolution
+
+Aboves examples play really well with squared images. Because both sides are equal they perfectly match our squared billboard. But for non-squared images things can be a little more tricky. We need to know the original proportions of the image to know how to streatch it correctly. Thats way the texture's original width and height is pass into the shader as an ```uniform```. In our example framework will be a ```uniform vec2``` with the same name of the texture pluss the world ```Resolution``` at the end of it.
+
+![Eadweard's Muybridge study of motion](muybridge.jpg)
+
+Uncomment line 18 of the following example to scale correctly aboves image. Do you think you can centered?
+
+<div class="codeAndCanvas" data="texture-resolution.frag" data-imgs="muybridge.jpg"></div>
+
+This could seam simple but the posibilities of modifing textures coordinates is enormus. For example: *sprite animations*.
+
+<div class="codeAndCanvas" data="texture-sprite.frag" data-imgs="muybridge.jpg"></div>
+
+Now is your turn:
+
+* Can you make a kaleidoscope using what we have learn?
+* 
 
-In the next chapters we will learn how to do some image processing using shaders. You will note that finnaly the complexity of shader makes sense, because was in a big sense designed to do this type of process. We will start doing some image operations!
+In the next chapters we will learn how to do some image processing using shaders. You will note that finnaly the complexity of shader makes sense, because was in a big sense designed to do this type of process. We will start doing some image operations!

14/texture-kaleidoscope.frag

@@ -0,0 +1,41 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+#define PI 3.14159265359
+#define TWO_PI 6.28318530718
+
+uniform sampler2D u_tex0;
+uniform vec2 u_tex0Resolution;
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+// Based on Asalga shader
+// https://www.shadertoy.com/view/4ss3WX
+void main () {
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    float time = u_time*0.1;
+
+    // move to the center
+    st = st - 0.5;
+
+    // cartesian to polar coordinates
+    float r = length(st);
+    float a = atan(st.y, st.x);
+
+    // Repeat side acoriding to angle
+    float sides = 10.;
+    float ma = mod(a, TWO_PI/sides);
+    ma = abs(ma - PI/sides);
+
+    // polar to cartesian coordinates
+    st = r * vec2(cos(ma), sin(ma));
+    st = fract(st+time);
+
+    vec4 color = vec4(st.x,st.y,0.0,1.0);
+    color = texture2D(u_tex0,st);
+
+    gl_FragColor = color;
+}

14/texture-noise.frag

@@ -48,8 +48,7 @@ void main () {
     st *= scale;
     st += radius * vec2(cos(angle),sin(angle));
 
-    vec4 color = vec4(st.x,st.y,0.0,1.0);
-    color = texture2D(u_tex0,st-offset);
+    vec4 color = texture2D(u_tex0,st);
 
     gl_FragColor = color;
 }

14/texture-resolution.frag

@@ -0,0 +1,23 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform sampler2D u_tex0;
+uniform vec2 u_tex0Resolution;
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+void main () {
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    vec4 color = vec4(0.0);
+
+    // Fix the proportions by finding the aspect ration
+    float aspect = u_tex0Resolution.x/u_tex0Resolution.y;
+    // st.y *= aspect;  // and then applying to it
+
+    color = texture2D(u_tex0,st);
+
+    gl_FragColor = color;
+}

14/texture-sprite.frag

@@ -0,0 +1,38 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform sampler2D u_tex0;
+uniform vec2 u_tex0Resolution;
+
+int col = 5;
+int row = 4;
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+void main () {
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    vec4 color = vec4(0.0);
+
+    // Resolution of one frame
+    vec2 fRes = u_tex0Resolution/vec2(float(col),float(row));
+
+    // Normalize value of the frame resolution 
+    vec2 nRes = u_tex0Resolution/fRes;
+
+    // Scale the coordenates to a single frame
+    st = st/nRes;
+
+    // Calculate the offset in cols and rows
+    float timeX = u_time*15.; 
+    float timeY = floor(timeX/float(col));
+    vec2 offset = vec2( floor(timeX)/nRes.x, 
+                        1.0-(floor(timeY)/nRes.y) );
+    st = fract(st+offset);
+
+    color = texture2D(u_tex0,st);
+
+    gl_FragColor = color;
+}

16/README.md

@@ -0,0 +1 @@
+## Kernel convolutions

16/index.html

@@ -0,0 +1,70 @@
+<!-- Copyright 2015 Patricio Gonzalez Vivo (http://patriciogonzalezvivo.com) -->
+
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Textures</title>
+		<meta name="keywords" content="glsl,shader,textures,uniforms,sampler2D" />
+		<meta name="description" content="This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders."/>
+
+		<!-- CodeMirror -->
+		<link type='text/css' rel='stylesheet' href="../src/codemirror/css/codemirror.css">
+		<link type='text/css' rel="stylesheet" href="../src/codemirror/addon/fold/foldgutter.css">	
+		<link type='text/css' rel="stylesheet" href="../src/codemirror/addon/dialog/dialog.css">
+		<link type='text/css' rel="stylesheet" href="../src/codemirror/addon/hint/show-hint.css">
+		<link type='text/css' rel="stylesheet" href="../src/codemirror/theme/neo.css">
+		<script type="text/javascript" src="../src/codemirror.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/search/searchcursor.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/search/search.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/dialog/dialog.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/edit/matchbrackets.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/edit/closebrackets.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/comment/comment.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/wrap/hardwrap.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/fold/foldcode.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/fold/brace-fold.js"></script>
+		<script type="text/javascript" src="../src/codemirror/keymap/sublime.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/hint/show-hint.js"></script>
+		<script type="text/javascript" src="../src/codemirror/mode/clike.js"></script>
+
+		<!-- Highlight -->
+		<link type='text/css' rel='stylesheet' href="../css/github.css">
+		<script type="text/javascript" src="../src/highlight.min.js"></script>
+
+		<!-- Marked -->
+		<script type="text/javascript" src="../src/marked.js"></script>
+
+		<!-- My stuff -->
+		<link type='text/css' rel='stylesheet' href="../css/style.css">
+		<script type="text/javascript" src="../src/glslCanvas.js"></script>
+		
+	</head>
+	<body>
+		<div class="header"><p><a href="http://patriciogonzalezvivo.com/2015/thebookofshaders/">The Book of Shaders</a> by <a href="http://patriciogonzalezvivo.com">Patricio Gonzalez Vivo</a></p></div>
+		<hr>
+		<div id="content"> </div>
+		<hr>
+		<ul class="navigationBar" >
+			<li class="navigationBar" onclick="previusPage()">&lt; &lt; Previous</li>
+			<li class="navigationBar" onclick="homePage()"> Home </li>
+			<li class="navigationBar" onclick="nextPage()">Next &gt; &gt;</li>
+		</ul>
+
+		<footer>
+			<p> Copyright 2015 <a href="http://www.patriciogonzalezvivo.com" target="_blank">Patricio Gonzalez Vivo</a> </p>
+		</footer>
+
+		<script type="text/javascript" src="../src/main.js" defer></script>
+		<script>
+		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+		  ga('create', 'UA-18824436-2', 'auto');
+		  ga('send', 'pageview');
+
+		</script>
+	</body>
+</html>

17/README.md

@@ -0,0 +1 @@
+## Filters

17/grain.frag

@@ -0,0 +1,98 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform sampler2D u_tex0;
+
+uniform float u_time;
+uniform vec2 u_mouse;
+uniform vec2 u_resolution;
+
+vec3 random3(vec3 c) {
+    float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));
+    vec3 r;
+    r.z = fract(512.0*j);
+    j *= .125;
+    r.x = fract(512.0*j);
+    j *= .125;
+    r.y = fract(512.0*j);
+    return r-0.5;
+}
+
+const float F3 =  0.3333333;
+const float G3 =  0.1666667;
+float snoise(vec3 p) {
+    vec3 s = floor(p + dot(p, vec3(F3)));
+    vec3 x = p - s + dot(s, vec3(G3));
+    vec3 e = step(vec3(0.0), x - x.yzx);
+    vec3 i1 = e*(1.0 - e.zxy);
+    vec3 i2 = 1.0 - e.zxy*(1.0 - e);
+    vec3 x1 = x - i1 + G3;
+    vec3 x2 = x - i2 + 2.0*G3;
+    vec3 x3 = x - 1.0 + 3.0*G3;
+    vec4 w, d;
+    w.x = dot(x, x);
+    w.y = dot(x1, x1);
+    w.z = dot(x2, x2);
+    w.w = dot(x3, x3);
+    w = max(0.6 - w, 0.0);
+    d.x = dot(random3(s), x);
+    d.y = dot(random3(s + i1), x1);
+    d.z = dot(random3(s + i2), x2);
+    d.w = dot(random3(s + 1.0), x3);
+    w *= w;
+    w *= w;
+    d *= w;
+    return dot(d, vec4(52.0));
+}
+
+//  Author: Matt DesLauriers
+//  https://github.com/mattdesl/glsl-film-grain/blob/master/index.glsl
+//
+float grain(vec2 texCoord, vec2 resolution, float frame, float multiplier) {
+    vec2 mult = texCoord * resolution;
+    float offset = snoise(vec3(mult / multiplier, frame));
+    float n1 = snoise(vec3(mult, offset));
+    return n1 / 2.0 + 0.5;
+}
+
+float grain(vec2 texCoord, vec2 resolution, float frame) {
+    return grain(texCoord, resolution, frame, 2.5);
+}
+
+float grain(vec2 texCoord, vec2 resolution) {
+    return grain(texCoord, resolution, 0.0);
+}
+
+//  Author: Hugh Kennedy
+//  https://github.com/hughsk/glsl-luma/blob/master/index.glsl
+float luma(vec3 color) {
+  return dot(color, vec3(0.299, 0.587, 0.114));
+}
+
+float luma(vec4 color) {
+  return dot(color.rgb, vec3(0.299, 0.587, 0.114));
+}
+
+//  Author: Matt DesLauriers
+//  https://github.com/mattdesl/glsl-blend-soft-light/blob/master/index.glsl
+vec3 blendSoftLight(vec3 base, vec3 blend) {
+    return mix(
+        sqrt(base) * (2.0 * blend - 1.0) + 2.0 * base * (1.0 - blend), 
+        2.0 * base * blend + base * base * (1.0 - 2.0 * blend), 
+        step(base, vec3(0.5))
+    );
+}
+
+void main (void) {
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    vec3 color = texture2D(u_tex0,st).rgb;
+    vec3 grain = vec3( grain(st,u_resolution/7.) );
+    
+    color = blendSoftLight(color,grain);
+
+    float luminance = luma(color);
+    color = vec3(luminance);
+
+    gl_FragColor = vec4(color,1.0);
+}

17/hatch.frag

@@ -0,0 +1,24 @@
+#ifdef GL_ES
+precision highp float;
+#endif
+                                   
+uniform sampler2D u_tex0;
+uniform vec2 u_tex0Resolution;
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+float hatch ( sampler2D hatchmap, vec2 st,float brighness ){
+    float col = floor((1.0-brighness)*9.0)/3.;
+    float row = floor(brighness*3.0)/3.;
+    return texture2D(hatchmap,vec2(col,row)+st/3.).a;
+}
+
+void main(){
+   vec2 st = gl_FragCoord.st/u_resolution.xy;
+   float b = st.x;
+   vec3 color = vec3(1.0);
+   color -= hatch(u_tex0,st,b).a;
+   gl_FragColor = vec4(color,1.);
+}

17/index.html

@@ -0,0 +1,70 @@
+<!-- Copyright 2015 Patricio Gonzalez Vivo (http://patriciogonzalezvivo.com) -->
+
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Textures</title>
+		<meta name="keywords" content="glsl,shader,textures,uniforms,sampler2D" />
+		<meta name="description" content="This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders."/>
+
+		<!-- CodeMirror -->
+		<link type='text/css' rel='stylesheet' href="../src/codemirror/css/codemirror.css">
+		<link type='text/css' rel="stylesheet" href="../src/codemirror/addon/fold/foldgutter.css">	
+		<link type='text/css' rel="stylesheet" href="../src/codemirror/addon/dialog/dialog.css">
+		<link type='text/css' rel="stylesheet" href="../src/codemirror/addon/hint/show-hint.css">
+		<link type='text/css' rel="stylesheet" href="../src/codemirror/theme/neo.css">
+		<script type="text/javascript" src="../src/codemirror.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/search/searchcursor.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/search/search.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/dialog/dialog.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/edit/matchbrackets.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/edit/closebrackets.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/comment/comment.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/wrap/hardwrap.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/fold/foldcode.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/fold/brace-fold.js"></script>
+		<script type="text/javascript" src="../src/codemirror/keymap/sublime.js"></script>
+		<script type="text/javascript" src="../src/codemirror/addon/hint/show-hint.js"></script>
+		<script type="text/javascript" src="../src/codemirror/mode/clike.js"></script>
+
+		<!-- Highlight -->
+		<link type='text/css' rel='stylesheet' href="../css/github.css">
+		<script type="text/javascript" src="../src/highlight.min.js"></script>
+
+		<!-- Marked -->
+		<script type="text/javascript" src="../src/marked.js"></script>
+
+		<!-- My stuff -->
+		<link type='text/css' rel='stylesheet' href="../css/style.css">
+		<script type="text/javascript" src="../src/glslCanvas.js"></script>
+		
+	</head>
+	<body>
+		<div class="header"><p><a href="http://patriciogonzalezvivo.com/2015/thebookofshaders/">The Book of Shaders</a> by <a href="http://patriciogonzalezvivo.com">Patricio Gonzalez Vivo</a></p></div>
+		<hr>
+		<div id="content"> </div>
+		<hr>
+		<ul class="navigationBar" >
+			<li class="navigationBar" onclick="previusPage()">&lt; &lt; Previous</li>
+			<li class="navigationBar" onclick="homePage()"> Home </li>
+			<li class="navigationBar" onclick="nextPage()">Next &gt; &gt;</li>
+		</ul>
+
+		<footer>
+			<p> Copyright 2015 <a href="http://www.patriciogonzalezvivo.com" target="_blank">Patricio Gonzalez Vivo</a> </p>
+		</footer>
+
+		<script type="text/javascript" src="../src/main.js" defer></script>
+		<script>
+		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+		  ga('create', 'UA-18824436-2', 'auto');
+		  ga('send', 'pageview');
+
+		</script>
+	</body>
+</html>

17/lut-plain.frag

@@ -0,0 +1,22 @@
+#ifdef GL_ES
+precision highp float;
+#endif
+                
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+const float size = 8.0;
+
+void main(){
+   vec2 st = gl_FragCoord.st/u_resolution.xy;
+   vec3 color = vec3(.0);
+   
+   float red = fract(st.x*size);
+   float green = fract((1.-st.y)*size);
+   float blue = floor((1.-st.y)*size)/size;
+
+   color = vec3(red,green,blue);
+
+   gl_FragColor = vec4( color , 1.0);
+}

17/lut.frag

@@ -0,0 +1,62 @@
+#ifdef GL_ES
+precision highp float;
+#endif
+                                   
+uniform sampler2D u_tex0;
+uniform sampler2D u_tex1;
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+// Author: Matt DesLauriers
+// https://github.com/mattdesl/glsl-lut/blob/master/index.glsl
+//
+#define LUT_NO_CLAMP
+#define LUT_FLIP_Y
+
+vec4 lookup(in vec4 textureColor, in sampler2D lookupTable) {    
+    #ifndef LUT_NO_CLAMP
+        textureColor = clamp(textureColor, 0.0, 1.0);
+    #endif
+
+    float blueColor = textureColor.b * 63.0;
+
+    vec2 quad1 = vec2(0.0);
+    quad1.y = floor(floor(blueColor) / 8.0);
+    quad1.x = floor(blueColor) - (quad1.y * 8.0);
+
+    vec2 quad2 = vec2(0.0);
+    quad2.y = floor(ceil(blueColor) / 8.0);
+    quad2.x = ceil(blueColor) - (quad2.y * 8.0);
+
+    vec2 texPos1 = vec2(0.0);
+    texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
+    texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
+
+    #ifdef LUT_FLIP_Y
+        texPos1.y = 1.0-texPos1.y;
+    #endif
+
+    vec2 texPos2 = vec2(0.0);
+    texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
+    texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
+
+    #ifdef LUT_FLIP_Y
+        texPos2.y = 1.0-texPos2.y;
+    #endif
+
+    vec4 newColor1 = texture2D(lookupTable, texPos1);
+    vec4 newColor2 = texture2D(lookupTable, texPos2);
+
+    vec4 newColor = mix(newColor1, newColor2, fract(blueColor));
+    return newColor;
+}
+
+void main(){
+   vec2 st = gl_FragCoord.st/u_resolution.xy;
+   vec4 srcColor = texture2D(u_tex0, st);
+   vec3 dstcolor = lookup(srcColor,u_tex1).rgb;
+   
+   gl_FragColor = vec4( dstcolor , 1.0);
+}