02 Dibujar formas con matemáticas

length: la distancia crea un círculo

Si la distancia al centro es menor que el radio, estás dentro del círculo.

Centro X0.50

Centro Y0.50

Radio0.24

0.030.45

EjercicioAjustar valores0%

Pon un círculo pequeño arriba a la izquierda

Se ejecuta una vez por píxelArrastra los números o edita el código

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);
}

Lado JSgl.uniform2f(uResolution, …, …)

length(p − center) es la distancia al centro; si es menor que el radio, estás dentro.

Pruébalo

Mueve el círculo arriba a la izquierda
Abre el depurador de píxeles: ¿d es exactamente el radio en el borde?