Shadertoy basic teaching 02. Drawing smiling faces

1、Shadertoy Link to the original teaching video
2、Shadertoy Website links

---

1 Explain

First, let's encapsulate the function of drawing a circle

//  Shape parameter ( Texture coordinates , center of a circle , radius , Boundary blur length )
float Circle(vec2 uv, vec2 p, float r, float blur)
{
    
    float d = length(uv - p);
    float c = smoothstep(r, r - blur, d); //  Give Way t1 > t2, The pixels in the circle are 1, Outer circle is 0
    return c;
}

First draw a yellow head

    vec3 col = vec3(1.0, 1.0, 0.0);  //  Background color 

    float mask = Circle(uv, vec2(0.0), 0.4, 0.05);  //  Mask , A very vivid name , Draw a circle here , Inside the circle is 1, Outer circle is 0
   
    col *= mask;	//  Pixels inside the circle col * 1 It's yellow , Outer circle is col * 0 For the black 
    
    fragColor = vec4(vec3(col), 1.0);

Draw eyes , By addition and subtraction , We define the second circle as the left eye , It's still the same , The pixels in the circle are 1, The pixels outside the circle are 0, On the basis of the head , Subtract this circle , So both are 1 The part of is subtracted to be 0 了 , Right eye empathy .( This is actually a union of graphs 、 The problem of intersection )

    float mask = Circle(uv, vec2(0.0)  ,  0.4, 0.05); 	//  head 
    mask -= Circle(uv, vec2(-0.15, 0.1), 0.07, 0.05); 	//  The left eye 
    mask -= Circle(uv, vec2( 0.15, 0.1), 0.07, 0.05); 	//  Right eye 

Make the mouth part : The first circle is the head , The second circle is offset slightly upwards 0.1, Subtract .

    float mouth = Circle(uv, vec2(0.0), 0.3, 0.01);	
    mouth -= Circle(uv, vec2(0.0, 0.1), 0.3, 0.01);

Then put the above results subtract The mouth part can make a smiling face

2 Complete code

float Circle(vec2 uv, vec2 p, float r, float blur)
{
    
    float d = length(uv - p);
    float c = smoothstep(r, r - blur, d); 
    return c;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    
    vec2 uv = fragCoord/iResolution.xy;
    
    uv -= 0.5;
    uv.x *= iResolution.x / iResolution.y; 
    
    vec3 col = vec3(1.0, 1.0, 0.0);
    float mask = Circle(uv, vec2(0.0), 0.4, 0.05);
    
    mask -= Circle(uv, vec2(-0.15, 0.1), 0.07, 0.01); 
    mask -= Circle(uv, vec2(0.15, 0.1), 0.07, 0.01); 
    
    float mouth = Circle(uv, vec2(0.0), 0.3, 0.01);
    mouth -= Circle(uv, vec2(0.0, 0.1), 0.3, 0.01);
    
    if (mouth < 0.0) 	//  The two circles of the mouth are subtracted , It will make the color value of some pixels on the top of the head as -1,  prevent bug, Set them to zero 
    mouth = 0.0;

    mask -= mouth; 
    col *= mask;
    
    fragColor = vec4(col, 1.0);
}

effect