mirror
/
thebookofshaders
mirror of https://github.com/patriciogonzalezvivo/thebookofshaders.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

simplex grid experiments

This commit is contained in:
Patricio Gonzalez Vivo 2015-09-24 13:15:49 -04:00
parent 732cd19583
commit 19959b6af8
52 changed files with 867 additions and 504 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

233
05/easing.frag Normal file
View File

@ -0,0 +1,233 @@
#ifdef GL_ES
precision mediump float;
#endif
#define PI 3.141592653589793
#define HALF_PI 1.5707963267948966
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
// Robert Penner's easing functions in GLSL
// https://github.com/stackgl/glsl-easings
float linear(float t) {
return t;
}
float exponentialIn(float t) {
return t == 0.0 ? t : pow(2.0, 10.0 * (t - 1.0));
}
float exponentialOut(float t) {
return t == 1.0 ? t : 1.0 - pow(2.0, -10.0 * t);
}
float exponentialInOut(float t) {
return t == 0.0 || t == 1.0
? t
: t < 0.5
? +0.5 * pow(2.0, (20.0 * t) - 10.0)
: -0.5 * pow(2.0, 10.0 - (t * 20.0)) + 1.0;
}
float sineIn(float t) {
return sin((t - 1.0) * HALF_PI) + 1.0;
}
float sineOut(float t) {
return sin(t * HALF_PI);
}
float sineInOut(float t) {
return -0.5 * (cos(PI * t) - 1.0);
}
float qinticIn(float t) {
return pow(t, 5.0);
}
float qinticOut(float t) {
return 1.0 - (pow(t - 1.0, 5.0));
}
float qinticInOut(float t) {
return t < 0.5
? +16.0 * pow(t, 5.0)
: -0.5 * pow(2.0 * t - 2.0, 5.0) + 1.0;
}
float quarticIn(float t) {
return pow(t, 4.0);
}
float quarticOut(float t) {
return pow(t - 1.0, 3.0) * (1.0 - t) + 1.0;
}
float quarticInOut(float t) {
return t < 0.5
? +8.0 * pow(t, 4.0)
: -8.0 * pow(t - 1.0, 4.0) + 1.0;
}
float quadraticInOut(float t) {
float p = 2.0 * t * t;
return t < 0.5 ? p : -p + (4.0 * t) - 1.0;
}
float quadraticIn(float t) {
return t * t;
}
float quadraticOut(float t) {
return -t * (t - 2.0);
}
float cubicIn(float t) {
return t * t * t;
}
float cubicOut(float t) {
float f = t - 1.0;
return f * f * f + 1.0;
}
float cubicInOut(float t) {
return t < 0.5
? 4.0 * t * t * t
: 0.5 * pow(2.0 * t - 2.0, 3.0) + 1.0;
}
float elasticIn(float t) {
return sin(13.0 * t * HALF_PI) * pow(2.0, 10.0 * (t - 1.0));
}
float elasticOut(float t) {
return sin(-13.0 * (t + 1.0) * HALF_PI) * pow(2.0, -10.0 * t) + 1.0;
}
float elasticInOut(float t) {
return t < 0.5
? 0.5 * sin(+13.0 * HALF_PI * 2.0 * t) * pow(2.0, 10.0 * (2.0 * t - 1.0))
: 0.5 * sin(-13.0 * HALF_PI * ((2.0 * t - 1.0) + 1.0)) * pow(2.0, -10.0 * (2.0 * t - 1.0)) + 1.0;
}
float circularIn(float t) {
return 1.0 - sqrt(1.0 - t * t);
}
float circularOut(float t) {
return sqrt((2.0 - t) * t);
}
float circularInOut(float t) {
return t < 0.5
? 0.5 * (1.0 - sqrt(1.0 - 4.0 * t * t))
: 0.5 * (sqrt((3.0 - 2.0 * t) * (2.0 * t - 1.0)) + 1.0);
}
float bounceOut(float t) {
const float a = 4.0 / 11.0;
const float b = 8.0 / 11.0;
const float c = 9.0 / 10.0;
const float ca = 4356.0 / 361.0;
const float cb = 35442.0 / 1805.0;
const float cc = 16061.0 / 1805.0;
float t2 = t * t;
return t < a
? 7.5625 * t2
: t < b
? 9.075 * t2 - 9.9 * t + 3.4
: t < c
? ca * t2 - cb * t + cc
: 10.8 * t * t - 20.52 * t + 10.72;
}
float bounceIn(float t) {
return 1.0 - bounceOut(1.0 - t);
}
float bounceInOut(float t) {
return t < 0.5
? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0))
: 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5;
}
float backIn(float t) {
return pow(t, 3.0) - t * sin(t * PI);
}
float backOut(float t) {
float f = 1.0 - t;
return 1.0 - (pow(f, 3.0) - f * sin(f * PI));
}
float backInOut(float t) {
float f = t < 0.5
? 2.0 * t
: 1.0 - (2.0 * t - 1.0);
float g = pow(f, 3.0) - f * sin(f * PI);
return t < 0.5
? 0.5 * g
: 0.5 * (1.0 - g) + 0.5;
}
float plot(vec2 st, float pct){
return smoothstep( pct-0.02, pct, st.y) -
smoothstep( pct, pct+0.02, st.y);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution;
float y = st.x;
y = linear(st.x);
// y = exponentialIn(st.x);
// y = exponentialOut(st.x);
// y = exponentialInOut(st.x);
// y = sineIn(st.x);
// y = sineOut(st.x);
// y = sineInOut(st.x);
// y = qinticIn(st.x);
// y = qinticOut(st.x);
// y = qinticInOut(st.x);
// y = quarticIn(st.x);
// y = quarticOut(st.x);
// y = quarticInOut(st.x);
// y = cubicIn(st.x);
// y = cubicOut(st.x);
// y = cubicInOut(st.x);
// y = elasticIn(st.x);
// y = elasticOut(st.x);
// y = elasticInOut(st.x);
// y = circularIn(st.x);
// y = circularOut(st.x);
// y = circularInOut(st.x);
// y = bounceIn(st.x);
// y = bounceOut(st.x);
// y = bounceInOut(st.x);
// y = backIn(st.x);
// y = backOut(st.x);
// y = backInOut(st.x);
vec3 color = vec3(y);
float pct = plot(st,y);
color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);
gl_FragColor = vec4(color,1.0);
}

