12 De la imagen a la receta

Escribe tú la receta

Esta vez no hay opciones. Mira el objetivo, describe su receta en cinco capas y cambia el código hasta igualarlo.

EjercicioEditar código0%

Iguala el objetivo: círculos pequeños luminosos en un caleidoscopio de seis sectores, coloreados por distancia

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

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  // ① espacio → ② forma → ③ borde → ④ color
  float d = length(p) - 0.3;
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);
  vec3 tint = vec3(0.48, 0.83, 0.69);
  vec3 color = vec3(0.06, 0.10, 0.14) + tint * ink;
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  // ① espacio → ② forma → ③ borde → ④ color
  float d = length(p) - 0.3;
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);
  vec3 tint = vec3(0.48, 0.83, 0.69);
  vec3 color = vec3(0.06, 0.10, 0.14) + tint * ink;
  gl_FragColor = vec4(color, 1.0);
}

Lado JSgl.uniform2f(uResolution, …, …)

Describe la receta antes de escribir: espacio (polar, plegado en 6 sectores), forma (un círculo pequeño alejado del centro), borde (resplandor), color (una paleta según la distancia). Si puedes describir la receta, puedes escribir el código y decirle a un agente exactamente qué quieres.

Pruébalo

Antes de escribir código, describe el objetivo en una frase, capa a capa
Empieza por la capa de espacio y cambia una capa cada vez, comprobando la imagen
Abre el depurador de píxeles y muestra r, a, d e ink en el lienzo uno a uno