This is the 16th day of my participation in the August More Text Challenge

rendering

Introduction of algorithm

First, the usual operation is to convert the UV coordinates to between [-0.5, 0.5]

vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
Copy the code

The effect of UV visualization

So the next step is, how do I draw a circle

float circle = length(uv) - 0.23;  
Copy the code

Diagram of a function of a circle

Actual effect picture

And how do I draw a rectangle

 float rect =  max(abs(uv.x), abs(uv.y)) - 0.1; 
Copy the code

Function diagram of rectangle

The actual effect is

Next, we need to design a buffer function to smoothly switch between circles and rectangles

float w = -sin(t + sin(t + sin(t))) * 0.5 + 0.5;
Copy the code

Its schematic diagram is

Then the range of w varies with time between [0., 1.] (t is the quantity that changes with time)

The mix function is used to interpolate

float f = mix(circle, rect, w);
Copy the code

The dynamic effect is as follows

Finally, to show up as a line shape, we use the SmoothStep function to (smoothly) intercept the number we want

f = smoothstep(0.0.0.01, f) - smoothstep(0.01.0.02, f);
Copy the code

The schematic diagram on the left side of the minus sign above is

The schematic diagram on the right side of the minus sign above is

When combined, one of them is captured (too large and too small are suppressed).

At this point we have the same effect as at the beginning of the article

Complete code with comments

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
    float t = iTime * 3.;

    float circle = length(uv) - 0.23;               ///< circle drawing
    float rect =  max(abs(uv.x), abs(uv.y)) - 0.1;  ///< rectangle drawing

    // @note interpolation ratio, 0: circle, 1: rect
    float w = -sin(t + sin(t + sin(t))) * 0.5 + 0.5;
    /// @note slow interpolation
    float f = mix(circle, rect, w);

    f = smoothstep(0.0.0.01, f) - smoothstep(0.01.0.02, f);
    vec3 col = vec3(f);
    fragColor = vec4(col, 1.0);
}
Copy the code