Spider Web

A simple fragment shader for creating spider webs. Allows adjusting:

  • size (relative to r=1),
  • color
  • thickness
  • number of “spikes” (radii)
  • number of “strands” (concentric levels),
  • “indentation” (sag between radii), and
  • limited ability to skew to non-circle.

The example image shows multiple uses in TextureRects in a CanvasLayer.

Shader code
shader_type canvas_item;

uniform vec4 color : source_color = vec4(1);
uniform float thickness : hint_range(0.0, 8., 0.1) = 1.;
uniform int spikes : hint_range(1,20, 1) = 6;
uniform int strands: hint_range(1, 20, 1) = 10;
uniform float indencity : hint_range(0.005, .5, 0.001) = .1;
uniform vec2 center = vec2(.5,.5);
uniform float rel_size : hint_range(0., 1., .1) = 0.01;
uniform vec2 skew = vec2(1., 1.);

void fragment() {
	float angle = atan(UV.y-center.y, UV.x-center.x);
	COLOR.rgb = color.rgb;
	float r = sqrt(pow(UV.x - center.x,2)/skew.x + pow(UV.y - center.y, 2)/skew.y);
	float indent_fix = (.3)*r*float(strands);
	float b =  (r + indencity*abs(sin(angle*float(spikes)/2.0))*indent_fix);
	float a = fract(float(strands) * b / rel_size); 
	COLOR.a = color.a * min(
				max(smoothstep(1.-thickness*.1, 1., a), 
	              smoothstep(thickness*.1/(20.*r +.01), 0.0, abs(sin(angle*float(spikes)/2.0)))),
				1. - step(0., b - rel_size));
}
Tags
2d, canvas_item, spider web, web
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.

More from sturm_trouper

Simple spirals demo

Moon Shader 2D All Phases and Roughened Shadow

Simple Pie Chart

Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments