How to create waves using a boolean 2d distance field with shaders?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By snak251

I have this distance field:
enter image description here

I want to be able to generate an image like this, where waves flow along the time:
enter image description here

I have no idea how to achieve that, does anyone have a hint?

:bust_in_silhouette: Reply From: aXu_AP

One way to achieve this effect could be multiplying sampled value by 3, adding TIME uniform to it and taking the fraction part. Here’s something to get you started:

shader_type canvas_item;

uniform float waves = 3.0;
uniform float speed = 0.4;

void fragment()
{
	COLOR = texture(TEXTURE, UV);
	float a = COLOR.r - .1; // Fade darker areas away
	COLOR = COLOR * waves + TIME * speed;
	COLOR = fract(COLOR);
	COLOR.a = a;
}