12 From picture to recipe

Mirrors and kaleidoscopes: folding space

Draw one small motif and fold the coordinates so it appears many times: abs for mirror symmetry, mod on the polar angle for a kaleidoscope.

Fold

Kaleidoscope slices6

212

ExerciseTune values0%

Make this five-slice kaleidoscope

Runs once per pixelDrag numbers, or edit the code

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);   // draw just one small circle and one small box
  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);   // draw just one small circle and one small box
  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);
}

JS sidegl.uniform2f(uResolution, …, …)

Symmetry is not copying the shape; it is folding the coordinates. abs(p) folds four quadrants into one; taking mod of the polar angle and then abs cuts the circle into n mirrored slices. The shape code doesn’t change at all.

Try it

Try all three folds: did the shape code change?
In kaleidoscope mode, set the slices to 3, 8 and 12
Open the pixel debugger and show a on the canvas: see how the angle is folded