glsl 心型绘制分析

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy *2.0 -1.0;

    // Time varying pixel color
    vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));

    vec2 p = uv;
    float r = length(p); 
    float a = atan(p.x,p.y)/3.1415926;
    // Output to screen
    float h = abs(a);
    float d=h;//smoothstep(0.0,0.6, h);
    
    float s ;//= 1.0-0.5*clamp(r/d,0.0,1.0);  
    s = (1.0-r)*d;// clamp(r/d, 0.0, 1.0 );
    s = smoothstep(0.2,0.4, s);
    //s = smoothstep(0.1,0.4, s);
    //s = smoothstep(0.1,0.4, s);
    vec3 hcol = vec3(1.0,0.5,0.3)*s; 
    fragColor = vec4(hcol,1.0);
}

这是上面的代码的效果，解开下面两个smoothstep注释会棱角更加分明，clamp是原来作者的做法，但总体思路就是利用atan配合distancefromcenter

(atan)的范围是[-pi/2, pi/2]，加上一个abs就是正数

可以看见图像之间就是上方有个口子，这对应了心的凹陷部分

这是到center的sdf效果，直觉上就知道乘起来基本就是心型了，尝试一下

基本具备心的轮廓了

加上几个smoothstep，或者clamp,就可以得到清晰一点的轮廓了

其他作者利用的函数也都是做这个事情，选取的函数的曲线不同，最后拼的心的质量就不同