Animated STEP Tutorial, #14, from https://www.shadertoy.com/view/Md23DV

shadertoy-beginner-tut14-step.glsl

uniform float u_alpha;

void main() {
  vec2 r = vec2((gl_FragCoord.xy - 0.5*resolution.xy)/resolution.y) * 2.0;
  
  float xMax = resolution.x/resolution.y;
  
	vec3 bgCol = vec3(0.0); // black
	vec3 col1 = vec3(0.216, 0.471, 0.698); // blue
	vec3 col2 = vec3(1.00, 0.329, 0.298); // yellow
	vec3 col3 = vec3(0.867, 0.910, 0.247); // red
  	vec3 pixel = bgCol;
  
  	// vec3 axesCol = vec3(0.10, 0.75, 0.7860);
  vec3 axesCol = vec3(0.0, 0.0, xMax);
    float axesThickness = 0.003;

	float edge, variable, ret;
	
	// divide the screen into five parts horizontally
	// for different examples
	if(r.x < -0.6*xMax) { // Part I
		variable = r.y;
		edge = abs(sin(time));
		// if( variable > edge ) { // if the "variable" is greater than "edge"
		// 	ret = 1.0;          // return 1.0
		// } else {                // if the "variable" is less than "edge"
		// 	ret = 0.0;          // return 0.0
		// }
      ret = step(edge, variable);
	} 
	else if(r.x < -0.2*xMax) { // Part II
		variable = r.y;
		edge = -(cos(time));
		ret = step(edge, variable); // step function is equivalent to the
		                            // if block of the Part I
	} 
	else if(r.x < 0.2*xMax) { // Part III
		// "step" returns either 0.0 or 1.0.
		// "1.0 - step" will inverse the output
		ret = abs(tan(time)) - step(0.20, r.y); // Mirror the step function around edge
	} 
	else if(r.x < 0.6*xMax) { // Part IV
		// if y-coordinate is smaller than -0.4 ret is 0.3
		// if y-coordinate is greater than -0.4 ret is 0.3+0.5=0.8
		ret = abs(sin(time)) + 0.5*step(-abs(asin(0.4)), r.y);
	}
	else { // Part V
		// Combine two step functions to create a gap
		ret = (step(-(abs(sin(time))), r.y)) * (1.0 - step(abs(sin(time)), r.y));
		// "1.0 - ret" will create a gap
	}
	
	pixel = vec3(ret); // make a color out of return value.
  
  if(abs(r.x) < axesThickness) pixel = axesCol;
  if(abs(r.y) < axesThickness) pixel = axesCol;
  
  gl_FragColor = vec4(pixel, u_alpha);
}