Simple GLSL circle example

glsl_circle.frag

#ifdef GL_ES
precision mediump float;
#endif

// Being in values from the CPU
// Read only value sent to all the threads/processes
uniform vec2 u_resolution; // Global vector shader variable

float circleShape(float radius, vec2 position) {
  // distance(p1, p2) - returns the distance between two points
  // https://thebookofshaders.com/glossary/?search=distance
  // always returns float
  float value = distance(position, vec2(0.5));
  // setp(edge, x) - compares two values
  // https://thebookofshaders.com/glossary/?search=step
  // edge - edge of step function
  // x - value used to generate step
  // x < edge
  // only retruns either 0.0 or 1.0    
  return step(radius, value);
}

void main() {
  // gl_FragCoord is actually a vec4  (x, y, z, 1/w)
  // https://computergraphics.stackexchange.com/a/5725
  // https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/gl_FragCoord.xhtml
  // assumes lower-left origin by default
  // essentiaslly iterating over each pixel
  vec2 pixelCoord = gl_FragCoord.xy / u_resolution; // normalises values so the go between 0.0 - 1.0
  float circleWidth = 0.2;
  float circle = circleShape(circleWidth, pixelCoord);
  vec3 color = vec3(circle);
  gl_FragColor = vec4(color, 1.0);
}