Archives/thebookofshaders
2
0
Fork 0
mirror of https://github.com/patriciogonzalezvivo/thebookofshaders synced 2024-11-03 23:15:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into translation-jp

Browse Source
This commit is contained in:
Patricio Gonzalez Vivo 2015-09-10 09:00:18 -04:00
commit 24e2eeb058
37 changed files with 1302 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
06/TODO.md
View File

@ -0,0 +1 @@
Add some references and ideas from this IQ article: http://iquilezles.org/www/articles/palettes/palettes.htm

42
08/circleWave.frag Normal file
View File

@ -0,0 +1,42 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// My own port of this processing code by @beesandbombs
// https://dribbble.com/shots/1696376-Circle-wave
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
mat2 rotate2d(float _angle){
return mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle));
}
float circleWave(vec2 st, float radius) {
st = vec2(0.5)-st;
float r = length(st)*2.0;
float a = atan(st.y,st.x);
float m = abs(mod(a+u_time*2.,3.14*2.)-3.14)/3.6;
float f = (cos(a*10.)*.1*pow(m,2.))+radius;
return 1.-smoothstep(f,f+0.007,r);
}
float circleWaveLine(vec2 st, float radius, float width) {
return circleWave(st,radius)-circleWave(st,radius-width);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(1.0) * circleWaveLine(st,0.8,0.02);
st -= vec2(0.5);
st = rotate2d(.314)*st;
st += vec2(0.5);
color = mix(color,vec3(1.0),circleWaveLine(st,0.8,0.02));
gl_FragColor = vec4( color, 1.0 );
}

50
08/circleWave2.frag Normal file
View File

@ -0,0 +1,50 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// My own port of this processing code by @beesandbombs
// https://dribbble.com/shots/1698964-Circle-wave-II.
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
mat2 rotate2d(float _angle){
return mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle));
}
float circleWave(vec2 st, float radius) {
st = vec2(0.5)-st;
float r = length(st)*2.0;
float a = atan(st.y,st.x);
float m = abs(mod(a+u_time*2.,3.14*2.)-3.14)/3.6;
float f = cos(a*10.)*.1*pow(m,3.)+radius;
return 1.-smoothstep(f,f+0.007,r);
}
float circleWaveLine(vec2 st, float radius, float width) {
return circleWave(st,radius)-circleWave(st,radius-width);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
float alpha = .8;
float size = .8;
float width = 0.03;
color += vec3(1.000,0.232,0.565) * circleWaveLine(st,size,width) * alpha;
st -= vec2(0.5);
st = rotate2d(1.004)*st;
st += vec2(0.5);
color += vec3(0.267,.850,0.308) * circleWaveLine(st,size,width) * alpha;
st -= vec2(0.5);
st = rotate2d(1.04)*st;
st += vec2(0.5);
color += vec3(0.489,0.630,1.000) * circleWaveLine(st,size,width) * alpha;
gl_FragColor = vec4( color, 1.0 );
}

50
08/cross-doted.frag Normal file
View File

@ -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);
}

35
08/linesWave.frag Normal file
View File

@ -0,0 +1,35 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
mat2 rotate2d(float angle){
return mat2(cos(angle),-sin(angle),
sin(angle),cos(angle));
}
float stripes(vec2 st, float angle){
st = rotate2d(angle) * st*10.;
return 1.0-abs(sin(st.x*3.1415));
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(.0);
vec2 pos = vec2(0.5)-st;
float t = u_time*.5;
float r = dot(pos,pos)*4.;
st *= 2.;
float pattern = sin(fract(r+t)*3.1415);
pattern = mix(stripes(st,-0.786375),stripes(st,0.786375),pattern);
gl_FragColor = vec4( vec3(smoothstep(.4,.5,pattern)), 1.0 );
}

45
09/dots-animation.frag Normal file
View File

