心脏线，也称心形线，是外摆线的一种。心脏可以极坐标的形式表示： r =a( 1 - sin θ)。具体大家可以参照心脏线。

下面是片段着色器的脚本。注意因为数学公式最后画出来的心脏线是的中心对称线将平行于横轴。为了让心脏竖直放置，脚本中求取极坐标的theta值时，将横纵坐标互相调换。

varying vec2 v_texCoord;

void main(){
    vec2 p = 1.0 - 2.0 * v_texCoord;
    p.y -= 0.5;
    float delta = 0.01;
    float a = atan(p.x, p.y)/3.1415926;
    float r = 1.0;
    float len = 2.0 * r * (1.0 - cos(a));
    float dist = length(p);
    if (abs(len - dist) < delta){
        gl_FragColor = vec4(vec3(1.0, 0.0, 0.0), 1.0);
    }
    else{
        gl_FragColor = vec4(vec3(0.0), 1.0);
    }
}

运行结果如下图：

脚本运行结果

如果想要填充线条中的颜色，只需要将上面脚本中的判断条件改了就好：

if (dist <= len){
        gl_FragColor = vec4(vec3(1.0, 0.0, 0.0), 1.0);
    }

去掉不需要的delta即可。全部代码如下：

varying vec2 v_texCoord;

void main(){
    vec2 p = 1.0 - 2.0 * v_texCoord;
    p.y -= 0.5；
    float a = atan(p.x, p.y)/3.1415926;
    float r = 1.0;
    float len = 2.0 * r * (1.0 - cos(a));
    float dist = length(p);
    if (dist <= len){
        gl_FragColor = vec4(vec3(1.0, 0.0, 0.0), 1.0);
    }
    else{
        gl_FragColor = vec4(vec3(0.0), 1.0);
    }
}

填充版结果图

在做效果中，我们可以根据坐标形变去改变心形的形状。可以传入时间类的变量，进行控制，使得心形动起来。并且用更巧妙的颜色来填充，使得心形的颜色过渡自然。当然背景色也可以这样做。