Dotted Circle

I am surprised I haven’t seen a similar shader posted anywhere on this site

To use:

Apply the shader to a square-shaped Color Rect

Godot 4.x, but to use in Godot 3.x, simply change source_color to hint_color 

Shader code
shader_type canvas_item;
uniform vec4 color : hint_color = vec4(1.0);
uniform float diameter = 1.0; // Circle Diameter
uniform float thickness = 0.05; // Outline thickness
uniform float frequency = 10.0; // Controls the number of dots
uniform float phase = 0.0; // Controls the rotation of the circle

void fragment() {
  vec2 pos = UV - vec2(0.5);
  float outer_radius = diameter / 2.0;
  float inner_radius = outer_radius - thickness;
  float outer_circle = step(length(pos), outer_radius);
  float inner_circle = step(length(pos), inner_radius);
  

  float angle = atan(pos.y, pos.x);
  if (angle < 0.0) {
    angle += 2.0 * PI;
  }

  float wave = 0.5 * sin(frequency * angle + phase) + 0.5;
  

  float ring = outer_circle - inner_circle;
  ring *= step(0.5, wave);
  
  COLOR = vec4(color.rgb, ring * color.a);
}
Tags
circle, dotted, outline
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 absentSpaghetti

Weighted Color To Greyscale Post Process

Linear Depth/Depth Fog

Depth Buffer Object Edge Dissolve

Related shaders

Animated Dotted Outline

Dotted grid 2d [Improved]

Crossfade Circle Shader

Subscribe
Notify of
guest

6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Nubux
Nubux
1 year ago

Thanks for this simple but usefull shader!
You have to replace hint_color by source_color for 4.x versions.

Bugo
Bugo
1 year ago

Can the dotted lines be used also in the creation of tracing letters? for example letter A?

sfink
sfink
10 months ago

I know this is for 2d canvas item, but how would i use this for 3d as a spatial node?