Circle Shader

DiamondWarrior
Shader code
shader_type canvas_item;

uniform float amt : hint_range(0.0, 1.0);
uniform vec4 color : hint_color;

void fragment() 
{
	if (distance(UV, vec2(0.5,0.5)) > amt/2.0) 
	{
		COLOR = vec4(0.0);
	}
	else 
	{
		COLOR = vec4(color);
	}
}
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

Canvas item22

Crossfade Circle Shader

Canvas item10

“Unit Selected” Oscillating Circle

Canvas item5

Circle Rainbow

Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
NekotoArts
NekotoArts
2 years ago

Evaluating an if statement on every fragment is generally bad practice. Try to stay away from if statements in shaders unless absolutely necessary.

For applying “boolean” operations in a shader, use the step, smoothstep, and mix functions. Here’s a more optimized version of this shader:

shader_type canvas_item;


uniform float amt : hint_range(0.0, 1.0);
uniform float edge_softness = 0.0;
uniform vec4 color : hint_color;


void fragment() 
{
	float radius = amt * 0.5;
	float d = distance(UV, vec2(0.5));
	float circle = smoothstep(d - edge_softness, d, radius - edge_softness);
	COLOR = vec4(color.rgb, circle);
}

I also added an “edge_softness” value if you want to anti-alias the edges of the circle a bit

4
Reply
mreliptik
mreliptik
2 years ago
Reply to  NekotoArts

Awesome work, thanks for your input Nekoto!

2
Reply