adding images to noise chapter

09/dots-zoom-00.frag

@@ -0,0 +1,68 @@
+// Author @patriciogv ( patricio.io ) - 2015
+// Inspired by the Patterns of Nina Warmerdam ( www.behance.net/ninawarmerdam )
+#ifdef GL_OES_standard_derivatives
+#extension GL_OES_standard_derivatives : enable
+#endif
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+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  
+}
+vec2 brickTile(vec2 st, float zoom){
+  st *= zoom;
+  if (fract(st.y * 0.5) > 0.5){
+      st.x += 0.5;
+  }
+  return fract(st);
+}
+float circleDF(vec2 st){
+  vec2 pos = vec2(0.5)-st;
+  return dot(pos,pos)*3.14;
+}
+float circle(vec2 st, float radius){
+  radius *= 0.75;
+  return 1.-aastep(radius,circleDF(st));
+}
+
+float dots(vec2 st, float size){
+    st = brickTile(st, 2.);
+    return circle(st, size);
+}
+
+float dotsDF(vec2 st){
+    st = brickTile(st, 2.);
+    return circleDF(st);
+}
+
+void main(){
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    st.x *= u_resolution.x/u_resolution.y;
+    vec3 color = vec3(0.0);
+
+    vec2 IN = st;
+    vec2 OUT = st*2.;
+    
+    float pct = 1.0-fract(u_mouse.y/u_resolution.y);
+    pct = pow(pct,6.);
+
+    float d = 0.0;
+    // d = mix(dots(fract(IN),(1.-pct)), dots(fract(OUT),pct), pct);
+    // d = mix(dotsDF(fract(IN)), dotsDF(fract(OUT)), pct);
+    d = dotsDF(fract(IN))*(1.-pct) + dotsDF(fract(OUT))*pct;
+    d = aastep(.21,d);
+    color = vec3(d);
+
+    gl_FragColor = vec4(color,1.0);
+}

09/dots-zoom-01.frag

@@ -0,0 +1,59 @@
+// Author @patriciogv ( patricio.io ) - 2015
+// Inspired by the Patterns of Nina Warmerdam ( www.behance.net/ninawarmerdam )
+#ifdef GL_OES_standard_derivatives
+#extension GL_OES_standard_derivatives : enable
+#endif
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+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  
+}
+vec2 brickTile(vec2 st, float zoom){
+  st *= zoom;
+  if (fract(st.y * 0.5) > 0.5){
+      st.x += 0.5;
+  }
+  return fract(st);
+}
+
+float circleDF(vec2 st){
+  vec2 pos = vec2(0.5)-st;
+  return dot(pos,pos)*3.14;
+}
+
+float dotsDF(vec2 st){
+    st = brickTile(st, 2.);
+    return circleDF(st);
+}
+
+void main(){
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    st.x *= u_resolution.x/u_resolution.y;
+    vec3 color = vec3(0.0);
+
+    vec2 IN = st;
+    vec2 OUT = st*2.;
+    
+    float pct = 1.0-fract(u_mouse.y/u_resolution.y);
+
+    float d = 0.0;
+    d = dotsDF(fract(IN))*(1.0-pct);
+    d += dotsDF(fract(OUT))*pct;
+    // d = max(dotsDF(fract(IN))*(1.0-pct),dotsDF(fract(OUT))*pct);
+    // d = aastep(.21,d);
+    color = vec3(d);
+
+    gl_FragColor = vec4(color,1.0);
+}

11/2d-snoise.frag

@@ -24,31 +24,44 @@ vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
 vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }
 
 float snoise(vec2 v) {
-    const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
-                        0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
-                        -0.577350269189626,  // -1.0 + 2.0 * C.x
-                        0.024390243902439); // 1.0 / 41.0
+    const vec4 C = vec4(0.211324865405187,
+                        // (3.0-sqrt(3.0))/6.0
+                        0.366025403784439,  
+                        // 0.5*(sqrt(3.0)-1.0)
+                        -0.577350269189626,  
+                        // -1.0 + 2.0 * C.x
+                        0.024390243902439); 
+                        // 1.0 / 41.0
     // First corner
     vec2 i  = floor(v + dot(v, C.yy) );
     vec2 x0 = v -   i + dot(i, C.xx);
 
     // Other corners
     vec2 i1;
-    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+    i1 = (x0.x > x0.y)? vec2(1.0, 0.0):vec2(0.0, 1.0);
     vec4 x12 = x0.xyxy + C.xxzz;
     x12.xy -= i1;
 
     // Permutations
-    i = mod289(i); // Avoid truncation effects in permutation
-    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
-        + i.x + vec3(0.0, i1.x, 1.0 ));
 
-    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
+    // Avoid truncation effects in permutation
+    i = mod289(i);
+    vec3 p = permute(
+            permute( i.y + vec3(0.0, i1.y, 1.0))
+                + i.x + vec3(0.0, i1.x, 1.0 ));
+
+    vec3 m = max(0.5 - vec3(
+                        dot(x0,x0), 
+                        dot(x12.xy,x12.xy), 
+                        dot(x12.zw,x12.zw)
+                        ), 0.0);
     m = m*m ;
     m = m*m ;
 
