Wave Progress Shader

Probably not the most perfect way to do it, but for a quick experiment on Twitch… but it works.

Shader code

shader_type canvas_item;

uniform float progress : hint_range(0.0, 1.0, 0.01) = .5;
uniform float wave_height : hint_range(0.1, 0.5, 0.01) = .1;
uniform float time_scale : hint_range(0.25, 10.0, 0.25) = 5.0;

uniform vec4 color_front = vec4(1.0, 0.0, 0.0, 1.0);
uniform vec4 color_back = vec4(0.0, 1.0, 0.0, 1.0);

void fragment() {
	float wave_1 = cos(time_scale * (-TIME * 1.5) + UV.x * TAU / wave_height / 2.0) / 2.0;
	float wave_2 = sin(time_scale * -TIME + UV.x * TAU / wave_height / 2.0) / 2.0;
	float color_1 = step((1.0 - progress) * (2.0 * wave_height + 1.0) - wave_height, UV.y + wave_height * wave_1);
	float color_2 = step((1.0 - progress) * (2.0 * wave_height + 1.0) - wave_height, UV.y + wave_height * wave_2 + wave_height / 2.0);
	if (color_1 < 0.1 && color_2 < 0.1) discard;
	COLOR = mix(color_back, color_front, color_1);
}

Live Preview