Iterating on this shader several times, it seemed fit to share the source of iteration. This is a grid set to be zoomed on this position, with alternating animations for red, blue and green using ‘u_time’ and and then altering the canvas with noise.

The code combine several functions and experimentation from other classes and shader sessions. I found this form of shaders fun and intriguing, it has brought together some of the learning.

// Author:joshua linton
// Title: wallway_02
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
float drawRectangle(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;
}
//from Week 3 Shader Session Noise
//
vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
float snoise(vec2 v){
const vec4 C = vec4(0.2113224865405187, 0.366025403784439,
-0.577350269189626, 0.024390243902439);
vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1;
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod(i, 289.0);
vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0))
+ i.x + vec3(0.0, i1.x, 1.0));
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
dot(x12.zw, x12.zw)), 0.0);
m = m*m ;
m = m*m ;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.y * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
vec2 createGrid( in vec2 st, in vec2 grid, out vec2 indices) {
st *= grid;
indices = floor(st);
st = fract(st);
return st;
}
float drawRectangle(vec2 st, vec2 pos, vec2 size) {
float result = 1.0;
vec2 border = (1.0-size)/2.;
st = st - pos + vec2(0.5);
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;
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
vec3 color = vec3(u_time);
st *= 0.19;
vec2 indices;
st = createGrid( st, vec2 (20., 8.), indices);
//st.y += cos( st.x + u_time / cos(-st.y * 2.4) /1280.0) /.24;
st.x += snoise(st + vec2(0, u_time*0.04))*5.;
st.y += snoise(st + vec2(0, u_time*.64))*0.00002;
//st.x += cos( st.y + u_time * sin(st.x)) /5.;
//from Week 2 Shader Session Patterns
if( mod(indices.x, 5.) == 0.0 && mod(indices.y, 2.) == 0.){
st = createGrid(st, vec2(5.0), indices);
color = vec3(0.006,1.000,0.607);
float b = drawRectangle(st, vec2(0.5), vec2(0.5));
color = mix( color, vec3(0.2, 0.3, 0.9), b);
} else if( mod(indices.x, 2.) == 1.0 && mod(indices.y, 2.) == 0.0){
color = vec3(0.605,0.942,1.000);
} else if( mod(indices.x, 2.) == 1.0 && mod(indices.y, 2.) == 1.0){
st - createGrid(st, vec2(2.0), indices);
color = vec3(0.000,0.800,0.716);
float d = drawRectangle(st, vec2(0.5), vec2(0.5));
color = mix( color, vec3(0.051,1.000,0.541), d);
} else {
color = vec3(1.000,0.910,0.018);
}
//from a previous sketch playing around shapes and borders
float border = .1 + (tan( st.y * 4. + u_time * .64) *4. + 5.) * 0.1;
float borderAgain = + (cos( -st.y * 0.2 + u_time / 5.) *10. + 0.1) * 0.1;
float borderLast = .12 + (tan( st.y * 0.5 + u_time * .064) *4. + 5.) * .4;
vec2 size = vec2(0.590,0.790);
color.r = drawRectangle( st, size );
color.r -= drawRectangle( st, size - vec2(border));
color.b = drawRectangle( st, vec2(0.290,0.270) + vec2(borderLast));
//color.b -= drawRectangle( st, size);
color.g = drawRectangle( st, vec2(0.9,0.9) - vec2(borderLast));
color.g -= drawRectangle( st, size + borderAgain);
//color.g = drawRectangle( st, vec2(.7,.7));
color.b = drawRectangle( st, vec2(1.9,.32));
gl_FragColor = vec4(color,0.9);
}