189
06/easing.frag
View File

@ -1,189 +0,0 @@
#ifdef GL_ES
precision mediump float;
#endif
#define PI 3.141592653589793
#define HALF_PI 1.5707963267948966
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
// Robert Penner's easing functions in GLSL
// https://github.com/stackgl/glsl-easings
float linear(float t) {
return t;
}
float exponentialIn(float t) {
return t == 0.0 ? t : pow(2.0, 10.0 * (t - 1.0));
}
float exponentialOut(float t) {
return t == 1.0 ? t : 1.0 - pow(2.0, -10.0 * t);
}
float exponentialInOut(float t) {
return t == 0.0 || t == 1.0
? t
: t < 0.5
? +0.5 * pow(2.0, (20.0 * t) - 10.0)
: -0.5 * pow(2.0, 10.0 - (t * 20.0)) + 1.0;
}
float sineIn(float t) {
return sin((t - 1.0) * HALF_PI) + 1.0;
}
float sineOut(float t) {
return sin(t * HALF_PI);
}
float sineInOut(float t) {
return -0.5 * (cos(PI * t) - 1.0);
}
float qinticIn(float t) {
return pow(t, 5.0);
}
float qinticOut(float t) {
return 1.0 - (pow(t - 1.0, 5.0));
}
float qinticInOut(float t) {
return t < 0.5
? +16.0 * pow(t, 5.0)
: -0.5 * pow(2.0 * t - 2.0, 5.0) + 1.0;
}
float quarticIn(float t) {
return pow(t, 4.0);
}
float quarticOut(float t) {
return pow(t - 1.0, 3.0) * (1.0 - t) + 1.0;
}
float quarticInOut(float t) {
return t < 0.5
? +8.0 * pow(t, 4.0)
: -8.0 * pow(t - 1.0, 4.0) + 1.0;
}
float quadraticInOut(float t) {
float p = 2.0 * t * t;
return t < 0.5 ? p : -p + (4.0 * t) - 1.0;
}
float quadraticIn(float t) {
return t * t;
}
float quadraticOut(float t) {
return -t * (t - 2.0);
}
float cubicIn(float t) {
return t * t * t;
}
float cubicOut(float t) {
float f = t - 1.0;
return f * f * f + 1.0;
}
float cubicInOut(float t) {
return t < 0.5
? 4.0 * t * t * t
: 0.5 * pow(2.0 * t - 2.0, 3.0) + 1.0;
}
float elasticIn(float t) {
return sin(13.0 * t * HALF_PI) * pow(2.0, 10.0 * (t - 1.0));
}
float elasticOut(float t) {
return sin(-13.0 * (t + 1.0) * HALF_PI) * pow(2.0, -10.0 * t) + 1.0;
}
float elasticInOut(float t) {
return t < 0.5
? 0.5 * sin(+13.0 * HALF_PI * 2.0 * t) * pow(2.0, 10.0 * (2.0 * t - 1.0))
: 0.5 * sin(-13.0 * HALF_PI * ((2.0 * t - 1.0) + 1.0)) * pow(2.0, -10.0 * (2.0 * t - 1.0)) + 1.0;
}
float circularIn(float t) {
return 1.0 - sqrt(1.0 - t * t);
}
float circularOut(float t) {
return sqrt((2.0 - t) * t);
}
float circularInOut(float t) {
return t < 0.5
? 0.5 * (1.0 - sqrt(1.0 - 4.0 * t * t))
: 0.5 * (sqrt((3.0 - 2.0 * t) * (2.0 * t - 1.0)) + 1.0);
}
float bounceOut(float t) {
const float a = 4.0 / 11.0;
const float b = 8.0 / 11.0;
const float c = 9.0 / 10.0;
const float ca = 4356.0 / 361.0;
const float cb = 35442.0 / 1805.0;
const float cc = 16061.0 / 1805.0;
float t2 = t * t;
return t < a
? 7.5625 * t2
: t < b
? 9.075 * t2 - 9.9 * t + 3.4
: t < c
? ca * t2 - cb * t + cc
: 10.8 * t * t - 20.52 * t + 10.72;
}
float bounceIn(float t) {
return 1.0 - bounceOut(1.0 - t);
}
float bounceInOut(float t) {
return t < 0.5
? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0))
: 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5;
}
float backIn(float t) {
return pow(t, 3.0) - t * sin(t * PI);
}
float backOut(float t) {
float f = 1.0 - t;
return 1.0 - (pow(f, 3.0) - f * sin(f * PI));
}
float backInOut(float t) {
float f = t < 0.5
? 2.0 * t
: 1.0 - (2.0 * t - 1.0);
float g = pow(f, 3.0) - f * sin(f * PI);
return t < 0.5
? 0.5 * g
: 0.5 * (1.0 - g) + 0.5;
}
void main() {
vec3 colorA = vec3(0.149,0.141,0.912);
vec3 colorB = vec3(1.000,0.833,0.224);
float t = u_time*0.5;
float pct = cubicInOut( abs(fract(t)*2.0-1.) );
gl_FragColor = vec4(vec3(mix(colorA, colorB, pct)),1.0);
}

47
08/cube-translate.frag
View File

@ -1,47 +0,0 @@
// 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);
}

0
08/circleWave.frag → 08/tmp/circleWave.frag
View File

0
08/circleWave2.frag → 08/tmp/circleWave2.frag
View File

0
08/cross-doted.frag → 08/tmp/cross-doted.frag
View File

0
08/linesWave.frag → 08/tmp/linesWave.frag
View File

29
09/lines-wave.frag
View File

@ -1,34 +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;
#define 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
vec2 wave(vec2 st, float freq) {
st.y += cos(st.x*freq);
return st;
}
float stripes(vec2 st, float width){
return aastep(width,abs(sin(st.y*3.14159265358)));
vec2 zigzag(vec2 st, float freq) {
st.y += mix(abs(floor(sin(st.x*3.1415))),abs(floor(sin((st.x+1.)*3.1415))),fract(st.x*freq));
return st;
}
float line(vec2 st, float width) {
return step(width,1.0-smoothstep(.0,1.,abs(sin(st.y*PI))));
}
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));
st *= 10.;
st = wave(st, 3.);
vec3 color = vec3(line(st,.5));
gl_FragColor = vec4(color, 1.0);
}

0
09/dots-animation.frag → 09/tmp/dots-animation.frag
View File

0
09/dots-zoom-00.frag → 09/tmp/dots-zoom-00.frag
View File

0
09/dots-zoom-01.frag → 09/tmp/dots-zoom-01.frag
View File

0
09/grid-fine.frag → 09/tmp/grid-fine.frag
View File

0
09/grid-warp.frag → 09/tmp/grid-warp.frag
View File

0
09/lines-thin.frag → 09/tmp/lines-thin.frag
View File

34
09/tmp/lines-wave.frag Normal file
View File

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

0
09/lines-zigzag.frag → 09/tmp/lines-zigzag.frag
View File

0
09/seamless-tile.frag → 09/tmp/seamless-tile.frag
View File

35
09/zigzag-lines.frag
View File

@ -1,35 +0,0 @@
// Author @patriciogv - 2015 - patricio.io
#ifdef GL_ES
precision mediump float;
#endif
#define PI 3.1415926535897932384626433832795
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
vec2 wave(vec2 st, float freq) {
st.y += cos(st.x*freq);
return st;
}
vec2 zigzag(vec2 st, float freq) {
st.y += mix(abs(floor(sin(st.x*3.1415))),abs(floor(sin((st.x+1.)*3.1415))),fract(st.x*freq));
return st;
}
float line(vec2 st, float width) {
return step(width,1.0-smoothstep(.0,1.,abs(sin(st.y*PI))));
}
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
st *= 10.;
st = wave(st, 3.);
vec3 color = vec3(line(st,.5));
gl_FragColor = vec4(color, 1.0);
}

0
10/lego-pattern.frag → 10/tmp/lego-pattern.frag
View File

59
10/truchet.frag
View File

@ -1,59 +0,0 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
#define PI 3.14159265358979323846
uniform vec2 u_resolution;
uniform float u_time;
vec2 rotate2D (vec2 _st, float _angle) {
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}
vec2 tile (vec2 _st, float _zoom) {
_st *= _zoom;
return fract(_st);
}
vec2 rotateTilePattern(vec2 _st){
_st *= 2.0;
float index = 0.0;
if (fract(_st.x * 0.5) > 0.5){
index += 1.0;
}
if (fract(_st.y * 0.5) > 0.5){
index += 2.0;
}
_st = fract(_st);
if(index == 1.0){
_st = rotate2D(_st,PI*0.5);
} else if(index == 2.0){
_st = rotate2D(_st,PI*-0.5);
} else if(index == 3.0){
_st = rotate2D(_st,PI);
}
return _st;
}
void main (void) {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st = tile(st,3.0);
st = rotateTilePattern(st);
// st = tile(st,3.0);
// st = rotate2D(st,-PI*u_time*0.25);
gl_FragColor = vec4(vec3(step(st.x,st.y)),1.0);
}

5
11/1d-noise.frag
View File

@ -18,12 +18,13 @@ float random (in float x) {
return fract(sin(x)*1e4);
}
// Based on Morgan McGuire @morgan3d
// https://www.shadertoy.com/view/4dS3Wd
float noise (in float x) {
float i = floor(x);
float f = fract(x);
// Cubic Hermine Curve
float u = f * f * (3.0 - 2.0 * f);
return mix(random(i), random(i + 1.0), u);
}

3
11/2d-noise.frag
View File

@ -1,6 +1,3 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif

3
11/2d-pnoise.frag
View File

@ -1,6 +1,3 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif

3
11/2d-snoise-clear.frag
View File

@ -1,6 +1,3 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif

3
11/2d-snoise.frag
View File

@ -1,6 +1,3 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif

3
11/3d-noise.frag
View File

@ -1,6 +1,3 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif

3
11/3d-pnoise.frag
View File

@ -1,6 +1,3 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif

3
11/3d-snoise.frag
View File

@ -1,6 +1,3 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif

2
11/README.md
View File

@ -197,6 +197,6 @@ Well enought technicalities, is time for you to use this resource in your own ex
* Use Signed Noise to add some texture to a work you already made.
<a href="../edit.html#11/iching-02.frag"><canvas id="custom" class="canvas" data-fragment-url="iching-02.frag" width="520px" height="520px"></canvas></a>
<a href="../edit.html#11/iching-03.frag"><canvas id="custom" class="canvas" data-fragment-url="iching-03.frag" width="520px" height="520px"></canvas></a>
Well in this chapter we have introduce some control over the chaos. Is not an easy job. Becoming a noise bender master takes time and efford. On the following chapters we will review some "well-know" techniques to perfect your skills and get more out of your noise functions to design generative content on shaders.

