I built this shader by adding on to the circle shapes I produced for week 2. It is hard to photograph because it animates with time (image is of one of it’s less flattering frames). The main changes were changing the colors of the circles to a gradient shared across all of them rather than coloring each independently, and incorporating the shifting noise into the code, as it can’t be added to vec3 shapes and colors using the mix() function.

// Author: Dawn Murphy // Title: Noisy Shader #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; //generate 2D random float random (in vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * abs(sin(u_time))); } // 2D Noise based on Morgan McGuire @morgan3d // https://www.shadertoy.com/view/4dS3Wd float noise (in vec2 st) { vec2 i = floor(st); vec2 f = fract(st); // Four corners in 2D of a tile float a = random(i); float b = random(i + vec2(1.0, 0.0)); float c = random(i + vec2(0.0, 1.0)); float d = random(i + vec2(1.0, 1.0)); // Smooth Interpolation // Cubic Hermine Curve. Same as SmoothStep() vec2 u = f*f*(3.0-2.0*f); // u = smoothstep(0.,1.,f); // Mix 4 coorners percentages return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y; } //Generate circles //define first circle float circleF(in vec2 _st, in float _radius){ vec2 dist = _st-vec2(0.8); return 1.-smoothstep(_radius-(_radius*0.1), _radius+(_radius*0.0), dot(dist,dist)*10.0); } //define second circle float circleS(in vec2 _st, in float _radius){ vec2 dist = _st-vec2(0.5); return 1.-smoothstep(_radius-(_radius*0.1), _radius+(_radius*0.0), dot(dist,dist)*10.0); } //define third circle float circleT(in vec2 _st, in float _radius){ vec2 dist = _st-vec2(0.2); return 1.-smoothstep(_radius-(_radius*0.1), _radius+(_radius*0.0), dot(dist,dist)*10.0); } //define fourth circle float circleFo(in vec2 _st, in float _radius){ vec2 dist = _st-vec2(0.2,0.8); return 1.-smoothstep(_radius-(_radius*0.1), _radius+(_radius*0.0), dot(dist,dist)*10.0); } //define fifth circle float circleFi(in vec2 _st, in float _radius){ vec2 dist = _st-vec2(0.80,0.200); return 1.-smoothstep(_radius-(_radius*0.1), _radius+(_radius*0.0), dot(dist,dist)*10.0); } void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; vec3 color = vec3(0.0); vec2 pos = vec2(st*(u_resolution/10.0)); vec3 pct = vec3(st.x); // Use the noise function float n = noise(pos); //prepare gradient colors vec3 pink = vec3(0.995,0.370,0.604); vec3 blue = vec3(0.091,0.399,1.000); vec3 gradcolor = mix(pink, blue, st.y); //visualize the circles vec3 colorF = vec3(circleF(st,0.9)); vec3 colorS = vec3(circleS(st,0.9)); colorS -= gradcolor; //turns the first circle pink by subtracting all the green vec3 colorT = vec3(circleT(st,0.9)); vec3 colorFo = vec3(circleFo(st,0.9)); vec3 colorFi = vec3(circleFi(st,0.9)); //combine time color = mix(colorS,gradcolor,colorT); color = mix(color,gradcolor,colorF); color = mix(color,gradcolor,colorFo); color = mix(color,gradcolor,colorFi); gl_FragColor = vec4( color, n); //draws }