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);
}
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

another wave Progress Shader

Radial Progress Shader

sine wave camera view shader

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments