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:
Labels:
2020,
2D,
editor,
graphics,
math,
mathematical functions,
online,
online tool,
web,
website
