03 Tiempo, interacción y repetición

fract y mod: repeticiones sin fin

Conserva solo la parte fraccionaria de la coordenada y el patrón se repite.

Repeticiones5

112

Radio del punto por celda0.30

0.050.48

EjercicioAjustar valores0%

Crea puntos grandes en una cuadrícula de 3×3

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

void main() {
  vec2 grid = vUv * 5.000;
  vec2 cell = fract(grid) - 0.5;
  float checker = mod(floor(grid.x) + floor(grid.y), 2.0);
  float mask = 1.0 - smoothstep(0.300, 0.300 + 0.015, length(cell));
  vec3 ink = mix(vec3(0.48, 0.83, 0.69), vec3(0.96, 0.43, 0.30), checker);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), ink, mask);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 grid = vUv * 5.000;
  vec2 cell = fract(grid) - 0.5;
  float checker = mod(floor(grid.x) + floor(grid.y), 2.0);
  float mask = 1.0 - smoothstep(0.300, 0.300 + 0.015, length(cell));
  vec3 ink = mix(vec3(0.48, 0.83, 0.69), vec3(0.96, 0.43, 0.30), checker);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), ink, mask);
  gl_FragColor = vec4(color, 1.0);
}

Lado JS

fract(x) = x − floor(x); aumenta la escala de la coordenada y toma su parte fraccionaria: un lienzo se convierte en muchos pequeños.

Pruébalo

Pon las repeticiones en 12
Intercambia los colores del damero