kodelife/glsl drawing a circle (sdf)

 Below is the main function for drawing a circle. Let's go through the important parts of the code.

Firstly

vec2 uv =inData.v_texcoord-0.5;

we subtract 0.5 from the uv vector so that we get the 0 value in the centre. (by default 0 is at the bottom left corner)

vec2 gv=fract(uv*5)-0.5;

We copy the pattern across by multiplying the uv. By using fract we get the fractional values that exist within each smaller uv space. The 0.5 subtraction is to shift the 0 point back to the centre - the fract values will run from 0 to 1 otherwise.

Next up, the circle

float d=length(gv);
float r=0.3;
float m=smoothstep(r,r*0.4,d);

Here we calculate the distance a pixel is from the centre (now set correctly because of the -0.5 above), by using the length function. We then define our desired circle radius as "r" & give it a value.

Next, we use a smoothstep of r & a slightly smaller r, testing against the pixel's distance, to see if it is within the circle or not. This value is stored in "m", which we add to our RGB output (shown below)

void main(void)
{
    vec2 uv =inData.v_texcoord-0.5;
    
    
    vec3 col=vec3(0.0);
    vec2 gv=fract(uv*5)-0.5;
    
    float d=length(gv);
    float r=0.3;
    float m=smoothstep(r,r*0.4,d);
    
   col.rg=gv;
   col+=m;
    fragColor = vec4(col,
        1.0);
}