adding images and examples

08/cube-translate.frag

@@ -0,0 +1,47 @@
+// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform float u_time;
+
+float box(vec2 st, 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;
+}
+
+vec2 direction(float t) {
+    return vec2(0.25)-floor(1.0+vec2(cos(t*3.1415),sin(t*3.1415)))*.5;
+}
+
+void main(){
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    st.y *= u_resolution.y/u_resolution.x;
+
+    float t = u_time;
+
+    vec2 now = direction(fract(t*.25));
+    vec2 next = direction(fract(t*.25)+.125);
+    vec2 offset = mix(now,next,fract(t));
+
+    vec3 color = vec3(0.0);
+    
+    vec2 i_st = floor(st);
+    vec2 f_st = fract(st);
+
+    color = vec3(box(f_st+offset,vec2(.5)));
+
+    if (mod(i_st.x,2.) == mod(i_st.y,2.)) {
+        color = 1.0-color;
+    }
+
+    gl_FragColor = vec4(color,1.0);
+}

09/grid-warp.frag

@@ -0,0 +1,33 @@
+// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform float u_time;
+
+vec2 tile(vec2 _st, float _zoom){
+    _st *= _zoom;
+    return fract(_st);
+}
+
+float X(vec2 _st, float _width){
+    float pct0 = smoothstep(_st.x-_width,_st.x,_st.y);
+    pct0 *= 1.-smoothstep(_st.x,_st.x+_width,_st.y);
+
+    float pct1 = smoothstep(_st.x-_width,_st.x,1.0-_st.y);
+    pct1 *= 1.-smoothstep(_st.x,_st.x+_width,1.0-_st.y);
+
+    return pct0+pct1;
+}
+
+void main(void){
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    st.y *= u_resolution.y/u_resolution.x;
+
+    vec2 xy = st-vec2(.5);
+    float grid = 1.0-X(tile(xy,10.+20.0*dot(xy,xy)),0.05);
+
+    gl_FragColor = vec4(vec3(grid),1.0);    
+}

09/lines-thin.frag

@@ -0,0 +1,38 @@
+// Author @patriciogv - 2015 - patricio.io
+#extension GL_OES_standard_derivatives : enable
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+const float PI = 3.1415926535897932384626433832795;
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+float aastep(float threshold, float value) {
+  #ifdef GL_OES_standard_derivatives
+    float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;
+    return smoothstep(threshold-afwidth, threshold+afwidth, value);
+  #else
+    return step(threshold, value);
+  #endif  
+}
+
+mat2 rotate2d(float angle){
+    return mat2(cos(angle),-sin(angle),
+                sin(angle),cos(angle));
+}
+float stripes(vec2 st){
+    st = rotate2d(.72)*st;
+    st *= 92.;
+    return aastep(.3,abs(sin(st.y*3.14159265358)));
+}
+
+void main(){
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    st.x *= u_resolution.x/u_resolution.y;
+   
+    vec3 color = vec3(stripes(st));
+    gl_FragColor = vec4(color, 1.0);
+}

09/lines-wave.frag

@@ -0,0 +1,34 @@
+// Author @patriciogv - 2015 - patricio.io
+#extension GL_OES_standard_derivatives : enable
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+const float PI = 3.1415926535897932384626433832795;
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+float aastep(float threshold, float value) {
+  #ifdef GL_OES_standard_derivatives
+    float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;
+    return smoothstep(threshold-afwidth, threshold+afwidth, value);
+  #else
+    return step(threshold, value);
+  #endif  
+}
+
+float stripes(vec2 st, float width){
+    return aastep(width,abs(sin(st.y*3.14159265358)));
+}
+
+void main(){
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    st.x *= u_resolution.x/u_resolution.y;
+   
+   	vec2 pos = st;
+    pos.y += sin(pos.x*30.)*.01;
+    vec3 color = vec3(stripes(pos*92.,.4));
+    gl_FragColor = vec4(color, 1.0);
+}

09/lines-zigzag.frag

@@ -0,0 +1,35 @@
+// Author @patriciogv - 2015 - patricio.io
+#extension GL_OES_standard_derivatives : enable
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+const float PI = 3.1415926535897932384626433832795;
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+float aastep(float threshold, float value) {
+  #ifdef GL_OES_standard_derivatives
+    float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;
+    return smoothstep(threshold-afwidth, threshold+afwidth, value);
+  #else
+    return step(threshold, value);
+  #endif  
+}
+
+float stripes(vec2 st, float width){
+    return aastep(width,abs(sin(st.y*3.14159265358)));
+}
+
+void main(){
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    st.x *= u_resolution.x/u_resolution.y;
+   
+    vec2 pos = fract(st*30.);
+    pos.y += mix(fract(pos.x),fract(1.0-pos.x),step(.5,pos.x))*3.;
+    vec3 color = vec3(stripes(pos,.3));
+
+    gl_FragColor = vec4(color, 1.0);
+}

