Homework Week 2
Gradient #1: Explore HSB color
For the first HSB color shader I wanted to experiment with the Sin function to create a trippy looking shader. I wanted this shader to be interactable with the mouse position both x and y because it’s fun moving your mouse around on the shader, I experimented with where I could fit the mouse x and y variables and created a way to adjust both the colors and the sin wave itself.
See my code and comments for this first shader below
// Author: Lukey
// Title: Explore HSB color (Homework Week 2)
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.1415926535
#define TWO_PI 6.283185307
float plot( vec2 xy, float amt){
if( step( xy.y – 0.006, amt) == 1.0 && (1.0- step( xy.y + 0.006, amt)) == 1.) return 1.0;
return 0.;
}
// conversion function by Iñigo Quiles
// https://www.shadertoy.com/view/MsS3Wc
vec3 hsb2rgb( in vec3 c ){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(4.000,0.769,0.000),
5.640)-3.0)-1.0,
0.0,
1.0 );
rgb = rgb*rgb*(3.0-2.0*rgb);
return c.z * mix( vec3(0.417,1.000,0.025), rgb, c.y);
}
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
//sin variable
float l = st.x;
//fract variable
float p = st.y;
//the code below is sampled from the shaping functions and curves .frag provided in the week2 shader zip
//LUKEY -> fract from sample code, fract is dictated by st.x multiplied by value and then multiplied by mouseX position
//this makes the shader very ineractable allowing you to change the look by using the mouse position
p = fract(st.x * 1.248*u_mouse.x/u_resolution.x+u_mouse.y/u_resolution.y);
//LUKEY -> dictate sin, these values are multiplied choatically until I got a crazy look, there was not really any reason to it!
l = sin( u_time * -0.400 + st.x * TWO_PI * 0.964 * 0.628 + 0.764+u_mouse.y/u_resolution.y);
vec3 hsb = vec3(u_mouse.y/u_resolution.y,0.798+u_mouse.y/u_resolution.y,1.000); // 100% red
vec3 rgb = hsb2rgb(hsb);
vec3 color = vec3(0.0);
// We map x (0.0 – 1.0) to the hue (0.0 – 1.0)
// And the y (0.0 – 1.0) to the brightness
color = hsb2rgb(vec3(st.x*st.y+fract(u_time*.25)/l+p,l+0.888*u_mouse.x/u_resolution.x+u_mouse.y/u_resolution.y,st.y/st.x+fract(u_time*.25)/p));
//The following line I experiemnted with using mouse position within the mix function
color.rgb = mix( color.rgb*u_mouse.x/u_resolution.x – u_mouse.y/u_resolution.y, vec3(0.0, 1.0, 0.0), plot( st, color.r));
gl_FragColor = vec4(color,1.288);
}
Gradient #2: Animating HSB values
In the evolution of the above shader, I adjusted some of the values to include time either added, multiplied, or divided by values written previously. My focus was to animate the fract function over time to get a copy machine look with the shader being refreshed by the fract function over time. I also experimented with multiplying time by negative values which changed the direction the function would animate in.
See my code and comments for this second shader below
// Author: Lukey
// Title: Animating HSB values (Homework Week 2)
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.1415926535
#define TWO_PI 6.283185307
float plot( vec2 xy, float amt){
if( step( xy.y – 0.006, amt) == 1.0 && (1.0- step( xy.y + 0.006, amt)) == 1.) return 1.0;
return 0.;
}
// conversion function by Iñigo Quiles
// https://www.shadertoy.com/view/MsS3Wc
vec3 hsb2rgb( in vec3 c ){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(4.000,0.769,0.000),
5.640)-3.0)-1.0,
0.0,
1.0 );
rgb = rgb*rgb*(3.0-2.0*rgb);
return c.z * mix( vec3(1.000,0.431,0.296), rgb, c.y);
}
void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
//sin variable
float l = st.x;
//fract variable
float p = st.y;
//the code below is sampled from the shaping functions and curves .frag provided in the week2 shader zip
//LUKEY -> fract from sample code, fract is dictated by st.x multiplied by value and then multiplied by mouseX position
//this makes the shader very ineractable allowing you to change the look by using the mouse position
//LUKEY EXERCISE 2 –> added time to fract to create a sort of copy machine effect, it feels like the screen get refreshed, you can also use the mouse.x and .y positions to adjust
//it as well the effect is interactable but also happens on its own
p = fract(st.x + st.y* 1.248*u_mouse.x/u_resolution.x+u_mouse.y/u_resolution.y+(u_time*-.25)+(u_time*.02));
//LUKEY -> dictate sin, these values are multiplied choatically until I got a crazy look, there was not really any reason to it!
// LUKEY EXERCISE 2 –> multiplyed time by a negative
l = sin( u_time * -0.536 + st.x * TWO_PI * 0.964 * 0.628 + 0.764+u_mouse.y/u_resolution.y);
vec3 hsb = vec3(u_mouse.y/u_resolution.y,0.798+u_mouse.y/u_resolution.y,1.000+(u_time*1.244)); // 100% red
vec3 rgb = hsb2rgb(hsb);
vec3 color = vec3(0.0);
// We map x (0.0 – 1.0) to the hue (0.0 – 1.0)
// And the y (0.0 – 1.0) to the brightness
color = hsb2rgb(vec3(st.x*st.y+fract(u_time*.25)/l+p,l+0.888*u_mouse.x/u_resolution.x+u_mouse.y/u_resolution.y,st.y/st.x+fract(u_time*.25)/p));
//LUKEY -> The following line I experiemnted with using mouse position within the mix function
// LUKEY EXERCISE 2 –> Added time to “plot” within the mix function
color.rgb = mix( color.rgb*u_mouse.x/u_resolution.x – u_mouse.y/u_resolution.y, vec3(0.0, 1.0, 0.0), plot( st, color.r+fract(u_time*.25)));
gl_FragColor = vec4(color,1.288);
}
