I think my first post was removed so this is a repost!

My first experiment was very simple. I used u_time to create a rising animation between turquoise and blue.

// Author: // Title:blue&green rise #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; float multiplier = 0.8; void main() { vec2 st= gl_FragCoord.xy/u_resolution.xy; vec3 blue=vec3(0.012,0.739,1.000); vec3 green=vec3(0.454,1.000,0.741); vec3 color= mix(blue, green, st.x); color=mix(blue,green,smoothstep(abs(sin(u_time*multiplier)),1.0, st.y)); gl_FragColor = vec4(color,1.0); }

My second experiment was playing around with HSB values and I played around with u_time once again to create an animation that scrolls through different hues in the red channel. I found that copying and pasting variables in different spots was a good way to understand how the code works.

<img class="alignnone size-medium wp-image-126" src="http://blog.ocad.ca/wordpress/digf3011-fw2021-01/files/2021/01/download-6-300x300.png" alt="download-6" width="300" height="300" /> // Authour: Max Shapovalov // Title: HSB Code // Source: Jeremy Rotsztain #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; float multiplier =0.1; float x=0.1; #define PI 3.1415926535 // Function from Iñigo Quiles // https://www.shadertoy.com/view/MsS3Wc 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() { // get the xy coordinate & normalize to [0, 1] range vec2 st = gl_FragCoord.xy/u_resolution.xy; st.x *= u_resolution.x/u_resolution.y; // set a fill color with hsb // store as vec3 vec3 hsb; hsb.r = 1.0; // animate hue with time hsb.g = -st.x+st.y; // saturation hsb.b = u_resolution.y/1000.0; // brightness if( true ){ // color wash // same calculation as above with slight x-offset hsb.r = u_time*0.160 + st.x*0.304; } if( false ){ // distanced based hue float d = distance( st, vec2(0.50,0.500))*1.489; hsb.r = d; // animate hue over time hsb.r = sin(u_time*PI*0.2+d); } // use custom function to translate hsv to rgb color space vec3 color = hsb2rgb(hsb); gl_FragColor = vec4(color, 1.0); }