This week I got an overall re-introduction into shaders and having to re-learn concepts and understanding of the basic functions. One part I particularly struggled on was the exercise on the colors chapter where you’re supposed to make a flag. My code wasn’t working when I was sure it was supposed to. It turned out to be a problem with the order of operations.

My favorite shader was created was after creating an HSV gradient and then experimenting with different shaping functions. Eventually I settled on an interesting combination using sin() to control the mixing and mixing between HSV functions. One of the functions is influenced by the y axis, and the other by the x axis which resulted in some interesting combinations when they were mixed. This shader incorporates a lot of motion and creates new random patterns overtime that can’t be experienced from screenshots so I recommend loading it up yourself.

// Author: Brian Nguyen // Title: Gradient Shader Trippy 2 #ifdef GL_ES precision mediump float; #endif #define PI 3.14159265359 uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; vec3 colorA = vec3(0.155,0.903,0.912); vec3 colorB = vec3(0.983,0.029,1.000); vec3 hsb2rgb( in vec3 c ){ vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0), 6.0)-3.0)-1.0, 0.0, 1.0 ); rgb = rgb*rgb*(3.0-2.0*rgb); return c.z * mix(vec3(1.0), rgb, c.y); } void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; vec3 color = vec3(0.0); color = mix(hsb2rgb(vec3(st.x - u_time * 0.1,1.0,1.0)), hsb2rgb(vec3(st.y + u_time * 0.1,1.0,1.0)), sin(u_time * 1.0) * 10.0); color = mix(color, vec3(0.905,0.008,0.138), sin(u_time * 2.0) * 10.0); gl_FragColor = vec4(color,1.0); }

My second shader also incorporates motion but I somehow ended up creating an effect of the colors looping over themselves.

// Author: Brian Nguyen // Title: Gradient Shader HSV - Wild 3 #ifdef GL_ES precision mediump float; #endif #define PI 3.14159265359 uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; vec3 colorA = vec3(0.155,0.903,0.912); vec3 colorB = vec3(0.983,0.029,1.000); vec3 hsb2rgb( in vec3 c ){ vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0), 6.0)-3.0)-1.0, 0.0, 1.0 ); rgb = rgb*rgb*(3.0-2.0*rgb); return c.z * mix(vec3(1.0), rgb, c.y); } void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; vec3 color = vec3(0.0); vec3 pct = vec3(st.x); // pct.r = smoothstep(0.0,1.0, st.x); // pct.g = sin(st.x*PI); // pct.b = pow(st.x,0.5); color = mix(hsb2rgb(vec3(u_time,1.0,3.776)), hsb2rgb(vec3(st.y + u_time,1.0,4.496)), pct); gl_FragColor = vec4(color,1.0); }

My third shader is a mix of two color functions moving in opposite vertical directions and then I’m using sin() to fade the sketch in and out.

// Author: Brian Nguyen // Title: Gradient Shader Fading #ifdef GL_ES precision mediump float; #endif #define PI 3.14159265359 uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; vec3 colorA = vec3(0.155,0.903,0.912); vec3 colorB = vec3(0.983,0.029,1.000); vec3 hsb2rgb( in vec3 c ){ vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0), 6.0)-3.0)-1.0, 0.0, 1.0 ); rgb = rgb*rgb*(3.0-2.0*rgb); return c.z * mix(vec3(1.0), rgb, c.y); } void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; vec3 color = vec3(0.0); vec3 pct = vec3(st.x); // pct.r = smoothstep(0.0,1.0, st.x); // pct.g = sin(st.x*PI); // pct.b = pow(st.x,0.5); color = mix(hsb2rgb(vec3(st.y - u_time,1.0,1.0)), hsb2rgb(vec3(st.y + u_time * 2.0,1.0,1.0)), pct); color = color * abs(sin(u_time)); gl_FragColor = vec4(color,1.0); }