diff --git a/03/time.png b/03/time.png index d750f88..87e6ec2 100644 Binary files a/03/time.png and b/03/time.png differ diff --git a/06/easing.png b/06/easing.png index ed8183a..cdf0e66 100644 Binary files a/06/easing.png and b/06/easing.png differ diff --git a/07/batman.png b/07/batman.png index fb1d659..7b1dad0 100644 Binary files a/07/batman.png and b/07/batman.png differ diff --git a/07/triangle-making.png b/07/triangle-making.png index 7444501..fe10430 100644 Binary files a/07/triangle-making.png and b/07/triangle-making.png differ diff --git a/08/cross-rotate.png b/08/cross-rotate.png index e369a14..add0479 100644 Binary files a/08/cross-rotate.png and b/08/cross-rotate.png differ diff --git a/08/cross-scale.png b/08/cross-scale.png index 0a1616f..2a150c3 100644 Binary files a/08/cross-scale.png and b/08/cross-scale.png differ diff --git a/08/cross-translate.png b/08/cross-translate.png index 63ffbcf..20c8616 100644 Binary files a/08/cross-translate.png and b/08/cross-translate.png differ diff --git a/09/dots5.png b/09/dots5.png index b3fa66c..b154e03 100644 Binary files a/09/dots5.png and b/09/dots5.png differ diff --git a/09/marching_dots.png b/09/marching_dots.png index ed040bb..229a536 100644 Binary files a/09/marching_dots.png and b/09/marching_dots.png differ diff --git a/09/nuts.png b/09/nuts.png index c3219c7..d3f9caf 100644 Binary files a/09/nuts.png and b/09/nuts.png differ diff --git a/09/rotatedtiles.png b/09/rotatedtiles.png index 9e78036..cc38674 100644 Binary files a/09/rotatedtiles.png and b/09/rotatedtiles.png differ diff --git a/10/1d-random.png b/10/1d-random.png index a36adee..3b0231b 100644 Binary files a/10/1d-random.png and b/10/1d-random.png differ diff --git a/10/ikeda-00.png b/10/ikeda-00.png index 66be4e1..422c52b 100644 Binary files a/10/ikeda-00.png and b/10/ikeda-00.png differ diff --git a/10/ikeda-02.png b/10/ikeda-02.png index 701a4fa..5ac99c9 100644 Binary files a/10/ikeda-02.png and b/10/ikeda-02.png differ diff --git a/10/ikeda-03.png b/10/ikeda-03.png index 2a255e5..386371c 100644 Binary files a/10/ikeda-03.png and b/10/ikeda-03.png differ diff --git a/10/ikeda-digits.png b/10/ikeda-digits.png index e5dd5c2..2c9d80f 100644 Binary files a/10/ikeda-digits.png and b/10/ikeda-digits.png differ diff --git a/10/ikeda-numered-grid.png b/10/ikeda-numered-grid.png index 58a9ac2..f1ad8ab 100644 Binary files a/10/ikeda-numered-grid.png and b/10/ikeda-numered-grid.png differ diff --git a/10/ikeda-simple-grid.png b/10/ikeda-simple-grid.png index 079392d..b58be96 100644 Binary files a/10/ikeda-simple-grid.png and b/10/ikeda-simple-grid.png differ diff --git a/11/1d-noise.png b/11/1d-noise.png index 2b2bf99..9d7b515 100644 Binary files a/11/1d-noise.png and b/11/1d-noise.png differ diff --git a/11/3d-noise.png b/11/3d-noise.png index 193dab6..7b26ccd 100644 Binary files a/11/3d-noise.png and b/11/3d-noise.png differ diff --git a/11/3d-pnoise.png b/11/3d-pnoise.png index 06a2db7..dc6c2b5 100644 Binary files a/11/3d-pnoise.png and b/11/3d-pnoise.png differ diff --git a/11/3d-snoise.png b/11/3d-snoise.png index 3fd8ebe..d3c7b99 100644 Binary files a/11/3d-snoise.png and b/11/3d-snoise.png differ diff --git a/11/circleWave-noise.png b/11/circleWave-noise.png index 2beea6a..1453092 100644 Binary files a/11/circleWave-noise.png and b/11/circleWave-noise.png differ diff --git a/11/iching-03.png b/11/iching-03.png index e62a9c2..6ed8779 100644 Binary files a/11/iching-03.png and b/11/iching-03.png differ diff --git a/11/lava-lamp.png b/11/lava-lamp.png index 8f146b8..9f55497 100644 Binary files a/11/lava-lamp.png and b/11/lava-lamp.png differ diff --git a/12/2d-cnoise-2x2.png b/12/2d-cnoise-2x2.png index 8d90f5b..d18573e 100644 Binary files a/12/2d-cnoise-2x2.png and b/12/2d-cnoise-2x2.png differ diff --git a/12/2d-cnoise-2x2x2.png b/12/2d-cnoise-2x2x2.png index d405fa3..e6e500f 100644 Binary files a/12/2d-cnoise-2x2x2.png and b/12/2d-cnoise-2x2x2.png differ diff --git a/12/2d-cnoise.png b/12/2d-cnoise.png index 1fa05c9..16ee798 100644 Binary files a/12/2d-cnoise.png and b/12/2d-cnoise.png differ diff --git a/12/2d-voronoi.png b/12/2d-voronoi.png index aa1ff61..8969753 100644 Binary files a/12/2d-voronoi.png and b/12/2d-voronoi.png differ diff --git a/12/2d-voronoise.png b/12/2d-voronoise.png index eda669a..2c8a670 100644 Binary files a/12/2d-voronoise.png and b/12/2d-voronoise.png differ diff --git a/12/3d-cnoise.png b/12/3d-cnoise.png index 591f4ba..85ab3ce 100644 Binary files a/12/3d-cnoise.png and b/12/3d-cnoise.png differ diff --git a/12/README.md b/12/README.md index 2f7f75d..a988fad 100644 --- a/12/README.md +++ b/12/README.md @@ -155,8 +155,6 @@ Once you figurate out this algorithm think interesting and creative uses for it. ![Vonoroi Puzzle - Reza Ali (2015)](reza.png) - - ### Improving Voronoi In 2011, [Stefan Gustavson optimized Steven Worley's algorithm to GPU](http://webstaff.itn.liu.se/~stegu/GLSL-cellular/GLSL-cellular-notes.pdf) by only iterating trough a 2x2 matrix instead of 3x3. This reduce the work significantly but can create artifacts in form of discontinuities. Take a look to the following examples. @@ -173,8 +171,8 @@ Inigio's experiment on voronoi didn't stop there. In 2014 he wrote this nice art -Now is up to you to observe and learn how to use and modify this technique for your own expressive porpoises. +Now is up to look closely at things, be inspired by nature to find your own voice on this technique. + +![Deyrolle glass film - 1831](DeyrolleFilm.png)
- -![Deyrolle glass film](DeyrolleFilm.png) diff --git a/12/cell.frag b/12/cell.frag index 872148b..1e73f62 100755 --- a/12/cell.frag +++ b/12/cell.frag @@ -1,4 +1,5 @@ -// Author @patriciogv - 2015 +// Author: @patriciogv - 2015 +// Title: Cell #ifdef GL_ES precision mediump float; diff --git a/12/cracks.frag b/12/cracks.frag index b2a2b07..0027bd2 100755 --- a/12/cracks.frag +++ b/12/cracks.frag @@ -1,4 +1,5 @@ -// Author @patriciogv - 2015 +// Author: @patriciogv - 2015 +// Title: Cracks #ifdef GL_ES precision mediump float; @@ -57,7 +58,7 @@ vec2 cellular2x2(vec2 P) { void main(void) { vec2 st = gl_FragCoord.xy/u_resolution.xy; - st = (st-.5)*.25+.5; + st = (st-.5)*.75+.5; if (u_resolution.y > u_resolution.x ) { st.y *= u_resolution.y/u_resolution.x; st.y -= (u_resolution.y*.5-u_resolution.x*.5)/u_resolution.x; diff --git a/12/cracks.png b/12/cracks.png index c885fdb..ee1e36c 100644 Binary files a/12/cracks.png and b/12/cracks.png differ diff --git a/12/metaballs.frag b/12/metaballs.frag index 1190c5a..409fee9 100644 --- a/12/metaballs.frag +++ b/12/metaballs.frag @@ -1,5 +1,5 @@ -// Author: @patriciogv -// Title: MetaBalls +// Author: @patriciogv - 2015 +// Title: Metaballs #ifdef GL_ES precision mediump float; diff --git a/12/metaballs.gif b/12/metaballs.gif deleted file mode 100644 index c8b3aab..0000000 Binary files a/12/metaballs.gif and /dev/null differ diff --git a/12/metaballs.png b/12/metaballs.png index f52759b..8a20a2e 100644 Binary files a/12/metaballs.png and b/12/metaballs.png differ diff --git a/12/stippling.frag b/12/stippling.frag index 7079910..43fc73c 100755 --- a/12/stippling.frag +++ b/12/stippling.frag @@ -1,4 +1,5 @@ -// Author @patriciogv - 2015 +// Author: @patriciogv - 2015 +// Title: Stippling #ifdef GL_ES precision mediump float; @@ -57,7 +58,7 @@ vec2 cellular2x2(vec2 P) { void main(void) { vec2 st = gl_FragCoord.xy/u_resolution.xy; - st = (st-.5)*.5+.5; + st = (st-.5)*.75+.5; if (u_resolution.y > u_resolution.x ) { st.y *= u_resolution.y/u_resolution.x; st.y -= (u_resolution.y*.5-u_resolution.x*.5)/u_resolution.x; diff --git a/12/stippling.png b/12/stippling.png index 0652aec..ffac8ed 100644 Binary files a/12/stippling.png and b/12/stippling.png differ diff --git a/12/tissue.frag b/12/tissue.frag index 960da1b..82624f1 100644 --- a/12/tissue.frag +++ b/12/tissue.frag @@ -1,3 +1,6 @@ +// Author: @patriciogv - 2015 +// Title: Tissue + #ifdef GL_ES precision mediump float; #endif @@ -60,7 +63,7 @@ vec3 voronoi( in vec2 x, float rnd ) { void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; - st = (st-.5)*.25+.5; + st = (st-.5)*.75+.5; if (u_resolution.y > u_resolution.x ) { st.y *= u_resolution.y/u_resolution.x; st.y -= (u_resolution.y*.5-u_resolution.x*.5)/u_resolution.x; @@ -73,8 +76,6 @@ void main() { float d = dot(st-.5,st-.5); vec3 c = voronoi( 20.*st, pow(d,.4) ); - // isolines - // color = c.x*(0.5 + 0.5*sin(64.0*c.x))*vec3(1.0); // borders color = mix( vec3(1.0), color, smoothstep( 0.01, 0.02, c.x ) ); // feature points diff --git a/12/tissue.png b/12/tissue.png index 1cf971e..6971a66 100644 Binary files a/12/tissue.png and b/12/tissue.png differ diff --git a/12/vorono-01.png b/12/vorono-01.png index 53f157e..da37b70 100644 Binary files a/12/vorono-01.png and b/12/vorono-01.png differ diff --git a/13/1d-fbm.png b/13/1d-fbm.png index 9e9bb2e..199a240 100644 Binary files a/13/1d-fbm.png and b/13/1d-fbm.png differ diff --git a/13/README.md b/13/README.md index ad0e345..31049ea 100644 --- a/13/README.md +++ b/13/README.md @@ -1,3 +1,5 @@ +![Due East over Shadequarter Mountain - Matthew Rangel (2005) ](rangel.jpg) + ## Fractal Brownian Motion Noise tends to means different things for different people. Musicians will think it in disturbing sounds, communicators as interference and astrophysics as cosmic microwave background. In fact most of this concept have one things in common that bring as back to the begining of random. Waves and their properties. Audio or electromagnetical waves, fluctuation overtime of a signal. That change happens in amplitud and frequency. The ecuation for it looks like this: @@ -66,7 +68,11 @@ The following code is an example of how fBm could be implemented on two dimensio * Modify the lacunarity of the fBm on line 47 * Explore by changing the gain on line 48 -This techniques is use commonly to construct procedural landscapes. The self similarity of the fBm is perfect for mountains, together with a close cassing known as turbulence. Esentially a fBm but constructed from the absolute value of a signed noise. +This techniques is use commonly to construct procedural landscapes. The self similarity of the fBm is perfect for mountains. If you are interested in this use you defenetly should read [this great article of Inigo Quiles about advance noise](http://www.iquilezles.org/www/articles/morenoise/morenoise.htm). + +![Blackout - Dan Holdsworth (2010)](holdsworth.jpg) + +Using escentially the same technique is also possible to obtain other effect like what is known as **turbulence**. It's esentially a fBm but constructed from the absolute value of a signed noise. ```glsl for (int i = 0; i < OCTAVES; i++) { @@ -78,7 +84,7 @@ for (int i = 0; i < OCTAVES; i++) { -Another member of this family is the ridge. Constructed similarly to the turbolence but with some extra calculations: +Another member of this family of algorithms is the **ridge**. Constructed similarly to the turbolence but with some extra calculations: ```glsl n = abs(n); // create creases @@ -88,3 +94,12 @@ Another member of this family is the ridge. Constructed similarly to the turbole +### Domain Warping + +[Inigo Quiles wrote this other fascinating article](http://www.iquilezles.org/www/articles/warp/warp.htm) about how is possible to use fBm to warp a space of a fBm. Mind blowing, Right? Is like the dream inside the dream of Inception. + +![ f(p) = fbm( p + fbm( p + fbm( p ) ) ) - Inigo Quiles (2002)](quiles.jpg) + +A mild example of this technique is the following code where the wrap is use to produce something this clouds-like texture. Note how the self similarity propertie still is apreciated. + +
diff --git a/13/clouds.png b/13/clouds.png index 6c5451d..1796745 100644 Binary files a/13/clouds.png and b/13/clouds.png differ diff --git a/13/holdsworth.jpg b/13/holdsworth.jpg new file mode 100644 index 0000000..b338567 Binary files /dev/null and b/13/holdsworth.jpg differ diff --git a/13/noise.png b/13/noise.png index 86bbcd5..cf789e1 100644 Binary files a/13/noise.png and b/13/noise.png differ diff --git a/13/quiles.jpg b/13/quiles.jpg new file mode 100644 index 0000000..3a714b6 Binary files /dev/null and b/13/quiles.jpg differ diff --git a/13/rangel.jpg b/13/rangel.jpg new file mode 100644 index 0000000..a126e32 Binary files /dev/null and b/13/rangel.jpg differ