Back to shaders

Shader test bench

Brick Pattern.fs

vidvox-isf-files pattern glsl runnable fragment MIT
Source
runnable fragment

Complete GLSL fragment shader. Stronghold runs it directly when the browser can compile it.

Code

uniform float brickSize;
uniform float fillSize;
uniform vec2 brickOffset;
uniform vec4 fillColor;
uniform vec4 brickColor;
precision mediump float;
/*
{
  "CATEGORIES" : [
    "Pattern", "Color"
  ],
  "DESCRIPTION" : "Generates a basic brick pattern",
  "ISFVSN" : "2",
  "INPUTS" : [
    {
      "NAME" : "brickSize",
      "TYPE" : "float",
      "MAX" : 1,
      "DEFAULT" : 0.2,
      "MIN" : 0
    },
    {
      "NAME" : "fillSize",
      "TYPE" : "float",
      "MAX" : 1,
      "DEFAULT" : 0.9,
      "MIN" : 0
    },
    {
      "NAME" : "brickOffset",
      "TYPE" : "point2D",
      "MAX" : [
        1,
        1
      ],
      "DEFAULT" : [
        0,
        0
      ],
      "MIN" : [
        0,
        0
      ]
    },
    {
      "NAME" : "fillColor",
      "TYPE" : "color",
      "DEFAULT" : [
        0,
        0,
        0,
        0
      ]
    },
    {
      "NAME" : "brickColor",
      "TYPE" : "color",
      "DEFAULT" : [
        1,
        1,
        1,
        1
      ]
    }
  ],
  "CREDIT" : "patriciogv"
}
*/

// Based on Brick example from https://thebookofshaders.com/09/
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015



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);
    vec4 color = fillColor;
    float brickCount = (brickSize == 0.0) ? max(u_resolution.x,u_resolution.y) : 1.0 / brickSize;
    //	Apply the offset
    st += brickOffset;
    // Apply the brick tiling
    st = brickTile(st,brickCount);

	float val = box(st,vec2(fillSize));
    color = mix(fillColor,brickColor,val);

    // Uncomment to see the space coordinates
    //color.rgb = vec3(st,0.0);

    gl_FragColor = color;
}