@ -0,0 +1,45 @@
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float rows = 10.0;
vec2 brickTile(vec2 _st, float _zoom){
_st *= _zoom;
if (fract(_st.y * 0.5) > 0.5){
_st.x += 0.5;
}
return fract(_st);
}
float circle(vec2 _st, float _radius){
vec2 pos = vec2(0.5)-_st;
_radius *= 0.75;
return 1.-smoothstep(_radius-(_radius*0.01),_radius+(_radius*0.01),dot(pos,pos)*3.14);
}
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
vec2 pos = vec2(0.5)-st;
st = brickTile(st,20.);
float t = u_time*.5;
float r = dot(pos,pos)*4.;
st *= 2.;
float pattern = sin(fract(r+t)*3.1415);
vec3 color = vec3(circle(st, pattern));
gl_FragColor = vec4(color,1.0);
}

BIN
11/00.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
11/01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

BIN
11/02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 KiB

BIN
11/03.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

BIN
11/04.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 KiB

BIN
11/05.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
11/2^N.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 876 B

39
11/2d-gnoise.frag Normal file
View File

@ -0,0 +1,39 @@
#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);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
vec3 color = vec3(0.0);
vec2 pos = vec2(st*10.0);
color = vec3( noise(pos)*.5+.5 );
gl_FragColor = vec4(color,1.0);
}

2
11/2d-noise.frag
View File

@ -38,7 +38,7 @@ void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
vec2 pos = vec2(st*5.0+u_time);
vec2 pos = vec2(st*5.0);
color = vec3( noise(pos) );

83
11/2d-snoise-normal.frag Normal file
View File

@ -0,0 +1,83 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
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
// 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);
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);
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)
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
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 );
// Compute final noise value at P
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
float scale = 10.0;
st += vec2(u_time*0.1);
st *= scale;
vec2 offset = vec2(1.)/u_resolution.xy;
float center = snoise(vec2(st.x, st.y));
float topLeft = snoise(vec2(st.x - offset.x, st.y - offset.y));
float left = snoise(vec2(st.x - offset.x, st.y));
float bottomLeft = snoise(vec2(st.x - offset.x, st.y + offset.y));
float top = snoise(vec2(st.x, st.y - offset.y));
float bottom = snoise(vec2(st.x, st.y + offset.y));
float topRight = snoise(vec2(st.x + offset.x, st.y - offset.y));
float right = snoise(vec2(st.x + offset.x, st.y));
float bottomRight= snoise(vec2(st.x + offset.x, st.y + offset.y));
float dX = topRight + 2.0 * right + bottomRight - topLeft - 2.0 * left - bottomLeft;
float dY = bottomLeft + 2.0 * bottom + bottomRight - topLeft - 2.0 * top - topRight;
vec3 N = normalize(vec3( dX, dY, 0.01))*.5+.5;
gl_FragColor= vec4(N,1.);
}

2
11/2d-snoise.frag
View File

@ -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);
}

38
11/2d-vnoise.frag Normal file
View File

@ -0,0 +1,38 @@
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float hash(vec2 st) {
float h = dot(st,vec2(127.1,311.7));
return -1.0 + 2.0*fract(sin(h)*43758.5453123);
}
// Gradient Noise by Inigo Quilez - iq/2013
// https://www.shadertoy.com/view/XdXGW8
float noise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
vec2 u = f*f*(3.0-2.0*f);
return mix( mix( hash( i + vec2(0.0,0.0) ),
hash( i + vec2(1.0,0.0) ), u.x),
mix( hash( i + vec2(0.0,1.0) ),
hash( i + vec2(1.0,1.0) ), u.x), u.y);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
vec3 color = vec3(0.0);
vec2 pos = vec2(st*10.0);
color = vec3(noise(pos)*.5+.5);
gl_FragColor = vec4(color,1.0);
}

77
11/2d-voronoi.frag Normal file
View File

@ -0,0 +1,77 @@
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
// Created by inigo quilez - iq/2013
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
// http://www.iquilezles.org/www/articles/voronoilines/voronoilines.htm
vec2 random2( vec2 p ) {
return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453);
}
#define ANIMATE
vec3 voronoi( in vec2 x ) {
vec2 n = floor(x);
vec2 f = fract(x);
// first pass: regular voronoi
vec2 mg, mr;
float md = 8.0;
for (int j=-1; j<=1; j++ ) {
for (int i=-1; i<=1; i++ ) {
vec2 g = vec2(float(i),float(j));
vec2 o = random2( n + g );
#ifdef ANIMATE
o = 0.5 + 0.5*sin( u_time + 6.2831*o );
#endif
vec2 r = g + o - f;
float d = dot(r,r);
if( d<md ) {
md = d;
mr = r;
mg = g;
}
}
}
// second pass: distance to borders
md = 8.0;
for (int j=-2; j<=2; j++ ) {
for (int i=-2; i<=2; i++ ) {
vec2 g = mg + vec2(float(i),float(j));
vec2 o = random2( n + g );
#ifdef ANIMATE
o = 0.5 + 0.5*sin( u_time + 6.2831*o );
#endif
vec2 r = g + o - f;
if( dot(mr-r,mr-r)>0.00001 )
md = min( md, dot( 0.5*(mr+r), normalize(r-mr) ) );
}
}
return vec3( md, mr );
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
vec3 c = voronoi( 8.0*st );
// isolines
color = c.x*(0.5 + 0.5*sin(64.0*c.x))*vec3(1.0);
// borders
color = mix( vec3(1.0,0.6,0.0), color, smoothstep( 0.01, 0.02, c.x ) );
// feature points
float dd = length( c.yz );
color = mix( vec3(1.0,0.6,0.1), color, smoothstep( 0.0, 0.12, dd) );
color += vec3(1.0,0.6,0.1)*(1.0-smoothstep( 0.0, 0.04, dd));
gl_FragColor = vec4(color,1.0);
}

49
11/2d-voronoise.frag Normal file
View File

@ -0,0 +1,49 @@
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
// Created by inigo quilez - iq/2013
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
// http://iquilezles.org/www/articles/voronoise/voronoise.htm
vec3 hash3( vec2 p ) {
vec3 q = vec3( dot(p,vec2(127.1,311.7)),
dot(p,vec2(269.5,183.3)),
dot(p,vec2(419.2,371.9)) );
return fract(sin(q)*43758.5453);
}
float iqnoise( in vec2 x, float u, float v ) {
vec2 p = floor(x);
vec2 f = fract(x);
float k = 1.0+63.0*pow(1.0-v,4.0);
float va = 0.0;
float wt = 0.0;
for (int j=-2; j<=2; j++) {
for (int i=-2; i<=2; i++) {
vec2 g = vec2(float(i),float(j));
vec3 o = hash3(p + g)*vec3(u,u,1.0);
vec2 r = g - f + o.xy;
float d = dot(r,r);
float ww = pow( 1.0-smoothstep(0.0,1.414,sqrt(d)), k );
va += o.z*ww;
wt += ww;
}
}
return va/wt;
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
float n = iqnoise( 30.0*st, abs(cos(u_time*.25)), 0.);
gl_FragColor = vec4(vec3(n),1.0);
}

2
11/3d-noise.frag
View File

@ -49,7 +49,7 @@ void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
vec3 pos = vec3(st*5.0,u_time*0.1);
vec3 pos = vec3(st*5.0,u_time*0.5);
color = vec3(noise(pos));

108
11/3d-snoise-normal.frag Normal file
View File

@ -0,0 +1,108 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
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;
float scale = 10.0;
st *= scale;
float t = u_time*0.3;
vec2 offset = vec2(1.)/u_resolution.xy;
float center = snoise(vec3(st.x, st.y, t));
float topLeft = snoise(vec3(st.x - offset.x, st.y - offset.y, t));
float left = snoise(vec3(st.x - offset.x, st.y, t));
float bottomLeft = snoise(vec3(st.x - offset.x, st.y + offset.y, t));
float top = snoise(vec3(st.x, st.y - offset.y, t));
float bottom = snoise(vec3(st.x, st.y + offset.y, t));
float topRight = snoise(vec3(st.x + offset.x, st.y - offset.y, t));
float right = snoise(vec3(st.x + offset.x, st.y, t));
float bottomRight= snoise(vec3(st.x + offset.x, st.y + offset.y, t));
float dX = topRight + 2.0 * right + bottomRight - topLeft - 2.0 * left - bottomLeft;
float dY = bottomLeft + 2.0 * bottom + bottomRight - topLeft - 2.0 * top - topRight;
vec3 N = normalize(vec3( dX, dY, 0.01))*.5+.5;
gl_FragColor= vec4(N,1.);
}

