Home▸Rendering & Computer Graphics▸Kaleidoscope Fold Shader (2D)

Kaleidoscope Fold Shader (2D)

2D canvas kaleidoscope built the way a fragment shader would: every output pixel's angle is folded into one wedge with a dihedral mirror map, then used to sample a procedural source pattern — adjustable segment count, rotation speed and zoom, with seamless texture wrapping for an infinite tiling look.

Rendering & Computer Graphics2DEasy60 FPS📱 Mobile-adapted⇄ 3D version
2d-3d-kaleidoscope-shader ↗ Open standalone

This canvas lab reproduces a kaleidoscope the way a GLSL fragment shader would, ported to plain CPU pixel math instead of Three.js mesh mirroring: every output pixel's polar angle is folded through a dihedral mirror map into one wedge, then used to sample a small procedural source pattern with seamless coordinate wrapping. Adjust the mirror-segment count, rotation speed, zoom and pattern drift to explore how a single per-pixel remap — no drawn mirrors, no cloned geometry — produces the same infinite radial symmetry a physical kaleidoscope tube or a shader-based one would.

⚙ Under the hood

2D canvas kaleidoscope built the way a fragment shader would: every output pixel's angle is folded into one wedge with a dihedral mirror map, then used to sample a procedural source pattern — adjustable segment count, rotation speed and zoom, with seamless texture wrapping for an infinite tiling look.

kaleidoscopeshader-techniquecoordinate-remappingsymmetry2d

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)