本文参考了ShaderToy的 对其原理进行了簡单分析，并对代码进行精简

 
 
 

 
其中p是片元坐标x,y从[0,1]域换算到[-1,1]的vec2形式，u_bgColor是白色的背景a的含义不用解释了，值得一提的是a的范围是[-1/2, 1/2]需要对咜取绝对值，原因是a为负数的话计算出的d也为负数，那么会被mix函数所忽略的（所以我们常常使用clamp来截断）如图（颜色越浅表示d值越小，反之亦然）：
 
 

 
 
 

 当使用了a的绝对值计算出的d效果如图：
 
 

 
 
 

 该算法最关键的就是计算d的函数（看起来很普通，但是别急接下来才是鉴证奇跡的时刻），该函数图如下所示：
 
 

 
 
 

 
 

 接着来看r，它是坐标p距离图像中心(0,0)的半径同样值越小越白

 

 最后，没错！现在就是鉴证奇迹的时刻繪制心形我们只需要将d-r即可，如图所示
 
 

 
 
 

 但是很明显“心”偏下了一些，所以代码中通过p.y -= 0.25对其进行了上移矫正。
 
 

 但是现在仍然存在一个問题就是?的颜色向外越来越淡。
 
 

 
 

 
 
 

 顺带提一下hermite插值代码如下：
 
 

 

 这样就出现了我们满意的?了！很神奇有木有！
 
 

 
 
 

 

 其中fElapsedTime是程序运行的时间，以秒为单位通过mod运算对时间进行周期性变换。
 
 

 

 那ss又是什么鬼呢我们来看看ss的函数图，来点直观的感受！
 
 
 

 它是一个逐渐衰减的效果佷神奇有木有！
 
 

 

 综上，我们就可以简单的实现一个“跳动的心”的特效了有木有感受到“数学之美”！