-    // Gradients: 41 points uniformly over a line, mapped onto a diamond.
-    // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)
+    // Gradients: 
+    //  41 pts uniformly over a line, mapped onto a diamond
+    //  The ring size 17*17 = 289 is close to a multiple 
+    //      of 41 (41*7 = 287)
 
     vec3 x = 2.0 * fract(p * C.www) - 1.0;
     vec3 h = abs(x) - 0.5;
@@ -56,8 +69,8 @@ float snoise(vec2 v) {
     vec3 a0 = x - ox;
 
     // Normalise gradients implicitly by scaling m
-    // Approximation of: m *= inversesqrt( a0*a0 + h*h );
-    m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
+    // Approximation of: m *= inversesqrt(a0*a0 + h*h);
+    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0+h*h);
 
     // Compute final noise value at P
     vec3 g;

11/README.md

@@ -5,14 +5,34 @@
 
 Break time! We have been playing with all this random functions that looks like TV white noise, our head is still spinning around thinking on shaders, and our eyes are tired. Time to get out for a walk!
 
-We feel the air in our face, the sun in our nose and chicks. The world is such a vivid and rich place. Colors, textures, sounds. While we walk we can't avoid noticing the surface of the roads, rocks, trees and clouds. We note the stochasticity of textures, there is random on nature. But definitely not the type of random we were making in the previus chapter. The “real world” is such a rich place. How we can approximate to this level of variety computationally?
+We feel the air in our skin, the sun in our face. The world is such a vivid and rich place. Colors, textures, sounds. While we walk we can't avoid noticing the surface of the roads, rocks, trees and clouds. 
 
