Week 1

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

Leave a Reply