Shader Week 1

For my shader, I mostly wanted to focus on playing around with the colors and shapes I could make. As someone with very little experience programming shaders beyond node based 3D, I had a lot to learn about the subject. I mostly looked at mixing and combining different colors, as well as creating looping animation.  I also wanted to look into creating noise (or visuals that look like noise rather). What I struggled with the most was getting more control over the colors themselves, as I did my exercise in HSB and was working with 0.0 to 1.0 for my hue. What I would like to do in the future is remap the values to a certain range and only work with a portion of the color spectrum. I am sure this is very easy, and will come to me the second I finish this post — but as I am used to having simple remap values nodes software like Blender, I felt a little stumped. Overall, I think I gained a good understanding of the very basics of shaders, and I am exited to apply this to more controlled projects.

img1 img2



// Author: Sonya Sheina
// Title: Customer Shaderr Test

#ifdef GL_ES
precision mediump float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

// Function from Iñigo Quiles

vec3 hsb2rgb( in vec3 c ){
 vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.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 hsb;
 hsb.r = 1.; 
 hsb.g = 1.; // saturation
 hsb.b = 1.; // brightness
 vec3 hsb2 = vec3(1., 1., 1.0);
 vec3 hsb3 = vec3(1., 1., 1.0);
 float td = 0.5;
 vec2 origin = vec2(cos(u_time*td), sin(u_time*td)-0.5); 
 float d = distance(st/2.0, origin)*4.104;
 d = d + pow(st.x, st.y);
 d = pow(d, 1.5);
 d = abs(d-0.5);
 hsb.r = d;
 vec2 origin2 = vec2(sin(u_time*td)+0.5, cos(u_time*td)-0.5); 
 float d2 = distance(st/2.0, origin2)*3.776;
 d2 = d2 + pow(st.x, -st.y);
 hsb2.r = d2;
 vec2 origin3 = vec2((u_time*td)+0.5, -sin(u_time*td)-0.5); 
 float d3 = distance(st/2.0, origin3)*2.120;
 d3 = d3 + pow(st.y, st.x);
 hsb3.r = d3;

 vec4 color = vec4(hsb2rgb(hsb), 1.0);
 vec4 color2 = vec4(hsb2rgb(hsb2), 1.0);
 vec4 color3 = vec4(hsb2rgb(hsb3), 1.0);
 gl_FragColor = mix(color, mix(color2, color3, origin.y), origin.y);


One thought on “Shader Week 1”

Leave a Reply