ShaderToy(二)画笑脸

通过上一节的知识，我们可以自建circle函数来作圆形：

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

return c;
}

其中p为圆形坐标，uv-p将原点移动到了p位置，r为半径，blur为边界模糊长度。由此，我们可以画第一个圆：

float c = Circle(uv, vec2(0.2, -0.1), 0.4, 0.05);

 画第二个圆只需将其与第一个圆做相加即可：

c += Circle(uv, vec2(-0.5, -0.2), 0.1, 0.01);

 圆之间也可以做减法运算：（有一部分可能是-1，将其c赋值为0）

c += (Circle(uv, vec2(-0.5, -0.2), 0.1, 0.01) == 1.0)? 1.0: 0.0;

 

由此我们可以绘制出笑脸的眼睛：

float c = Circle(uv, vec2(0.0), 0.4, 0.05);
c -= Circle(uv, vec2(-0.13, 0.2), 0.07, 0.01);
c -= Circle(uv, vec2(0.13, 0.2), 0.07, 0.01);

 我们可以通过添加新的颜色数组来改变整体颜色：

vec3 col = vec3(0.0);
col = vec3(1.0, 1.0, 0.0) * c; // yellow

最后我们绘制嘴巴：使用两个相同大小的圆形相减得到月牙形嘴巴：

float mouth = Circle(uv, vec2(0.0, 0.0), 0.3, 0.02);
mouth -= Circle(uv, vec2(0.0, 0.1), 0.3, 0.02);
mouth = (mouth == 1.0)? 1.0 : 0.0;

 

 然后将嘴巴添加到我们的笑脸中：

c -= mouth;

完整代码如下：

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 )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
     
    uv -= 0.5;
    uv.x *= iResolution.x / iResolution.y;

    //float c = Circle(uv, vec2(0.2, -0.1), 0.4, 0.05);
    
    //c += Circle(uv, vec2(-0.5, -0.2), 0.1, 0.01);
    //c -=  Circle(uv, vec2(0.1, 0.2), 0.1, 0.01);
    float c = Circle(uv, vec2(0.0), 0.4, 0.05);

    c -= Circle(uv, vec2(-0.13, 0.2), 0.07, 0.01);
    c -= Circle(uv, vec2(0.13, 0.2), 0.07, 0.01);
    
    float mouth = Circle(uv, vec2(0.0, 0.0), 0.3, 0.02);
    mouth -= Circle(uv, vec2(0.0, 0.1), 0.3, 0.02);
    mouth = (mouth == 1.0)? 1.0 : 0.0;
    
    c -= mouth;
    vec3 col = vec3(0.0);
    col = vec3(1.0, 1.0, 0.0) * c; // yellow

    // Output to screen
    fragColor = vec4(col,1.0);
}