0
11/iching-02.frag → 11/iching-03.frag
View File

114
11/noise.frag
View File

@ -1,114 +0,0 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
float random (in float x) {
return fract(sin(x)*1e4);
}
float random (in vec2 st) {
// return fract(sin(dot(st.xy ,vec2(12.9898,78.233))) * 43758.5453123);
return fract( 1e4 * sin(17.0 * st.x + st.y * 0.1) * (0.1 + abs(sin(st.y * 13.0 + st.x))));
}
// Based on Morgan McGuire @morgan3d
// https://www.shadertoy.com/view/4dS3Wd
float noise (in float x) {
float i = floor(x);
float f = fract(x);
float u = f * f * (3.0 - 2.0 * f);
return mix(random(i), random(i + 1.0), u);
}
float noise (in 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));
// Simple 2D lerp using smoothstep envelope between the values.
// return vec3(mix(mix(a, b, smoothstep(0.0, 1.0, f.x)),
// mix(c, d, smoothstep(0.0, 1.0, f.x)),
// smoothstep(0.0, 1.0, f.y)));
// Same code, with the clamps in smoothstep and common subexpressions
// optimized away.
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;
}
float noise (in vec3 p) {
const vec3 step = vec3(110.0, 241.0, 171.0);
vec3 i = floor(p);
vec3 f = fract(p);
// For performance, compute the base input to a 1D random from the integer part of the argument and the
// incremental change to the 1D based on the 3D -> 1D wrapping
float n = dot(i, step);
vec3 u = f * f * (3.0 - 2.0 * f);
return mix(mix(mix( random(n + dot(step, vec3(0, 0, 0))), random(n + dot(step, vec3(1, 0, 0))), u.x),
mix( random(n + dot(step, vec3(0, 1, 0))), random(n + dot(step, vec3(1, 1, 0))), u.x), u.y),
mix(mix( random(n + dot(step, vec3(0, 0, 1))), random(n + dot(step, vec3(1, 0, 1))), u.x),
mix( random(n + dot(step, vec3(0, 1, 1))), random(n + dot(step, vec3(1, 1, 1))), u.x), u.y), u.z);
}
#define NUM_OCTAVES 5
float fbm ( in float x) {
float v = 0.0;
float a = 0.5;
float shift = float(100.0);
for (int i = 0; i < NUM_OCTAVES; ++i) {
v += a * noise(x);
x = x * 2.0 + shift;
a *= 0.5;
}
return v;
}
float fbm ( in vec2 st) {
float v = 0.0;
float a = 0.5;
vec2 shift = vec2(100.0);
// Rotate to reduce axial bias
mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.50));
for (int i = 0; i < NUM_OCTAVES; ++i) {
v += a * noise(st);
st = rot * st * 2.0 + shift;
a *= 0.5;
}
return v;
}
float fbm ( in vec3 p) {
float v = 0.0;
float a = 0.5;
vec3 shift = vec3(100);
for (int i = 0; i < NUM_OCTAVES; ++i) {
v += a * noise(p);
p = p * 2.0 + shift;
a *= 0.5;
}
return v;
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
color = vec3( fbm(vec3(st*10.,u_time*0.1)) );
gl_FragColor = vec4(color,1.0);
}

2
11/simplex-grid.frag
View File

@ -44,7 +44,7 @@ void main() {
// color.rg = fract(skew(st));
// Subdivide the grid into to equilateral triangles
// color = simplexGrid(st);
color = simplexGrid(st);
gl_FragColor = vec4(color,1.0);
}

0
11/2d-snoise-normal.frag → 11/tmp/2d-snoise-normal.frag
View File

0
11/3d-snoise-normal.frag → 11/tmp/3d-snoise-normal.frag
View File

0
11/circleDistortion.frag → 11/tmp/circleDistortion.frag
View File

0
11/circleWave-noiseChannels.frag → 11/tmp/circleWave-noiseChannels.frag
View File

101
11/tmp/displace-grid.frag Normal file
View File

@ -0,0 +1,101 @@
// 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;
}
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(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
st += nNoise(st*10.).xy*.02*sin(u_time);
float grid = 1.0-X(tile(st,10.),0.05);
gl_FragColor= vec4(vec3(grid),1.);
}

0
11/lines.frag → 11/tmp/displace-lines.frag
View File

0
11/noise-move.frag → 11/tmp/noise-move.frag
View File

117
11/tmp/simplex-pattern-00.frag Normal file
View File

