Truechet Tiles

While you may have observed there were a few posts on Kaleidoscope and patterns in my blog and I have promised on several occasions to create such patterns but I never delivered on my promise.

I feel the time has come to make good some of the promises and I want to now make some tiling code that repeats certain patterns on the screen.

Here is a pattern of truchet tiles:

Here is how its created:

Vertex Shader code:

        void main() {

            gl_Position = vec4( position, 1.0 );

        }

    

Fragment Shader Code:

// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015

#ifdef GL_ES

precision mediump float;

#endif

uniform vec2 u_resolution;

uniform float u_time;

vec2 brickTile(vec2 _st, float _zoom){

    _st *= _zoom;

    // Here is where the offset is happening

    _st.x += step(1., mod(_st.y,2.0)) * 0.5;

    return fract(_st);

}

float box(vec2 _st, vec2 _size){

    _size = vec2(0.5)-_size*0.5;

    vec2 uv = smoothstep(_size,_size+vec2(1e-4),_st);

    uv *= smoothstep(_size,_size+vec2(1e-4),vec2(1.0)-_st);

    return uv.x*uv.y;

}

void main(void){

    vec2 st = gl_FragCoord.xy/u_resolution.xy;

    vec3 color = vec3(0.0);

    // Modern metric brick of 215mm x 102.5mm x 65mm

    // http://www.jaharrison.me.uk/Brickwork/Sizes.html

    // st /= vec2(2.15,0.65)/1.5;

    // Apply the brick tiling

    st = brickTile(st,5.0);

    color = vec3(box(st,vec2(0.9)));

    // Uncomment to see the space coordinates

    // color = vec3(st,0.0);

    gl_FragColor = vec4(color,1.0);

}