-We are on the same path of thoughts that [Ken Perlin](https://mrl.nyu.edu/~perlin/)'s walk through on 1982 when he was commissioned with the job of generating "more realistic" textures for a new disney movie call "Tron". In response to that he came up with an elegant *oscar winner* noise algorithm.
+![](texture-00.jpg)
+![](texture-01.jpg)
+![](texture-02.jpg)
+![](texture-03.jpg)
+![](texture-04.jpg)
+![](texture-05.jpg)
+![](texture-06.jpg)
+
+The stochasticity of this textures could be call "random", but definitely not the type of random we were playing before in the previus chapter. The “real world” is such a rich place! It's rando is way complex. How we can approximate to this level of variety computationally?
+
+This was the question [Ken Perlin](https://mrl.nyu.edu/~perlin/) was trying to solve arround 1982 when he was commissioned with the job of generating "more realistic" textures for a new disney movie call "Tron". In response to that he came up with an elegant *oscar winner* noise algorithm.
+
+![Disney - Tron (1982)](tron.jpg)
 
 The following is not the clasic Perlin noise algorithm, but is a good starting point to understand how to generate *smooth random* aka *noise*.
 
 In the following graph you will see what we were doing on the previus chapter, obtaining ```rand()``` numbers of the integers of the `x` position (assigning it to `i` variable), while we keep the [```fract()```](.../glossary/?search=fract) part of it (and storing it on the `f` variable).
 
+You will also see, two commented lines. The first one interpolates linearly between the random value of the integer position and it next one.
+
+```glsl
+y = mix(rand(i), rand(i + 1.0), f);
+``` 
+
+Uncomment it an see how that looks. See how we use the [```fract()```](.../glossary/?search=fract) value store in `f` to [```mix()```](.../glossary/?search=mix) the two random values.
+
 <div class="simpleFunction" data="
 float i = floor(x);  // integer
 float f = fract(x);  // fraction
@@ -21,14 +41,6 @@ y = rand(i);
 //y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
 "></div>
 
-You will see also, two commented lines. The first one interpolates linearly between the random value of the integer position and it next one.
-
-```glsl
-y = mix(rand(i), rand(i + 1.0), f);
-``` 
-
-Uncomment it an see how that looks. See how we use the [```fract()```](.../glossary/?search=fract) value store in `f` to [```mix()```](.../glossary/?search=mix) the two random values.
-
 At this point on the book, we learned that we can do better than a linear interpolation. Right? 
 The following commented line, will transfor the linear interpolation of `f` with a [```smoothstep()```](.../glossary/?search=smoothstep) interpolation.
 
@@ -152,13 +164,13 @@ That means that the simplex shape for N dimensions is a shape with N + 1 corners
 
 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:
 
-"A point P inside a simplex gets contributions to its value only from the three kernels centered on the surrounding corners (shaded, red circles). Kernels at corners farther away (green circles) decay to zero before they cross the boundary to the simplex containing P. Thus, the noise value at each point can always be calculated as a sum of three terms."
+_"A point P inside a simplex gets contributions to its value only from the three kernels centered on the surrounding corners (shaded, red circles). Kernels at corners farther away (green circles) decay to zero before they cross the boundary to the simplex containing P. Thus, the noise value at each point can always be calculated as a sum of three terms."_
+
+![](simplex-grid-01.png)
 
-Here is an actual GLSL implementation of this algorithm
+Following is an actual GLSL implementation of this algorithm:
 
 <div class="codeAndCanvas" data="2d-snoise.frag"></div>
 

11/grid-warp.frag

@@ -0,0 +1,135 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+vec2 random2(vec2 st){
+    st = vec2( dot(st,vec2(127.1,311.7)),
+              dot(st,vec2(269.5,183.3)) );
+    return -1.0 + 2.0*fract(sin(st)*43758.5453123);
+}
+
+// Value Noise by Inigo Quilez - iq/2013
+// https://www.shadertoy.com/view/lsf3WH
+float noise(vec2 st) {
+    vec2 i = floor(st);
+    vec2 f = fract(st);
+
+    vec2 u = f*f*(3.0-2.0*f);
+
+    return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ), 
+                     dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),
+                mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ), 
+                     dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);
+}
+
+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;
+}
+
+
+//
+// Description : Array and textureless GLSL 2D/3D/4D simplex 
+//               noise functions.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : ijm
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+// 
+vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
+vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+
+float snoise(vec3 v) { 
+    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+    // First corner
+    vec3 i  = floor(v + dot(v, C.yyy) );
+    vec3 x0 =   v - i + dot(i, C.xxx) ;
+
+    // Other corners
+    vec3 g = step(x0.yzx, x0.xyz);
+    vec3 l = 1.0 - g;
+    vec3 i1 = min( g.xyz, l.zxy );
+    vec3 i2 = max( g.xyz, l.zxy );
+
+    vec3 x1 = x0 - i1 + C.xxx;
+    vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+    vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+    // Permutations
+    i = mod289(i); 
+    vec4 p = permute( permute( permute( 
+             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+           + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
+           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+
+    // Gradients: 7x7 points over a square, mapped onto an octahedron.
+    // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+    float n_ = 0.142857142857; // 1.0/7.0
+    vec3  ns = n_ * D.wyz - D.xzx;
+
+    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+    vec4 x_ = floor(j * ns.z);
+    vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+    vec4 x = x_ *ns.x + ns.yyyy;
+    vec4 y = y_ *ns.x + ns.yyyy;
+    vec4 h = 1.0 - abs(x) - abs(y);
+
+    vec4 b0 = vec4( x.xy, y.xy );
+    vec4 b1 = vec4( x.zw, y.zw );
+
+    vec4 s0 = floor(b0)*2.0 + 1.0;
+    vec4 s1 = floor(b1)*2.0 + 1.0;
+    vec4 sh = -step(h, vec4(0.0));
+
+    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+    vec3 p0 = vec3(a0.xy,h.x);
+    vec3 p1 = vec3(a0.zw,h.y);
+    vec3 p2 = vec3(a1.xy,h.z);
+    vec3 p3 = vec3(a1.zw,h.w);
+
+    //Normalise gradients
+    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+    p0 *= norm.x;
+    p1 *= norm.y;
+    p2 *= norm.z;
+    p3 *= norm.w;
+
+    // Mix final noise value
+    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+    m = m * m;
+    return 42.0 * dot( m*m, vec4(dot(p0,x0), dot(p1,x1), 
+                                 dot(p2,x2), dot(p3,x3) ) );
+}
+
+void main() {
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    st.x *= u_resolution.x/u_resolution.y;
+
+    float grid = 1.0-X(tile(st,15.+snoise(vec3(st,u_time*.1))),0.05);
+
+    gl_FragColor = vec4(vec3(grid),1.0);
+}

11/warp-grid.frag

@@ -1,47 +0,0 @@
-#ifdef GL_ES
-precision mediump float;
-#endif
-
-uniform vec2 u_resolution;
-uniform vec2 u_mouse;
-uniform float u_time;
-
-vec2 random2(vec2 st){
-    st = vec2( dot(st,vec2(127.1,311.7)),
-              dot(st,vec2(269.5,183.3)) );
-    return -1.0 + 2.0*fract(sin(st)*43758.5453123);
-}
-
-// Value Noise by Inigo Quilez - iq/2013
-// https://www.shadertoy.com/view/lsf3WH
-float noise(vec2 st) {
-    vec2 i = floor(st);
-    vec2 f = fract(st);
-
-    vec2 u = f*f*(3.0-2.0*f);
-
-    return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ), 
-                     dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),
-                mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ), 
-                     dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);
-}
-
-float grid(vec2 st, float res){
-    vec2 grid = fract(st*res);
-    return 1.-(step(res,grid.x) * step(res,grid.y));
-}
-
-void main() {
-    vec2 st = gl_FragCoord.xy/u_resolution.xy;
-    st.x *= u_resolution.x/u_resolution.y;
-    vec3 color = vec3(0.0);
-
-    // Grid
-    vec2 grid_st = (st+1.)*(290.+noise(st*5.+u_time)*10.);
-
-    color += vec3(0.2,0.,0.)*grid(grid_st,0.01);
-    color += vec3(0.1,0.,0.)*grid(grid_st,0.02);
-    color += vec3(0.1)*grid(grid_st,0.1);
-
-    gl_FragColor = vec4(1.0-color,1.0);
-}