Shader #1
For this shader I began with the Truchet Tile code from The Book of Shaders. Through rotating different tiles and experimentation I was able to create an arrow shape. I immediately knew that I wanted the arrows to move in the direction they are pointing and it didn’t take too long to figure out how to achieve this. I also played around with creating an outline around the entire canvas. I was hoping to outline the arrows but I got stumped and couldn’t figure out how to do it. It’s not the prettiest shader but I found that making the arrow shape and then making them move was a good coding exercise.
// Author Max Shapovalov
//Title: Arrows
//Modified work of @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;
#endif
#define PI 3.14159265358979323846
uniform vec2 u_resolution;
uniform float u_time;
float circle(in vec2 _st, in float _radius){
vec2 dist = _st-vec2(0.5);
return 1.-smoothstep(_radius-(_radius*0.1),
_radius+(_radius*0.1),
dot(dist,dist));
}
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.x += step(1., mod(_st.y,2.0)) * 2.;
_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.25);
} else if(index == 2.0){
// Rotate cell 2 by -90 degrees
_st = rotate2D(_st,PI*-1.);
} else if(index == 3.0){
// Rotate cell 3 by 180 degrees
_st = rotate2D(_st,PI*+0.75);
}
return _st*2.;
}
vec2 brickTile(vec2 _st, float _zoom){
_st *= _zoom;
// Here is where the offset is happening
_st.x += step(1., mod(_st.y+0.5,3.)) * 0.5;
return fract(_st);
}
void main(void){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 pattern = vec3(0.0);
vec3 pattern2 = vec3(0.0);
vec3 blue=vec3(0.003,0.575,1.000);
vec2 bl = step(vec2(0.05),st); // bottom-left
vec2 tr = step(vec2(0.05),1.-st); // top-right
vec3 outline = vec3(bl.x * bl.y * tr.x * tr.y);
blue = mix(blue,vec3(outline.x,1.0,1.0),.6);
st = tile(vec2(-st.y+(fract(u_time/5.0)),-st.x),1.0);
st = brickTile(st,3.0);
st = rotateTilePattern(st);
pattern = vec3(circle(st-st.x,(0.5-st.y)));
outline = vec3(circle(st,(0.5-st.y)));
blue = mix(blue,vec3(outline.x,1.0,1.0),.1);
pattern=mix(pattern,blue,.9);
pattern=smoothstep(vec3(pattern),vec3(.2),vec3(.5));
gl_FragColor = vec4(pattern,1.);
}
Shader #2
In this shader I played around with creating circles and squares overtop of one another and then using the step function to get a silhouette. I found that the order of functions and can drastically change how the shader looks. Lastly I divided the canvas in four quadrants and made them spin.
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
//title: crosses
#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 brickTile(vec2 _st, float _zoom){
_st *= _zoom;
// Here is where the offset is happening
_st.x += step(1., mod(_st.y,2.0)) ;
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*1.);
} else if(index == 2.0){
// Rotate cell 2 by -90 degrees
_st = rotate2D(_st,PI*-0.0);
} else if(index == 3.0){
// Rotate cell 3 by 180 degrees
_st = rotate2D(_st,PI*-.5);
}
else{
_st = rotate2D(_st,PI*.5);
}
return _st;
}
float circle(in vec2 _st, in float _radius){
vec2 dist = _st-vec2(0.5);
return 1.-smoothstep(_radius-(_radius*0.01),
_radius+(_radius*0.01),
dot(dist,dist)*4.0);
}
void main (void) {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st = tile(st,1.0);
st = rotate2D(st,-PI*abs(sin(u_time*.01)));
st = rotateTilePattern(st*1.);
st = rotate2D(st,PI*u_time*.011);
st = tile(st,1.5);
st = brickTile(st,2.0);
st = rotateTilePattern(st);
vec3 color = vec3(step(st.x,st.y));
vec3 color2 = vec3(circle(st,0.5));
vec3 color3 = step(color,color2);
vec3 color4=mix(vec3(color),vec3(color2),color3);
st = tile(st,2.0);
gl_FragColor = vec4(color4,1.0);
}
