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