demos demos demos

08/cross-doted.frag

@@ -0,0 +1,50 @@
+// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
+
+#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 boxDF(vec2 st, float size) {
+    st = st*2.-1.;
+    return length(max(abs(st)-size,.0));
+}
+
+float box(vec2 st, float size, float radio) {
+    radio = max(radio,.000001);
+    return 1.-step(radio,boxDF(st,size-radio));
+}
+
+float cross(vec2 st, float radio) {
+    float size = .25;
+    size *= (1.0-radio*2.);
+    return  box(st,size,radio) +
+            box(st+vec2(.0,size*(1.0-radio*2.)),size,min(radio,size)) +
+            box(st+vec2(.0,-size*(1.0-radio*2.)),size,min(radio,size)) +
+            box(st+vec2(size*(1.0-radio*2.),.0),size,min(radio,size)) +
+            box(st+vec2(-size*(1.0-radio*2.),.0),size,min(radio,size));
+}
+
+void main(){
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    st.x *= u_resolution.x/u_resolution.y;
+    vec3 color = vec3(0.0);
+    
+    st -= vec2(0.5);
+    st = rotate2d( sin(u_time)*PI ) * st;
+    st += vec2(0.5);
+
+    // Add the shape on the foreground
+    color += cross(st,(1.0-abs(sin(u_time)))*.5);
+
+    gl_FragColor = vec4(color,1.0);
+}

11/2d-snoise.frag

@@ -72,7 +72,7 @@ void main() {
 
     vec2 pos = vec2(st*10.);
 
-    color = vec3( snoise(pos) );
+    color = vec3(snoise(pos)*.5+.5);
 
     gl_FragColor = vec4(color,1.0);
 }

11/README.md

@@ -114,7 +114,7 @@ For example, if we use a two dimensional noise implementation to rotate the "gri
     pattern = lines(pos,.5); // draw lines
 ```
 
-Another way to get interesting patterns from noise is to treat it like a distance field and apply some of the tricks described on the [Shapes chapter](../07)
+Another way to get interesting patterns from noise is to treat it like a distance field and apply some of the tricks described on the [Shapes chapter](../07/)
 
 <a href="../edit.html#11/splatter.frag"><canvas id="custom" class="canvas" data-fragment-url="splatter.frag"  width="520px" height="200px"></canvas></a> 
 
@@ -123,20 +123,20 @@ Another way to get interesting patterns from noise is to treat it like a distanc
     color -= smoothstep(.35,.4,noise(st*10.)); // Holes on splatter
 ```
 
-The third way of using the noise function is using it to modulate a shapes, this probably require reviewing the [Shapes Chapter](../07)
+The third way of using the noise function is using it to modulate a shapes, this probably require reviewing the [Shapes Chapter](../07/)
 
 <a href="../edit.html#11/circleWave-noise.frag"><canvas id="custom" class="canvas" data-fragment-url="circleWave-noise.frag"  width="520px" height="520"></canvas></a> 
 
-* What other generative pattern can you make? What about granite? marble? magma? water? Find a picture of three textures you are interested and implement it algorithmically using noise.
-* Use noise to modulate three shapes.
-* What about noise apply to motion? Go back to the Matrix chapter and use the translation example that move a the "+" around to apply some *random* and *noise* movements to it.
+* What other generative pattern can you make? What about granite? marble? magma? water? Find three pictures of  textures you are interested and implement them algorithmically using noise.
+* Use noise to modulate a shapes.
+* What about using noise for motion? Go back to the [Matrix chapter](../08/) and use the translation example that move a the "+" around to apply some *random* and *noise* movements to it.
+* Make a generative Jackson Pollock
 
-Nothing like having some control over the chaos and chances. Right?
-Noise is one of those subjects that you can dig and always find new exciting formulas. In fact, noise means different things for different people. Musicians will think in audio noise, communicators into interference, and astrophysics on cosmic microwave background. On the next chapter we will use some related concepts from sign and audio behavior to our noise function to explore more uses of noise.
+![Jackson Pollock - Number 14 gray (1948)](pollock.jpg)
 
 ## Simplex Noise
 
-Ken Perlin though the success of his algorithm wasn't enough. He thought it could performance better. In Siggraph 2001 he presented the "simplex noise" in wich he achive the following improvements over the previus one:
+For Ken Perlin the success of his algorithm wasn't enough. He thought it could performance better. In Siggraph 2001 he presented the "simplex noise" in wich he achive the following improvements over the previus one:
 
 * An algorithm with lower computational complexity and fewer multiplications.
 * A noise that scales to higher dimensions with less computational cost.
@@ -144,13 +144,23 @@ Ken Perlin though the success of his algorithm wasn't enough. He thought it coul
 * 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? How he did that? Well we saw that for one dimension he was smoothly interpolating two points and 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).
+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!
 
-![](2^N.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:
 
-## Digital Jackson Pollock
+"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."
 
-# Voronoi Noise
+Here is an actual GLSL implementation of this algorithm
 
+<div class="codeAndCanvas" data="2d-snoise.frag"></div>
 
+Now:
 
+* Take a closer look to the implementation and their results. Beside the eficient improvements, what you can say about how it looks?
+
+* Make a shader that project the ilusion of flow. Like a lava lamp, ink drops, watter, etc.
+
+<a href="../edit.html#11/lava-lamp.frag"><canvas id="custom" class="canvas" data-fragment-url="lava-lamp.frag"  width="520px" height="200px"></canvas></a> 
+
+Nothing like having some control over the chaos and chances. Right?
+Noise is one of those subjects that you can dig and always find new exciting formulas. In fact if you think of it, noise means different things for different people. Musicians will think in audio noise, communicators into interference, and astrophysics on cosmic microwave background. On the next chapter we will use some related concepts from sign and audio behavior to our noise function to explore more uses of noise.

11/lava-lamp.frag

@@ -62,5 +62,5 @@ void main() {
 
     color = vec3( smoothstep(.7,.75,fract(DF)) );
 
-    gl_FragColor = vec4(color,1.0);
+    gl_FragColor = vec4(1.0-color,1.0);
 }