ShaderJoy —— “圆点消散” 的实现 【GLSL】

视频预览 

设计思路

首先我们需要把图像分成 N*N 的网格（N 即代码中的 dots），每个网格中的坐标 pos 的取值范围都是 [0.0, 1.0] 的，且每个网格内的中心坐标都是 (0.5, 0.5)。那么我们就可以在网格内部依据像素到中心的距离 distance(pos, grid_center) < r 来绘制出一个圆。

接下来的问题是——如何设计网格中的圆的半径 r ？这里的设计是让 uv 离变化中心 (center) 越近的半径越大，越远的半径越小。如图所示，由于本例的变化中心就是屏幕中心，所以中间的圆半径最大，而屏幕四角的圆半径较小。