11/README.md

@@ -95,11 +95,11 @@ Now is your turn, try the following excersices:
 
 As we saw, noise algorithms was original designed to give a natural *je ne sais quoi* to digital textures. Our first step to use it will be to differenciate different types of noise algorithms. So far all the implementations in 1D and 2D we saw, were interpolation between values and so they are usually call **Value Noise**. 
 
-<a href="../edit.html#11/2d-vnoise.frag"><canvas id="custom" class="canvas" data-fragment-url="2d-vnoise.frag"  width="520px" height="200px"></canvas> <p style="text-align: center;font-style: italic;">Value Noise by IQ</p></a>
+[ ![Inigo Quilez - Value Noise](value-noise.png) ](../edit.html#11/2d-vnoise.frag)
 
 As you discovery on the previus excercises this type of noise tends to look "block", as a solution to this effect in 1985 again [Ken Perlin](https://mrl.nyu.edu/~perlin/) develop another implementation of the algorithm call **Gradient Noise**. In it what is interpolated per coorner is not a value but a direction (represented by a ```vec2```).
 
-<a href="../edit.html#11/2d-gnoise.frag"><canvas id="custom" class="canvas" data-fragment-url="2d-gnoise.frag"  width="520px" height="200px"></canvas> <p style="text-align: center;font-style: italic;">Gradient Noise by IQ</p></a>
+[ ![Inigo Quilez - Gradient Noise](gradient-noise.png) ](../edit.html#11/2d-gnoise.frag)
 
 Take a minute to look to these two examples by [Inigo Quilez](http://www.iquilezles.org/) and pay attention on the differences between [value noise](https://www.shadertoy.com/view/lsf3WH) and [gradient noise](https://www.shadertoy.com/view/XdXGW8).
 
@@ -144,7 +144,15 @@ For Ken Perlin the success of his algorithm wasn't enough. He thought it could p
 * A noise with well-defined and continuous gradients that can be computed quite cheaply
 * An algorithm that is easy to implemnt in hardware
 
-Yeah, right? I know what you are thinking... "Who is this man?". Yes, his work is fantastic. But seriusly, How he did that? Well we saw how for two dimensions he was interpolating 4 points (coorners of a square); also we can correctly preasume that for [three (see an implementation here)](../edit.html#11/3d-noise.frag) and four dimensions we need to interpolate 8 and 16 points. Right? In other words for N dimensions you need to smoothly interpolate 2 to the N points (2^N). But Ken smartly notice that although the obvious choice for a space-filling shape is a squar, but actually the formal simplex shape in 2D is an equilateral triangle. That means that the simplex shape for N dimensions is a shape with N + 1 corners. In other words one less corner to compute in 2D, 4 less coorners in 3D and 11 less coorners in 4D! That's a huge improvement!
+Yeah, right? I know what you are thinking... "Who is this man?". Yes, his work is fantastic. But seriusly, How he did that? Well we saw how for two dimensions he was interpolating 4 points (coorners of a square); also we can correctly preasume that for [three (see an implementation here)](../edit.html#11/3d-noise.frag) and four dimensions we need to interpolate 8 and 16 points. Right? In other words for N dimensions you need to smoothly interpolate 2 to the N points (2^N). But Ken smartly notice that although the obvious choice for a space-filling shape is a squar, but actually the formal simplex shape in 2D is an equilateral triangle. 
+
+![](simplex-grid-00.png)
+
+That means that the simplex shape for N dimensions is a shape with N + 1 corners. In other words one less corner to compute in 2D, 4 less coorners in 3D and 11 less coorners in 4D! That's a huge improvement!
+
+In 2D the interpolation happens between those three corners in a similar way we where seen before.
+
+![](simplex-grid-01.png)
 
 It worths taking a look to [this paper where Stefan Gustavson](http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf) explains all the beauty and elegance of Ken Perlin's Simplex Noise. Couting from it:
 

examples/README.md

@@ -56,7 +56,7 @@ The following is a list of examples present in this book.
         - [Diamond tiles](../edit.html#09/diamondtiles.frag)
         - [Bricks](../edit.html#09/bricks.frag)
         - Dots: [0](../edit.html#09/dots.frag), [1](../edit.html#09/dots1.frag), [2](../edit.html#09/dots2.frag), [3](../edit.html#09/dots3.frag), [4](../edit.html#09/dots4.frag), [5](../edit.html#09/dots5.frag) and [marching dots](../edit.html#09/marching_dots.frag)
-        - [Side grid](../edit.html#09/sidegrid.frag)
+        - [Side grid](../edit.html#09/grid-side.frag)
         - [Rotated tiles](../edit.html#09/rotatedtiles.frag)
         - [Nuts pattern](../edit.html#09/nuts.frag)
         - [Mirror tiles](../edit.html#09/mirrortiles.frag)