Shadertoy: A simple round square.

This is a simple tutorial about how you can create a simple round square build using the math function sqrt and the shadertoy web tool.

The source code is very simple and all the lines of source code come with explained comments

Let's see the source code:

// create a function for round square 
vec3 round_square( vec2 uv )
{
 // Set the size of the square, can be changed .01 6.
 float square_dimension = 6.;
 
 // Create math function for round sqare shape 
 float my_square = sqrt(length(pow(uv-vec2(.0,.0),vec2(square_dimension))))-.1;
 
 //Set default poz 
 vec3 poz = vec3(1.,1.,1.);
 
 // Return the result 
 return mix(vec3(0.1),poz*poz, smoothstep(0.,.001,my_square));
}

// Set color for the round square
vec3 color = vec3(.1, 76., 76.);

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
 // Normalized pixel coordinates (from 0 to 1)
 vec2 uv = (fragCoord-.5*iResolution.xy)/iResolution.y;
 // Set color 0,0,0,0
 fragColor = vec4(0);
 // u=Use for to build with round_square
 for (int i = 0; i < 10+int(min(0,iFrame)); i++) {
 // Set UV2 from basic UV
 vec2 uv2 = uv + 1. / iResolution.y * 1.25;
 // Create the round square
 fragColor += vec4(round_square(uv2) + color.xyz , 1.);
 }
 // show the square
 fragColor.xyz = (fragColor.xyz/fragColor.w);
}

This is the result: