add truchet patterns

Author: edap

060-pattern-layers.glsl

@@ -0,0 +1,70 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+#define PI 3.14159265359
+
+uniform vec2 u_resolution;
+uniform float u_time;
+
+float box(vec2 p,vec2 b){
+    vec2 d=abs(p)-b;
+    return length(max(d,0.))+min(max(d.x,d.y),0.);
+}
+
+float fill(float dist,float size){
+    return smoothstep(-size,+size,dist);
+}
+
+mat2 rotate2d(float _angle){
+    return mat2(cos(_angle),-sin(_angle),
+    sin(_angle),cos(_angle));
+}
+
+mat2 scale(vec2 _scale){
+    return mat2(_scale.x,0.,
+    0.,_scale.y);
+}
+
+void main(){
+    vec2 st=gl_FragCoord.xy/u_resolution;
+    st.x*=u_resolution.x/u_resolution.y;
+    
+    // Define colors for the backgroun, the layer A and the layer B
+    vec3 colorBg=vec3(st,0.);
+    vec3 colorLayerA=vec3(.2824,.4745,1.);
+    vec3 colorLayerB=vec3(.9451,.0157,.5882);
+    
+    // Layer A. Each layer has its own coord system
+    vec2 layerA=st;
+    layerA*=2.;
+    layerA=fract(layerA);
+    
+    //1 draw a box in the middle of the coord system layerA
+    vec2 boxPosA=layerA-vec2(.5,.5);
+    float boxA=fill(box(boxPosA,vec2(.2)),.001);
+    
+    // Add Layer A to the background
+    colorBg=mix(colorLayerA,colorBg,boxA);
+    
+    // Layer B
+    vec2 layerB=st;
+    layerB*=8.;
+    layerB=fract(layerB);
+    
+    //1 draw a box in the middle of the screen?
+    vec2 boxPosB=layerB-vec2(.5,.5);
+    float boxB=fill(box(boxPosB,vec2(.2)),.001);
+    
+    // Add Layer B to the background
+    colorBg=mix(colorLayerB,colorBg,boxB);
+    
+    // Exercise!
+// 1)Create a multi layer pattern, animate it.
+// 2)Search online for parallax. Try to combine the movement of the layers
+// in order to give the feeling of depth.
+// 3) try to use a custom shape. If you do not have one, spend some time
+// creating a function that generates a custom shapes.
+
+gl_FragColor=vec4(colorBg,1.);
+}

061-pattern-truchet.glsl

@@ -0,0 +1,79 @@
+// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
+// via https://thebookofshaders.com/09/
+
+
+#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){
+
+    //  Scale the coordinate system by 2x2
+    _st *= 2.0;
+
+    //  Give each cell an index number
+    //  according to its position
+    float index = 0.0;
+    index += step(1., mod(_st.x,2.0));
+    index += step(1., mod(_st.y,2.0))*2.0;
+
+    //      |
+    //  2   |   3
+    //      |
+    //--------------
+    //      |
+    //  0   |   1
+    //      |
+
+    // Make each cell between 0.0 - 1.0
+    _st = fract(_st);
+
+    // Rotate each cell according to the index
+    if(index == 1.0){
+        //  Rotate cell 1 by 90 degrees
+        _st = rotate2D(_st,PI*0.5);
+    } else if(index == 2.0){
+        //  Rotate cell 2 by -90 degrees
+        _st = rotate2D(_st,PI*-0.5);
+    } else if(index == 3.0){
+        //  Rotate cell 3 by 180 degrees
+        _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);
+
+    // Make more interesting combinations
+    // st = tile(st,2.0);
+    // st = rotate2D(st,-PI*u_time*0.25);
+    // st = rotateTilePattern(st*2.);
+    // st = rotate2D(st,PI*u_time*0.25);
+
+    // step(st.x,st.y) just makes a b&w triangles
+    // but you can use whatever design you want.
+    gl_FragColor = vec4(vec3(step(st.x,st.y)),1.0);
+}

062-pattern-truchet-random.glsl

@@ -0,0 +1,66 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+//glslViewer col-invert-sqaures.frag  ../textures/pink-necked-green-pigeon-big.jpg
+#define PI 3.14159265359
+#define SPEED.2
+
+uniform float u_time;
+uniform vec2 u_resolution;
+uniform sampler2D u_tex0;
+
+// returns a random float value given a vec2
+float hash(vec2 p){
+    p=fract(p*vec2(234.34,435.345));
+    p+=dot(p,p+34.23);
+    return fract(p.x*p.y);
+}
+
+float myShape(vec2 gv){
+    // Try to play with the functions that
+    // you know. Try to came up with your own
+    // shape.
+
+    //return abs(gv.y + gv.x);
+    return abs(abs(gv.x+gv.y)-.5);
+
+}
+
+void main(void){
+    vec2 uv=(2.*gl_FragCoord.xy-u_resolution.xy)/u_resolution.y;
+    vec3 col=vec3(0.);
+    // 6) Animate
+    // uv += u_time * 0.3;
+    uv*=8.;
+    vec2 gv=fract(uv)-.5;
+
+    // 2) each cell has now an id
+    vec2 id=floor(uv);
+
+    // 3) we can use the id to give a random value to each cell.
+    float n=hash(id);// random between 0 and 1
+
+    // 5) random flip the x direction only if a condition is match
+    if(n<.5){
+        gv.x*=-1.;
+    };
+
+    // 4) Try to see what happens if you flip the x direction
+    //gv.x *= -1.;
+
+    float width=.25;
+    // 1) draw something. Possible something that is not simmetric
+    float d=myShape(gv);
+
+    float mask=d-width;
+    mask=smoothstep(.01,-.01,mask);
+
+    // this time we are not uing mix, we are simply adding white to the black bg.
+    col+=mask;
+    //col.rg += id;
+    // outline
+    //if(gv.x > 0.48 || gv.y > 0.48) col = vec3(1.,0.,0.);
+
+    gl_FragColor=vec4(sqrt(col),1.);
+}