03 Time, interaction and repetition

fract and mod: endless repeats

Keep only the fractional part of the coordinate and the pattern repeats.

Repeats5

112

Dot radius per cell0.30

0.050.48

ExerciseTune values0%

Make big 3×3 dots

Runs once per pixelDrag numbers, or edit the code

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

JS side

fract(x) = x − floor(x); scale the coordinate up, then take the fraction, and one canvas becomes many small ones.

Try it

Set the repeat count to 12
Swap the checker colours