In this tutorial, I show how to make a simple GLSL Circle.

For those who aren’t familiar with GLSL, you can follow a really good set of tutorials here: https://thebookofshaders.com/

If you are familiar but just need a refresher or just gettin started, feel free to watch. I follow a simple set of progressions from controlling the colors in the view to creating a circle shape. From there I show how to inset the colors.

1. Normalize the UV coordinates of your scene so you are working from 0,0 in the center.
2. Generate a color
3. Modify your color on a set of changing variables (in this case iTime)
4. set fragColor to your new color!

And here’s the code for this:

[pastacode lang=”cpp” manual=”void%20mainImage(%20out%20vec4%20fragColor%2C%20in%20vec2%20fragCoord%20)%0A%7B%0A%20%20%20%20%2F%2F%20Normalized%20pixel%20coordinates%20(from%200%20to%201)%0A%20%20%20%20vec2%20uv%20%3D%20fragCoord.xy%2FiResolution.xy%3B%0A%20%20%20%20vec2%20center%20%3D%20uv%20-%20vec2(0.5%2C0.5)%3B%0A%20%20%20%20center.x%20%3D%20center.x%20*%20(iResolution.x%20%2F%20iResolution.y)%3B%0A%0A%20%20%20%20%0A%20%20%20%20vec3%20col%20%3D%20vec3(0.9%2C%200.3%20%2B%20center.y%2C%200.5%20%2B%20center.x)%3B%0A%20%20%20%20%0A%20%20%20%20float%20r%20%3D%200.2%20%2B%200.5%20*%20cos(iTime)%3B%0A%20%20%20%20%0A%20%20%20%20col%20*%3D%201.0%20-%20smoothstep(r%2C%20r%20%2B%200.01%2C%20length(center))%3B%0A%0A%20%20%20%20%2F%2F%20Output%20to%20screen%0A%20%20%20%20fragColor%20%3D%20vec4(col%2C1.0)%3B%0A%7D” message=”” highlight=”” provider=”manual”/]

To practice this I recommend making a new experiment here: https://www.shadertoy.com/new