02 用数学画形状

length：用距离画圆

到中心的距离，小于半径，就是圆内。

中心 X0.50

中心 Y0.50

半径0.24

0.030.45

习题调参数0%

把一个小圆放到左上方

每个像素运行一次拖动数字，或直接改代码

void main() {
  vec2 p = (gl_FragCoord.xy - uResolution * vec2(0.500, 0.500))
           / min(uResolution.x, uResolution.y);
  float d = length(p);
  float mask = 1.0 - smoothstep(0.240, 0.240 + 0.008, d);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.96, 0.43, 0.30), mask);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - uResolution * vec2(0.500, 0.500))
           / min(uResolution.x, uResolution.y);
  float d = length(p);
  float mask = 1.0 - smoothstep(0.240, 0.240 + 0.008, d);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.96, 0.43, 0.30), mask);
  gl_FragColor = vec4(color, 1.0);
}

JS 这一侧gl.uniform2f(uResolution, …, …)

length(p − center) 是点到中心的距离；距离小于半径，就在圆内。

试一试

把圆移到左上角
打开像素调试，看 d 在圆边上是不是正好等于半径