02 Dibujar formas con matemáticas

Transformaciones: mueve primero las coordenadas

Transforma las coordenadas y luego dibuja el mismo cuadrado.

Traslación X0.00

-0.40.4

Escala de coordenadas1.00

0.43

Rotación · radianes0.30

-3.143.14

EjercicioAjustar valores0%

Crea este cuadrado: desplazado a la derecha, más pequeño y girado 45°

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);
  p -= vec2(0.000, 0.0);
  p *= 1.000;
  float a = 0.300;
  p = mat2(cos(a), -sin(a), sin(a), cos(a)) * p;
  float d = max(abs(p.x), abs(p.y)) - 0.22;
  float mask = 1.0 - smoothstep(0.0, 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 - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  p -= vec2(0.000, 0.0);
  p *= 1.000;
  float a = 0.300;
  p = mat2(cos(a), -sin(a), sin(a), cos(a)) * p;
  float d = max(abs(p.x), abs(p.y)) - 0.22;
  float mask = 1.0 - smoothstep(0.0, 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, …, …)

Transformas las coordenadas, no la forma: p − offset mueve la forma hacia offset; aumentar la escala de las coordenadas reduce la forma.

Pruébalo

Pon la escala en 2: ¿el cuadrado se hace más pequeño o más grande?
Gira 0.785 (45°): el cuadrado se convierte en un rombo