14
11/NOTES.md
View File

@ -16,8 +16,18 @@ https://en.wikipedia.org/wiki/Perlin_noise
https://en.wikipedia.org/wiki/Colors_of_noise
https://en.wikipedia.org/wiki/Value_noise
https://en.wikipedia.org/wiki/Pink_noise
https://en.wikipedia.org/wiki/Shot_noise
# Value Noise
https://en.wikipedia.org/wiki/Value_noise
https://www.shadertoy.com/view/lsf3WH
# Gradient Noise
http://en.wikipedia.org/wiki/Gradient_noise
https://www.shadertoy.com/view/XdXGW8
# Simplex Noise
http://en.wikipedia.org/wiki/Simplex_noise
https://www.shadertoy.com/view/Msf3WH

147
11/README.md
View File

@ -3,15 +3,15 @@
## Noise
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 side for a walk!
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 places. Colors, textures, sounds. While we walk we can avoid notice 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. The “real world” is such a rich place. How we can approximate to this level of variety computationally?
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 are on the same path of thoughts that Ken 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.
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.
The following is not the Perlin noise algorithm, but is a good starting point to start getting out head around the idea of how to generate *noise* o *smooth random*.
The following is not the clasic Perlin noise algorithm, but is a good starting point to understand how to generate *smooth random* aka *noise*.
Look the following graph, is in essence what we where doing on line 36 and 37 on the last example of the previus chapter. We are computing the ```rand()``` of the integers of `x` (the `i` variable).
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).
<div class="simpleFunction" data="
float i = floor(x); // integer
@ -21,34 +21,61 @@ y = rand(i);
//y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
"></div>
By uncommenting the following line, you can make a linear interpolation between the random value of an integer to the next one.
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);
```
At this point we have learn that we can do better than a linear interpolation. Right? By uncommenting the following line, we will use the native ```smoothstep()``` to make a *smooth* transition between the previous random values.
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.
```glsl
y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
```
You will find in other implementations that people use cubic curves ( like the following formula) instead of using a ```smoothstep()```.
Uncomment that line and notice how the transition between the peaks got smooth. On some noise implementations you will find that people that some programers prefere to code their own cubic curves (like the following formula) instead of using the [```smoothstep()```](.../glossary/?search=smoothstep).
```glsl
float u = f * f * (3.0 - 2.0 * f );
y = mix(rand(i), rand(i + 1.0), u);
float u = f * f * (3.0 - 2.0 * f ); // custom cubic curve
y = mix(rand(i), rand(i + 1.0), u); // using it in the interpolation
```
The *smooth random* is a game changer for graphical coders, it provides the hability to generate images and geometries with an organic feeling. Perlin's Noise Algorithm have been reimplemented over and over in different lenguage and dimensions for all kind of uses to create all sort of mesmerizing pieces.
![Robert Hodgin - Written Images (2010)](robert_hodgin.jpg)
Now is your turn:
* Make your own ```float noise(float x)``` function.
* Use the noise funtion to animate a shape by moving it, rotating it or scaling it.
* Make an animated composition of several shapes 'dancing' together using noise.
* Construct "organic-looking" shapes using the noise function.
* Once you have your "creature", try to develop further this into a character by assigning it a particular movement.
## 2D Noise
Now that we understand how noise is made in one dimension, is time to port it to two. Check how on the following code the interpolation (line 29) is made between the for corners of a square (lines 22-25).
![](02.png)
Now that we know how to do noise in one dimension, is time to port it to two. For that instead of interpolating between two points (```fract(x)``` and ```fract(x)+1.0```) we are going to interpolate between the four coorners of square (```fract(st)```, ```fract(st)+vec2(1.,0.)```, ```fract(st)+vec2(0.,1.)``` and ```fract(st)+vec2(1.,1.)```).
![](01.png)
Take a look to the following 2D noise function, see how on line 32 we interpolate random values (lines 25-28) acording to the the position of ```st``` the four corners of the squared area.
![](04.jpg)
If you pay atention is not just a linear interpolation but a cubic one which smoothly interpolates any points inside a squared grid
![](05.jpg)
In the following implementation of 2D noise we scale the size of the grid by 5 (line 41).
<div class="codeAndCanvas" data="2d-noise.frag"></div>
At this point you can recognize what's going on at line 40. We are scaling and "moving" the space, right?
Try:
Now is your turn, try the following excersices:
* Change the multiplier. Try to animate it.
@ -58,50 +85,82 @@ Try:
* Change the u_time by the normalize values of the mouse coordinates.
* Now that you achieve some control over noise & chaos, is time to mix it with previous knowledge. Making a composition of rectangles, colors and noise that resemble some of the complexity of the texture of the following painting made by [Mark Rothko](http://en.wikipedia.org/wiki/Mark_Rothko).
* What if we treat the gradient of the noise as a distance field? Make something interesing with it.
* Now that you achieve some control over order and chaos, is time to use that knowledge. Make a composition of rectangles, colors and noise that resemble some of the complexity of the texture of the following painting made by [Mark Rothko](http://en.wikipedia.org/wiki/Mark_Rothko).
![Mark Rothko - Three (1950)](rothko.jpg)
## Using Noise on generative designs
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>
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>
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).
As a painter that understand how the pigments of their paint works, the more we know about noise implementations the better we will learn how to use it. The following step is to find interesting way of combining and using it.
For example, if we use a two dimensional noise implementation to rotate the "grid" we can produce the following effect that looks a lot like wood
<a href="../edit.html#11/wood.frag"><canvas id="custom" class="canvas" data-fragment-url="wood.frag" width="520px" height="200px"></canvas></a>
```glsl
pos = rotate2d( noise(pos) ) * pos; // rotate the space
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/)
<a href="../edit.html#11/splatter.frag"><canvas id="custom" class="canvas" data-fragment-url="splatter.frag" width="520px" height="200px"></canvas></a>
```glsl
color += smoothstep(.15,.2,noise(st*10.)); // Black splatter
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/)
<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 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
![Jackson Pollock - Number 14 gray (1948)](pollock.jpg)
## Simplex Noise
## Digital Jackson Pollock
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:
## Using 2D Noise to rotate the space
* An algorithm with lower computational complexity and fewer multiplications.
* A noise that scales to higher dimensions with less computational cost.
* A noise without directional artifacts
* A noise with well-defined and continuous gradients that can be computed quite cheaply
* An algorithm that is easy to implemnt in hardware
As we saw, noise was designed to give a natural *je ne sais quoi* to digital textures, and could be use to make convincing generative textures. Lets refresh some of the previous knowledge and then jump forward learning how to mix all the knowledge we have learn so far.
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!
In the following code you will find:
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:
* Shaping functions to create: random (line 13), noise (line 32) and a line pattern (line 46).
* A color gradient (line 68).
* A matrix to rotate the line pattern (line 37-40 and 45)
* A 2d random function (line 12-16)
* A 2d noise function (line 20-35)
"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."
<div class="codeAndCanvas" data="wood.frag"></div>
Here is an actual GLSL implementation of this algorithm
By uncommenting line 60 you will see the line pattern we are talking about.
Revealing line 63 you can see how we can alternate this pattern in a "natural-like" way, to then finally, uncommenting line 66 we can stretch the noise pattern in *y* axis.
<div class="codeAndCanvas" data="2d-snoise.frag"></div>
Wow! You really should be proud of your self. He have went from nothing to generating our own wood procedural texture!
Now:
Now is time for you to play with it:
* Take a closer look to the implementation and their results. Beside the eficient improvements, what you can say about how it looks?
* What do you thing it will happen if the patter looks like this:
* Make a shader that project the ilusion of flow. Like a lava lamp, ink drops, watter, etc.
```glsl
pattern = sin(lines(pos, noise(pos*vec2(2.,0.5)),0.5)*3.14);
```
Or like this
```glsl
pattern = fract(lines(pos, noise(pos*vec2(2.,0.5)),0.5)*2.0);
```
* What other generative pattern can you make? What about granite? marble? magma? water?
* 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.
<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, 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.
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.

101
11/circleDistortion.frag Normal file
View File

@ -0,0 +1,101 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// My own port of this processing code by @beesandbombs
// https://dribbble.com/shots/1696376-Circle-wave
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
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
// 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);
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);
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)
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
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 );
// Compute final noise value at P
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
vec3 nNoise(vec2 st) {
vec2 offset = vec2(1.)/u_resolution.xy;
float center = snoise(vec2(st.x, st.y));
float topLeft = snoise(vec2(st.x - offset.x, st.y - offset.y));
float left = snoise(vec2(st.x - offset.x, st.y));
float bottomLeft = snoise(vec2(st.x - offset.x, st.y + offset.y));
float top = snoise(vec2(st.x, st.y - offset.y));
float bottom = snoise(vec2(st.x, st.y + offset.y));
float topRight = snoise(vec2(st.x + offset.x, st.y - offset.y));
float right = snoise(vec2(st.x + offset.x, st.y));
float bottomRight= snoise(vec2(st.x + offset.x, st.y + offset.y));
float dX = topRight + 2.0 * right + bottomRight - topLeft - 2.0 * left - bottomLeft;
float dY = bottomLeft + 2.0 * bottom + bottomRight - topLeft - 2.0 * top - topRight;
return normalize(vec3( dX, dY, 0.01))*.5+.5;
}
float shape(vec2 st, float radius) {
st = vec2(0.5)-st;
float r = length(st)*2.0;
float a = atan(st.y,st.x);
float f = radius;
return 1.-smoothstep(f,f+0.007,r);
}
float shapeBorder(vec2 st, float radius, float width) {
return shape(st,radius)-shape(st,radius-width);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
vec3 normals = nNoise(st*6.+u_time);
color = vec3(1.) * shapeBorder(st,0.8,0.02);
st -= .005;
color.g = shapeBorder(st+normals.xy*.01,0.81,0.03);
gl_FragColor = vec4( color, 1.0 );
}

63
11/circleWave-noise.frag Normal file
View File

@ -0,0 +1,63 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// My own port of this processing code by @beesandbombs
// https://dribbble.com/shots/1696376-Circle-wave
#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);
}
mat2 rotate2d(float _angle){
return mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle));
}
float shape(vec2 st, float radius) {
st = vec2(0.5)-st;
float r = length(st)*2.0;
float a = atan(st.y,st.x);
float m = abs(mod(a+u_time*2.,3.14*2.)-3.14)/3.6;
float f = radius;
m += noise(st+u_time*0.1)*.5;
// a *= 1.+abs(atan(u_time*0.2))*.1;
// a *= 1.+noise(st+u_time*0.1)*0.1;
f += sin(a*50.)*noise(st+u_time*.2)*.1;
f += (sin(a*20.)*.1*pow(m,2.));
return 1.-smoothstep(f,f+0.007,r);
}
float shapeBorder(vec2 st, float radius, float width) {
return shape(st,radius)-shape(st,radius-width);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(1.0) * shapeBorder(st,0.8,0.02);
gl_FragColor = vec4( 1.-color, 1.0 );
}

92
11/circleWave-noiseChannels.frag Normal file
View File

@ -0,0 +1,92 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// My own port of this processing code by @beesandbombs
// https://dribbble.com/shots/1696376-Circle-wave
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
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
// 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);
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);
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)
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
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 );
// Compute final noise value at P
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
mat2 rotate2d(float _angle){
return mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle));
}
float shape(vec2 st, vec2 offset, float radius) {
st = vec2(0.5)-st;
float r = length(st)*2.0;
float a = atan(st.y,st.x);
float m = abs(mod(a+offset.y*2.,3.14*2.)-3.14)/3.6;
m += snoise(st+u_time*0.1)*.8;
a += offset.x;
float f = radius;
f += (cos(a*20.)*.1*pow(m,2.));
return 1.-smoothstep(f,f+0.007,r);
}
float shapeBorder(vec2 st, vec2 offset, float radius, float width) {
return shape(st,offset,radius)-shape(st,offset,radius-width);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(.0);
float t = u_time*.1;
color.r = shapeBorder(st,vec2(0.1,t),0.8,0.02);
color.g = shapeBorder(st,vec2(0.2,t),0.8,0.02);
color.b = shapeBorder(st,vec2(0.3,t),0.8,0.02);
gl_FragColor = vec4( color, 1.0 );
}

66
11/lava-lamp.frag Normal file
View File

@ -0,0 +1,66 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
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
vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1;
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
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);
m = m*m ;
m = m*m ;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
vec3 color = vec3(0.0);
vec2 pos = vec2(st*3.);
float DF = 0.0;
// Add a random position
float a = 0.0;
vec2 vel = vec2(u_time*.1);
DF += snoise(pos+vel)*.25+.25;
// Add a random position
a = snoise(pos*vec2(cos(u_time*0.15),sin(u_time*0.1))*0.1)*3.1415;
vel = vec2(cos(a),sin(a));
DF += snoise(pos+vel)*.25+.25;
color = vec3( smoothstep(.7,.75,fract(DF)) );
gl_FragColor = vec4(1.0-color,1.0);
}

87
11/lines.frag Normal file
View File

@ -0,0 +1,87 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
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
// 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);
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);
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)
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
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 );
// Compute final noise value at P
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
vec3 nNoise(vec2 st) {
vec2 offset = vec2(1.)/u_resolution.xy;
float center = snoise(vec2(st.x, st.y));
float topLeft = snoise(vec2(st.x - offset.x, st.y - offset.y));
float left = snoise(vec2(st.x - offset.x, st.y));
float bottomLeft = snoise(vec2(st.x - offset.x, st.y + offset.y));
float top = snoise(vec2(st.x, st.y - offset.y));
float bottom = snoise(vec2(st.x, st.y + offset.y));
float topRight = snoise(vec2(st.x + offset.x, st.y - offset.y));
float right = snoise(vec2(st.x + offset.x, st.y));
float bottomRight= snoise(vec2(st.x + offset.x, st.y + offset.y));
float dX = topRight + 2.0 * right + bottomRight - topLeft - 2.0 * left - bottomLeft;
float dY = bottomLeft + 2.0 * bottom + bottomRight - topLeft - 2.0 * top - topRight;
return normalize(vec3( dX, dY, 0.01))*.5+.5;
}
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
float scale = 10.0;
st *= scale;
st += nNoise(st).xy*.1*sin(u_time);
float df = sin(fract(st.y)*10.);
gl_FragColor= vec4(vec3(1.0-smoothstep(.9,.99,df)),1.);
}

BIN
11/pollock.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB

BIN
11/robert_hodgin.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 258 KiB

41
11/splatter.frag Normal file
View File

@ -0,0 +1,41 @@
#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);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
vec3 color = vec3(0.0);
// Comment and uncomment the following lines:
st += noise(st*2.)*abs(1.0-sin(u_time*.1))*5.; // Animate the coordinate space
color = vec3(1.) * smoothstep(.18,.2,noise(st)); // Big black drops
color += smoothstep(.15,.2,noise(st*10.)); // Black splatter
color -= smoothstep(.35,.4,noise(st*10.)); // Holes on splatter
gl_FragColor = vec4(1.-color,1.0);
}

89
11/vortex.frag Normal file
View File

@ -0,0 +1,89 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
//
// Description : Array and textureless GLSL 2D simplex noise function.
// 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; }
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
// 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);
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);
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)
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
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 );
// Compute final noise value at P
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
float cascade(vec2 st, vec2 zoom, float time, float warp) {
vec2 pos = st*zoom*vec2(1.,pow(st.y,warp))+vec2(0.,time);
return (.5+snoise(pos)*.5)*(st.y);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
vec2 pos = st-vec2(.5);
float r = dot(pos,pos);
float a = atan(pos.y,pos.x);
st = vec2(a,r*8.);
color = vec3(1.)*smoothstep(.5,.8, cascade(st,vec2(30.,3.),u_time*3.,5.));
color += vec3(.5)*smoothstep(.6,.7, cascade(st,vec2(50.,5.),u_time*2.,1.));
color += smoothstep(.03,.20,r)*.5;
color *= 1.0-smoothstep(.11,.13,r);
gl_FragColor = vec4(color,1.0);
}

53
11/wood.frag
View File

@ -11,27 +11,20 @@ uniform float u_time;
float random (in vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))*
43758.5453123);
vec2(12.9898,78.233)))
* 43758.5453123);
}
// Based on Morgan McGuire @morgan3d
// https://www.shadertoy.com/view/4dS3Wd
float noise (in vec2 st) {
// 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);
// Four corners in 2D of a tile
float a = random(i);
float b = random(i + vec2(1.0, 0.0));
float c = random(i + vec2(0.0, 1.0));
float d = random(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
return mix(a, b, u.x) +
(c - a)* u.y * (1.0 - u.x) +
(d - b) * u.x * u.y;
vec2 u = f*f*(3.0-2.0*f);
return mix( mix( random( i + vec2(0.0,0.0) ),
random( i + vec2(1.0,0.0) ), u.x),
mix( random( i + vec2(0.0,1.0) ),
random( i + vec2(1.0,1.0) ), u.x), u.y);
}
mat2 rotate2d(float angle){
@ -39,35 +32,27 @@ mat2 rotate2d(float angle){
sin(angle),cos(angle));
}
float lines(in vec2 pos, float angle, float b){
float lines(in vec2 pos, float b){
float scale = 10.0;
pos *= scale;
pos = rotate2d( angle ) * pos;
return smoothstep(0.0,
0.5+b*0.5,
abs((sin(pos.x*3.1415)+b*2.0))*0.5);
.5+b*.5,
abs((sin(pos.x*3.1415)+b*2.0))*.5);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
st.y *= u_resolution.y/u_resolution.x;
vec2 pos = vec2(st*5.0);
vec2 pos = st.yx*vec2(10.,3.);
float pattern = pos.x;
// Stripes
// pattern = lines(pos*0.1, 0.0, 0.5 );
// Add noise
// pattern = lines(pos, noise(pos), 0.5 );
pos = rotate2d( noise(pos) ) * pos;
// Strech the noise pattern
//pattern = lines(pos, noise(pos*vec2(2.,0.5)),0.5);
// Draw lines
pattern = lines(pos,.5);
color = mix(vec3(0.275,0.145,0.059),
vec3(0.761,0.529,0.239),
pattern*1.7);
gl_FragColor = vec4(color,1.0);
gl_FragColor = vec4(vec3(pattern),1.0);
}

5
14/NOTES.md Normal file
View File

@ -0,0 +1,5 @@
No tile images
https://www.shadertoy.com/view/4tsGzf
https://www.shadertoy.com/view/lt2GDd

2
README.md
View File

@ -78,7 +78,7 @@ Thanks to my wife [Jen Lowe](http://www.datatelling.com/), for her unconditional
Thanks [Scott Murray](http://alignedleft.com/) for the inspiration and advice.
Thanks [Kenichi Yoneda (Kynd)](https://twitter.com/kyndinfo) for the [Japanese translation](?lan=jp)
Thanks [Kenichi Yoneda (Kynd)](https://twitter.com/kyndinfo) for the [Japanese translation (日本語訳)](?lan=jp)
Thanks [Karim Naaji](http://karim.naaji.fr/) for contributing with support, good ideas and code.

2
chap-header.php
View File

@ -3,7 +3,7 @@
echo '
<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>
<p>Translations: <a href=".">English</a> - <a href="?lan=jp">Japanese</a></p>
<p>Translations: <a href=".">English</a> - <a href="?lan=jp">日本人</a></p>
</div>
<hr>
';