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