@ -0,0 +1,117 @@
// Author @patriciogv - 2015 - patriciogonzalezvivo.com
#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;
vec2 skew (vec2 st) {
vec2 r = vec2(0.0);
r.x = 1.1547*st.x;
r.y = st.y+0.5*r.x;
return r;
}
vec3 simplexGrid (vec2 st) {
vec3 xyz = vec3(0.0);
vec2 p = fract(skew(st));
if (p.x > p.y) {
xyz.xy = 1.0-vec2(p.x,p.y-p.x);
xyz.z = p.y;
} else {
// xyz.yz = 1.0-vec2(p.x-p.y,p.y);
// xyz.x = p.x;
xyz.zx = 1.-vec2(p.x-p.y,p.y);
xyz.y = p.x;
}
return fract(xyz);
}
vec3 starS (vec3 S) {
S += max(dot(S.xxx,S.zzz),max(dot(S.yyy,S.xxx),dot(S.yyy,S.zzz)));
return S;
}
vec3 sakuraS (vec3 S) {
return S + min(dot(S.xxx,S.zzz),min(dot(S.yyy,S.xxx),dot(S.yyy,S.zzz)));
}
float warpDF (vec3 S) {
return dot(S.xy,S.yx);
}
float circleDF (vec3 S) {
return dot(S,S);
}
float triangleDF (vec3 S) {
S -= 1.04;
return abs(min(dot(S.zz,S.yy),min(dot(S.zz,S.xx),dot(S.xx,S.yy))));
}
float lotusDF (vec3 S, float petals_size, float roundness) {
S = 1.-(S)*petals_size; // above 1.
S = pow(S,vec3(roundness));
S = max(starS(S),sakuraS(S));
return 1.0-fract(triangleDF(S));
}
// Antialiazed Step function
// from http://webstaff.itn.liu.se/~stegu/webglshadertutorial/shadertutorial.html
float aastep(float threshold, float value) {
#ifdef GL_OES_standard_derivatives
float afwidth = 0.7 * length(vec2(dFdx(value), dFdy(value)));
return smoothstep(threshold-afwidth, threshold+afwidth, value);
#else
return step(threshold, value);
#endif
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
vec3 color = vec3(0.0);
float t = smoothstep(0.,1.,abs(sin(u_time*0.4)));
// Scale the space to see the grid
st *= 1.733;
st *= 2.;
vec3 S = simplexGrid(st);
// Triangles
// ------------
// color += aastep(t,triangleDF(S));
// color += aastep(0.5,triangleDF(smoothstep(vec3(.3,.3,.7),vec3(1.),S)));
// color += aastep(0.99,triangleDF(pow(S,vec3(3.,3.,1.))));
// color += aastep(1.,triangleDF(S*20.));
// color += aastep(0.1,triangleDF(S*5.+dot(S,S)));
// color += aastep(t*.5,triangleDF(sakuraS(S)));
// color += aastep(-.1t*.2,triangleDF(starS(S)) );
// color += aastep(t,triangleDF(sakuraS(starS(S))));
color += aastep(t,triangleDF(starS(sakuraS(S))));
// Warp
// color += aastep(t,warpDF(sakuraS(S)));
// color += aastep(t,warpDF(starS(S)));
// Lotus
// -------------
// color += aastep(.5,lotusDF(S,2.12,0.001+t*0.6));
// color += aastep(.5,lotusDF(S,3.,.1+t*.1));
// color += aastep(.5,lotusDF(S,3.,.3+t*.2));
// color += aastep(.5,lotusDF(S,5.,.1+t*.1));
// color += aastep(.5,lotusDF(S,12.,.0001+t*.04));
gl_FragColor = vec4(color,1.0);
}

0
11/vortex.frag → 11/tmp/vortex.frag
View File

0
11/grid-warp.frag → 11/tmp/warp-grid.frag
View File

57
12/2d-cnoise-00.frag Executable file
View File

@ -0,0 +1,57 @@
// Author @patriciogv - 2015
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
vec4 permute(vec4 x) {
return mod((34.0 * x + 1.0) * x, 289.0);
}
vec2 cellular2x2(vec2 P) {
#define K 0.142857142857 // 1/7
#define K2 0.0714285714285 // K/2
#define jitter 0.8 // jitter 1.0 makes F1 wrong more often
vec2 Pi = mod(floor(P), 289.0);
vec2 Pf = fract(P);
vec4 Pfx = Pf.x + vec4(-0.5, -1.5, -0.5, -1.5);
vec4 Pfy = Pf.y + vec4(-0.5, -0.5, -1.5, -1.5);
vec4 p = permute(Pi.x + vec4(0.0, 1.0, 0.0, 1.0));
p = permute(p + Pi.y + vec4(0.0, 0.0, 1.0, 1.0));
vec4 ox = mod(p, 7.0)*K+K2;
vec4 oy = mod(floor(p*K),7.0)*K+K2;
vec4 dx = Pfx + jitter*ox;
vec4 dy = Pfy + jitter*oy;
vec4 d = dx * dx + dy * dy; // d11, d12, d21 and d22, squared
// Sort out the two smallest distances
#if 0
// Cheat and pick only F1
d.xy = min(d.xy, d.zw);
d.x = min(d.x, d.y);
return d.xx; // F1 duplicated, F2 not computed
#else
// Do it right and find both F1 and F2
d.xy = (d.x < d.y) ? d.xy : d.yx; // Swap if smaller
d.xz = (d.x < d.z) ? d.xz : d.zx;
d.xw = (d.x < d.w) ? d.xw : d.wx;
d.y = min(d.y, d.z);
d.y = min(d.y, d.w);
return sqrt(d.xy);
#endif
}
void main(void) {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st -= .5;
st *= .7;
vec2 F = cellular2x2(st*40.*(.1+1.0-dot(st,st)*5.));
float facets = 0.1+(F.y-F.x);
float dots = smoothstep(0.05, 0.1, F.x);
float n = facets * dots;
n = 1.-step(.2,facets)*dots;
gl_FragColor = vec4(n, n, n, 1.0);
}

4
12/2d-cnoise-2x2.frag
View File

@ -58,8 +58,8 @@ vec2 cellular2x2(vec2 P) {
void main(void) {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st *= 10.;
vec2 F = cellular2x2(st);
vec2 F = cellular2x2(st*20.);
float n = 1.0-1.5*F.x;
gl_FragColor = vec4(n, n, n, 1.0);
}

3
12/2d-cnoise-2x2x2.frag
View File

@ -75,9 +75,6 @@ vec2 cellular2x2x2(vec3 P) {
#endif
}
varying vec3 vTexCoord3D;
void main(void) {
vec2 st = gl_FragCoord.xy/u_resolution.xy;

78
12/particle-gradient.frag Executable file
View File

@ -0,0 +1,78 @@
// Author @patriciogv - 2015
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
uniform sampler2D u_tex;
vec4 permute(vec4 x) {
return mod((34.0 * x + 1.0) * x, 289.0);
}
vec2 cellular2x2(vec2 P) {
#define K 0.142857142857 // 1/7
#define K2 0.0714285714285 // K/2
#define jitter 0.8 // jitter 1.0 makes F1 wrong more often
vec2 Pi = mod(floor(P), 289.0);
vec2 Pf = fract(P);
vec4 Pfx = Pf.x + vec4(-0.5, -1.5, -0.5, -1.5);
vec4 Pfy = Pf.y + vec4(-0.5, -0.5, -1.5, -1.5);
vec4 p = permute(Pi.x + vec4(0.0, 1.0, 0.0, 1.0));
p = permute(p + Pi.y + vec4(0.0, 0.0, 1.0, 1.0));
vec4 ox = mod(p, 7.0)*K+K2;
vec4 oy = mod(floor(p*K),7.0)*K+K2;
vec4 dx = Pfx + jitter*ox;
vec4 dy = Pfy + jitter*oy;
vec4 d = dx * dx + dy * dy; // d11, d12, d21 and d22, squared
// Sort out the two smallest distances
#if 0
// Cheat and pick only F1
d.xy = min(d.xy, d.zw);
d.x = min(d.x, d.y);
return d.xx; // F1 duplicated, F2 not computed
#else
// Do it right and find both F1 and F2
d.xy = (d.x < d.y) ? d.xy : d.yx; // Swap if smaller
d.xz = (d.x < d.z) ? d.xz : d.zx;
d.xw = (d.x < d.w) ? d.xw : d.wx;
d.y = min(d.y, d.z);
d.y = min(d.y, d.w);
return sqrt(d.xy);
#endif
}
float getIntensity(vec2 u){
vec3 a = texture2D(u_tex,u).xyz;
return (a.x+a.y+a.z)/3.0;
}
void main(void) {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
float n = 1.0;
vec2 F = cellular2x2(st*100.);
float pct = 1.0-texture2D(u_tex,st).r;
n = step(pct,F.x*2.);
vec2 p = vec2(2./u_resolution.xy);
float avg = 0.0;
avg += getIntensity(st+vec2(p.x,0.0));
avg += getIntensity(st+vec2(-p.x,0.0));
avg += getIntensity(st+vec2(0.0,p.y));
avg += getIntensity(st+vec2(0.0,-p.y));
avg += getIntensity(st+vec2(p.x,p.y));
avg += getIntensity(st+vec2(-p.x,-p.y));
avg += getIntensity(st+vec2(p.x,-p.y));
avg += getIntensity(st+vec2(-p.x,p.y));
avg /= 8.0;
float edge = (1.0-getIntensity(st)) + avg;
edge = (1.0 - edge)*10.0;
n -= edge;
gl_FragColor = vec4(n, n, n, 1.0);
}

BIN
12/particle-gradient.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

68
12/particle-radar.frag Executable file
View File

@ -0,0 +1,68 @@
// Author @patriciogv - 2015
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
// Cellular noise ("Worley noise") in 2D in GLSL.
// Copyright (c) Stefan Gustavson 2011-04-19. All rights reserved.
// This code is released under the conditions of the MIT license.
// See LICENSE file for details.
// Permutation polynomial: (34x^2 + x) mod 289
vec4 permute(vec4 x) {
return mod((34.0 * x + 1.0) * x, 289.0);
}
// Cellular noise, returning F1 and F2 in a vec2.
// Speeded up by using 2x2 search window instead of 3x3,
// at the expense of some strong pattern artifacts.
// F2 is often wrong and has sharp discontinuities.
// If you need a smooth F2, use the slower 3x3 version.
// F1 is sometimes wrong, too, but OK for most purposes.
vec2 cellular2x2(vec2 P) {
#define K 0.142857142857 // 1/7
#define K2 0.0714285714285 // K/2
#define jitter 0.8 // jitter 1.0 makes F1 wrong more often
vec2 Pi = mod(floor(P), 289.0);
vec2 Pf = fract(P);
vec4 Pfx = Pf.x + vec4(-0.5, -1.5, -0.5, -1.5);
vec4 Pfy = Pf.y + vec4(-0.5, -0.5, -1.5, -1.5);
vec4 p = permute(Pi.x + vec4(0.0, 1.0, 0.0, 1.0));
p = permute(p + Pi.y + vec4(0.0, 0.0, 1.0, 1.0));
vec4 ox = mod(p, 7.0)*K+K2;
vec4 oy = mod(floor(p*K),7.0)*K+K2;
vec4 dx = Pfx + jitter*ox;
vec4 dy = Pfy + jitter*oy;
vec4 d = dx * dx + dy * dy; // d11, d12, d21 and d22, squared
// Sort out the two smallest distances
#if 0
// Cheat and pick only F1
d.xy = min(d.xy, d.zw);
d.x = min(d.x, d.y);
return d.xx; // F1 duplicated, F2 not computed
#else
// Do it right and find both F1 and F2
d.xy = (d.x < d.y) ? d.xy : d.yx; // Swap if smaller
d.xz = (d.x < d.z) ? d.xz : d.zx;
d.xw = (d.x < d.w) ? d.xw : d.wx;
d.y = min(d.y, d.z);
d.y = min(d.y, d.w);
return sqrt(d.xy);
#endif
}
void main(void) {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec2 F = cellular2x2(st*20.);
vec2 pos = st-.5;
float a = dot(pos,pos)-u_time*0.1;
float n = step(abs(sin(a*3.1415*5.)),F.x*2.);
gl_FragColor = vec4(n, n, n, 1.0);
}

67
12/particle-texture.frag Executable file
View File

@ -0,0 +1,67 @@
// Author @patriciogv - 2015
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
// Cellular noise ("Worley noise") in 2D in GLSL.
// Copyright (c) Stefan Gustavson 2011-04-19. All rights reserved.
// This code is released under the conditions of the MIT license.
// See LICENSE file for details.
// Permutation polynomial: (34x^2 + x) mod 289
vec4 permute(vec4 x) {
return mod((34.0 * x + 1.0) * x, 289.0);
}
// Cellular noise, returning F1 and F2 in a vec2.
// Speeded up by using 2x2 search window instead of 3x3,
// at the expense of some strong pattern artifacts.
// F2 is often wrong and has sharp discontinuities.
// If you need a smooth F2, use the slower 3x3 version.
// F1 is sometimes wrong, too, but OK for most purposes.
vec2 cellular2x2(vec2 P) {
#define K 0.142857142857 // 1/7
#define K2 0.0714285714285 // K/2
#define jitter 0.8 // jitter 1.0 makes F1 wrong more often
vec2 Pi = mod(floor(P), 289.0);
vec2 Pf = fract(P);
vec4 Pfx = Pf.x + vec4(-0.5, -1.5, -0.5, -1.5);
vec4 Pfy = Pf.y + vec4(-0.5, -0.5, -1.5, -1.5);
vec4 p = permute(Pi.x + vec4(0.0, 1.0, 0.0, 1.0));
p = permute(p + Pi.y + vec4(0.0, 0.0, 1.0, 1.0));
vec4 ox = mod(p, 7.0)*K+K2;
vec4 oy = mod(floor(p*K),7.0)*K+K2;
vec4 dx = Pfx + jitter*ox;
vec4 dy = Pfy + jitter*oy;
vec4 d = dx * dx + dy * dy; // d11, d12, d21 and d22, squared
// Sort out the two smallest distances
#if 0
// Cheat and pick only F1
d.xy = min(d.xy, d.zw);
d.x = min(d.x, d.y);
return d.xx; // F1 duplicated, F2 not computed
#else
// Do it right and find both F1 and F2
d.xy = (d.x < d.y) ? d.xy : d.yx; // Swap if smaller
d.xz = (d.x < d.z) ? d.xz : d.zx;
d.xw = (d.x < d.w) ? d.xw : d.wx;
d.y = min(d.y, d.z);
d.y = min(d.y, d.w);
return sqrt(d.xy);
#endif
}
void main(void) {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec2 F = cellular2x2(st*50.);
float pct = st.x;
float n = step(pct,F.x*1.3);
gl_FragColor = vec4(n, n, n, 1.0);
}

68
12/voronoi-radar.frag.frag Executable file
View File

@ -0,0 +1,68 @@
// Author @patriciogv - 2015
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
// Cellular noise ("Worley noise") in 2D in GLSL.
// Copyright (c) Stefan Gustavson 2011-04-19. All rights reserved.
// This code is released under the conditions of the MIT license.
// See LICENSE file for details.
// Permutation polynomial: (34x^2 + x) mod 289
vec4 permute(vec4 x) {
return mod((34.0 * x + 1.0) * x, 289.0);
}
// Cellular noise, returning F1 and F2 in a vec2.
// Speeded up by using 2x2 search window instead of 3x3,
// at the expense of some strong pattern artifacts.
// F2 is often wrong and has sharp discontinuities.
// If you need a smooth F2, use the slower 3x3 version.
// F1 is sometimes wrong, too, but OK for most purposes.
vec2 cellular2x2(vec2 P) {
#define K 0.142857142857 // 1/7
#define K2 0.0714285714285 // K/2
#define jitter 0.8 // jitter 1.0 makes F1 wrong more often
vec2 Pi = mod(floor(P), 289.0);
vec2 Pf = fract(P);
vec4 Pfx = Pf.x + vec4(-0.5, -1.5, -0.5, -1.5);
vec4 Pfy = Pf.y + vec4(-0.5, -0.5, -1.5, -1.5);
vec4 p = permute(Pi.x + vec4(0.0, 1.0, 0.0, 1.0));
p = permute(p + Pi.y + vec4(0.0, 0.0, 1.0, 1.0));
vec4 ox = mod(p, 7.0)*K+K2;
vec4 oy = mod(floor(p*K),7.0)*K+K2;
vec4 dx = Pfx + jitter*ox;
vec4 dy = Pfy + jitter*oy;
vec4 d = dx * dx + dy * dy; // d11, d12, d21 and d22, squared
// Sort out the two smallest distances
#if 0
// Cheat and pick only F1
d.xy = min(d.xy, d.zw);
d.x = min(d.x, d.y);
return d.xx; // F1 duplicated, F2 not computed
#else
// Do it right and find both F1 and F2
d.xy = (d.x < d.y) ? d.xy : d.yx; // Swap if smaller
d.xz = (d.x < d.z) ? d.xz : d.zx;
d.xw = (d.x < d.w) ? d.xw : d.wx;
d.y = min(d.y, d.z);
d.y = min(d.y, d.w);
return sqrt(d.xy);
#endif
}
void main(void) {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec2 F = cellular2x2(st*20.);
vec2 pos = st-.5;
float a = dot(pos,pos)-u_time*0.1;
float n = 1.0-step(abs(sin(a))-.1,.05+(F.x-F.y)*2.) ;
gl_FragColor = vec4(n, n, n, 1.0);
}

2
README.md
View File

@ -29,6 +29,7 @@ This is a gentle step-by-step guide through the abstract and complex universe of
* Generative designs
* [Random](10/)
* Noise
* Cellular Noise & voronoi
* Fractional brownian motion
* Fractals
@ -45,7 +46,6 @@ This is a gentle step-by-step guide through the abstract and complex universe of
* Ripples
* Water color
* Reaction diffusion
* Voronoi
* 3D graphics
* Lights

36
examples/README.md
View File

@ -25,10 +25,10 @@ The following is a list of examples present in this book.
- [Iñigo Quiles's Exponential Step](../edit.html#05/expstep.frag)
- [Iñigo Quiles's Parabola](../edit.html#05/parabola.frag)
- [Iñigo Quiles's Power Curve](../edit.html#05/pcurve.frag)
- [Easing functions](../edit.html#05/easing.frag)
* [Color](../06/)
- [Mix](../edit.html#06/mix.frag)
- [Easing functions](../edit.html#06/easing.frag)
- [Gradient](../edit.html#06/gradient.frag)
- [HSB](../edit.html#06/hsb.frag)
- [HSB - Color Wheel](../edit.html#06/hsb-colorwheel.frag)
@ -36,36 +36,33 @@ The following is a list of examples present in this book.
* [Shapes](../07/)
- Rectangle: [making](../edit.html#07/rect-making.frag), [function](../edit.html#07/rect.frag) and [distance-field](../edit.html#07/rect-df.frag)
- Circle: [making](../edit.html#07/circle-making.frag) and [function](../edit.html#07/circle.frag)
- [Batman](../edit.html#07/batman.frag)
- [Distance-field Batman](../edit.html#07/batman.frag)
- [Line](../edit.html#07/line.frag)
- [Cross](../edit.html#07/cross.frag)
- [Polar](../edit.html#07/polar.frag)
- [Polar](../edit.html#07/shapes.frag)
- [Arrow](../edit.html#07/arrow.frag)
- [Polar shapes](../edit.html#07/polar.frag)
- [Polar Poligons](../edit.html#07/shapes.frag)
- Composition: [Arrow](../edit.html#07/arrow.frag)
* [Matrix](../08/)
- [cross](../edit.html#08/cross.frag)
- [translate](../edit.html#08/cross-translate.frag)
- [rotate](../edit.html#08/cross-rotate.frag)
- [scale](../edit.html#08/cross-scale.frag)
* [Patterns](../09/)
- Grid: [making](../edit.html#09/grid-making.frag), [final](../edit.html#09/grid.frag), [grid of +](../edit.html#09/cross.frag) and [fine grid](../edit.html#09/fine-grid.frag)
- [Lines](../edit.html#09/lines.frag), [zigzag/wave lines](../edit.html#09/zigzag-lines.frag)
- Grid: [making](../edit.html#09/grid-making.frag), [final](../edit.html#09/grid.frag), [Side grid](../edit.html#09/grid-side.frag) and [grid of +](../edit.html#09/cross.frag)
- [Lines](../edit.html#09/lines.frag), [waves](../edit.html#09/lines-wave.frag) & [zigzag](../edit.html#09/zigzag.frag)
- [Checks](../edit.html#09/checks.frag)
- [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/grid-side.frag)
- [Rotated tiles](../edit.html#09/rotatedtiles.frag)
- [Nuts pattern](../edit.html#09/nuts.frag)
- [Mirror tiles](../edit.html#09/mirrortiles.frag)
- [Zigzag](../edit.html#09/zigzag.frag)
- [Truchet](../edit.html#09/truchet.frag)
- [Deco](../edit.html#09/deco.frag)
- [I Ching](../edit.html#09/iching-01.frag)
* Generative designs
* [Random](../10/)
@ -79,11 +76,20 @@ The following is a list of examples present in this book.
- [Digits](../edit.html#10/ikeda-digits.frag)
- [Random Grid](../edit.html#10/ikeda-simple-grid.frag)
- [Random Numbered Grid](../edit.html#10/ikeda-numered-grid.frag)
- [Random I Ching](../edit.html#10/iching-02.frag)
- [Random - I Ching](../edit.html#10/iching-02.frag)
* [Noise](../11/)
- Value Noise: [1D](../edit.html#11/1d-noise.frag), [2D](../edit.html#11/2d-noise.frag) & [3D](../edit.html#11/3d-noise.frag)
- Gradient Noise: [2D](../edit.html#11/2d-gnoise.frag)
- Classic Perlin Noise: [2D](../edit.html#11/2d-pnoise.frag) & [3D](../edit.html#11/3d-pnoise.frag)
- [Simplex Grid](../edit.html#11/simplex-grid.frag)
- Simplex Noise: [2D](../edit.html#11/2d-snoise.frag) & [3D](../edit.html#11/3d-snoise.frag)
- Generative textures: [wood](../edit.html#11/wood.frag), [splatter](../edit.html#11/splatter.frag), [lava lamp](../edit.html#11/lava-lamp.frag)
- [I Ching with Noise](../edit.html#11/iching-03.frag)
### Advance
* [Moon](../edit.html#examples/moon.frag&examples/images/moon-texture.jpg)
* [Matrix](../edit.html#08/matrix.frag)
* [I Ching](../edit.html#11/iching-02.frag)
* Ikeda's series: [test pattern](../edit.html#10/ikeda-00.frag), [data path](../edit.html#10/ikeda-03.frag) and [data defrag](../edit.html#10/ikeda-04.frag), [digits](../edit.html#10/ikeda-digits.frag), [radar](../edit.html#10/ikeda-simple-grid.frag), [numered grid](../edit.html#10/ikeda-numered-grid.frag)
* I Ching series: [pattern](../edit.html#09/iching-01.frag), [random](../edit.html#10/iching-02.frag), [with noise](../edit.html#11/iching-03.frag)
* Ikeda's series: [test pattern](../edit.html#10/ikeda-00.frag), [data path](../edit.html#10/ikeda-03.frag), [data defrag](../edit.html#10/ikeda-04.frag), [digits](../edit.html#10/ikeda-digits.frag), [radar](../edit.html#10/ikeda-simple-grid.frag) and [numered grid](../edit.html#10/ikeda-numered-grid.frag)