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