Wobbly Grid

A wobbly grid for any of your grid needs, but wobbly

 

Shader code
shader_type canvas_item;

uniform vec3 color: source_color;
uniform float lineWidth : hint_range(0.0, 100.0, 0.1);
uniform vec2 size;
uniform sampler2D noise: filter_nearest;
uniform sampler2D noise2: filter_nearest;
uniform float edge_fade : hint_range(0.0, 1.0, 0.1);
uniform float wave_speed: hint_range(0.0, 10.0, 0.1);

void fragment() {
	
	float n = texture(noise,mod(UV+-TIME*wave_speed/21.2,1.0)).r;
	float n2 = texture(noise2,mod(UV+14.7+TIME*wave_speed/40.3,1.0)).r;;
	float n3 = clamp(0.0,0.3+pow(n+(n2*0.4),3.0)*1.5,1.0);
	COLOR.rgb = color + vec3(n3);
	
	vec2 m = 1.0-(edge_fade*abs(UV-0.5)*2.0*size-size+1.0+lineWidth/50.0);
	float ma = min(m.x,m.y);
	
	float uvx = mod(UV.x-((n3-0.5)/100.0)-(mod(size.x,2)/2.0+0.5),1.0/size.x)*size.x;
	float uvy = mod(UV.y-((n3-0.5)/100.0)-(mod(size.y,2)/2.0+0.5),1.0/size.y)*size.y;
	vec2 uv = vec2(uvx,uvy);
	vec2 w = size*max(n3,0.5)*lineWidth/1000.0;
	if(((uv.x>=w.x)&&(uv.x<=1.0-w.x))&&((uv.y>=w.y)&&(uv.y<=1.0-w.y))){
		discard;
	}
	COLOR.a = ma*n3;
}
Live Preview
Tags
displacement, grid, shaking
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

guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Username
Username
1 year ago

How do I make this shader work? I tried using it on both a texturerect and colorrect node. Maybe I do not understand how to configure the noise?

savvygamesltd
savvygamesltd
8 months ago
Reply to  Username

You’ll need to set u both noise texture (any will do) and also set a line width and grid size.
I’ve converted it to spatial for my use case but following those simple steps with line width 2, size 10, 10 and wave speed 2 I have a useable effect.

Nice shader!