openGL GLSL Shader: Draw a Circle on a flat polygon

Question

I'm looking for a way to draw something similar to these "knobs" with an GLSL shader

I only want to draw the coloured circles, and my application is not for a knob rather a funky progress meter. Is it possible to draw circles (or more specifically arcs) on a flat polygon just by using a shader? And how would one start the process?

Answer 1

Yes, it is possible. Set texture coordinates to the polygon so that you can access the relative coordinates in the shader (e.g. from -1,-1 to 1,1 makes the center of the polygon 0,0). In the fragment shader calculate the distance to the center with pythagoran. If the distance is less than the radius of the circle, the pixel is inside the circle. You can then specify radius for two circles and color the pixel if it is inside the outer circle and outside the inner circle.

If you want to color just an arc, get the angle with atan(y,x) and check if it is within a given range.

You can also smoothen the circles by using interpolation (step, smoothstep etc.) instead of a simple if when determining if the point is inside a circle.

Also as an optimization you don't need to calculate the square root when calculating the distance to the center if you instead check againsta radius^2.