12 De la imagen a la receta

Espejos y caleidoscopios: plegar el espacio

Dibuja un motivo pequeño y pliega las coordenadas para repetirlo: abs para simetría de espejo, mod sobre el ángulo polar para un caleidoscopio.

Pliegue

Sectores del caleidoscopio6

212

EjercicioAjustar valores0%

Crea este caleidoscopio de cinco sectores

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);
  float d = min(length(p - vec2(0.25, 0.04)) - 0.05,
                max(abs(p.x - 0.11), abs(p.y - 0.03)) - 0.025);   // dibujar solo un círculo pequeño y una caja pequeña
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.96, 0.43, 0.30), ink);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float d = min(length(p - vec2(0.25, 0.04)) - 0.05,
                max(abs(p.x - 0.11), abs(p.y - 0.03)) - 0.025);   // dibujar solo un círculo pequeño y una caja pequeña
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.96, 0.43, 0.30), ink);
  gl_FragColor = vec4(color, 1.0);
}

Lado JSgl.uniform2f(uResolution, …, …)

La simetría no copia la forma: pliega las coordenadas. abs(p) pliega cuatro cuadrantes en uno; aplicar mod al ángulo polar y luego abs divide el círculo en n sectores reflejados. El código de la forma no cambia.

Pruébalo

Prueba los tres pliegues: ¿cambió el código de la forma?
En modo caleidoscopio, pon los sectores en 3, 8 y 12
Abre el depurador de píxeles y muestra a en el lienzo: observa cómo se pliega el ángulo