I spent some time playing around with the border function. I ended up with this gradient that slowly moves towards the bottom left of the screen. The colors mix in weird way with this one so I decided to leave it as is.

// Author:Mark Herod // Title: Shape/Pattern #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; float drawRect (vec2 st, vec2 size){ float result = 1.0; vec2 border = (1.0-size)/2.; result = step(border.x, st.x); result *= step(border.x, 1.0-st.x); result *= step(border.y, st.y); result *= step(border.y, 1.0-st.y); return result; } float drawCircle(vec2 st, float size){ float result = distance(st, vec2(0.5)); result = 1.072-step(size,result); return result; } void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; st.x *= u_resolution.x/u_resolution.y; vec3 color = vec3(0.); float border = 0.178 + (cos(st.x * 98.008 + u_time * 2.112) *0.732 *0.5); //applies border and movement to each shape. // also give shader the squarish shape border /= + (cos(st.y * 99. + u_time * 1.792) *2.444 *1.284); vec2 size = vec2 (0.5,0.5); //draws squares color.g = drawRect( st, size ); color.g = (asin(drawRect( st, size - vec2(border)))); //draws circle. color.r = drawCircle(st, border); color.b += drawCircle(st,border/st.y); gl_FragColor = vec4(color,1.0); }

This was just an experimentation of shapes and seeing how things worked together. I used the square as more of a light source to shine in from the right.

// Author: Mark Herod // Title: Faded Shapes #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; float drawCircle(vec2 st, vec2 pos, float size){ float result = distance(st,pos); result = 1.0-step(size,result); return result; } float drawRect (vec2 st, vec2 size){ float result = 1.0; vec2 border = (1.0-size)/2.; result =(border.x, st.x); return result; } void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; st.x *= u_resolution.x/u_resolution.y; vec3 color = vec3(0.042,0.575,0.396); //color = vec3(st.x,st.y,abs(sin(u_time))); float c1 = drawCircle(st, vec2(0.320,0.470),0.4); float c2 = drawCircle(st, vec2(0.360,0.270),0.560); float c3 = drawCircle(st, vec2(0.320,0.470),4.); float r1 = drawRect( st, vec2(2.0, 0.2) ); color = mix(color, vec3(0.0,1.1,3.0),c1*0.5 ); color = mix(color, vec3(2.499,3.000,0.306),c2*0.5 ); color = mix(color, vec3(0.209,0.405,0.036),c3*0.5 ); color = mix(color, vec3(3.000,1.086,2.930),r1/1.8); gl_FragColor = vec4(color,1.0); }