前端人自己看把

// 归一化屏幕坐标系
vec2 ProjectionCoord(in vec2 fragCoord, in float scale) {
  //本函数实现将屏幕坐标转换为以画布中心为原点的坐标系，并进行归一化
  //首先当前画布左上角为原点，右下角为iResolution.xy，我们需要将其转换为以中心点为原点，
  vec2 centerCoord = fragCoord - 0.5 * iResolution.xy;
  //然后将坐标归一化, 这里需要取屏幕宽高的最小值，因为画布可能不是正方形，我们需要保证最小的一边长度为1，范围为(-0.5,0.5)
  vec2 normalizationCoord = centerCoord / min(iResolution.x, iResolution.y);
  //此时坐标系的范围是(-0.5,0.5), 为了让坐标系的范围是(-1,1), 我们再乘以2
  vec2 dobuleNormalizationCoord = 2. * normalizationCoord;
  //最后我们再乘以scale, 这样我们就可以控制坐标系的大小
  return scale * dobuleNormalizationCoord;
}

//坐标轴辅助对象，筛选出归属于坐标轴的片元，返回坐标轴颜色
vec4 AxisHelper(in vec2 coord, in float axisWidth, in vec4 xAxisColor, in vec4 yAxisColor) {
  //设置默认颜色为黑色透明度为0
  vec4 color = vec4(0.0);
  //这里dx为例，dFdx返回当前点的coord.x与相邻点的coord.x的差值，然后乘以axisWidth，得到一个屏幕上的一个像素在x方向上的长度
  // dFdx 的入参 必须是一个引用 而不能是一个具体的数值是吗，因为他要靠这个引用来查找相邻片源的该值
  float dx = dFdx(coord.x) * axisWidth;
  float dy = dFdy(coord.y) * axisWidth;
  if(abs(coord.x) < dx) {
    color = xAxisColor;
  } else if(abs(coord.y) < dy) {
    color = yAxisColor;
  }
  return color;
}

//网格辅助对象，筛选出归属于网格的片元，返回网格颜色
vec4 GridHelper(in vec2 coord, in float gridWidth, in vec4 gridColor) {
  vec4 color = vec4(0, 0, 0, 0);
  float dx = dFdx(coord.x) * gridWidth;
  float dy = dFdy(coord.y) * gridWidth;
  //每单位长度的余数，如果说想要2个单位长度的网格，那么需要把coord.x和coord.y都除以2，然后取余数
  vec2 fraction = fract(coord);
  if(fraction.x < dx || fraction.y < dy) {
    color = gridColor;
  }
  return color;
} 

// 投影坐标系辅助对象
vec4 ProjectionHelper(in vec2 coord, in float axisWidth, in vec4 xAxisColor, in vec4 yAxisColor, in float gridWidth, in vec4 gridColor) {
  // 坐标轴
  vec4 axisHelper = AxisHelper(coord, axisWidth, xAxisColor, yAxisColor);
  // 栅格
  vec4 gridHelper = GridHelper(coord, gridWidth, gridColor);
  // =投影坐标系
  return bool(axisHelper.a) ? axisHelper : gridHelper;
}

vec4 LoverHeartHelper(in vec2 coord, in vec4 fragColor) {
  // 圆心坐标
  float x = coord.x;
  float y = coord.y;

  // 爱心公式，将圆变形得到一个爱心的形状
  float heart = pow(x * x + y * y - 0.2, 3.0) - x * x * y * y * y * 2.;

  // 判断是否在爱心范围内
  //为什么这里是小于等于0，因为我们的爱心公式是一个不规则的形状，所以我们需要判断是否在这个不规则形状内

  //隐式方程的基本概念
  //隐式方程是一种用数学表达式描述图形的方式。它的形式通常是：
  //f(x,y)=0
  //通常我们用隐式方程函数表示的图形，我们可以通过函数的值来判断是否在图形内，为0表示在图形轮廓上，大于0表示在图形外，小于0表示在图形内

  if(heart <= 0.0) {
    fragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
  }

  return fragColor;
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  //片元着色器代码,入参为片元坐标，出参为片元颜色
  vec2 uv = ProjectionCoord(fragCoord, 3.);
  fragColor = ProjectionHelper(uv, 1., vec4(1, 0, 0, 1), vec4(0, 1, 0, 1), 1., vec4(0.57, 0.57, 0.57, 1.0));
  fragColor = LoverHeartHelper(uv, fragColor);
}