Interactive Lab
Stage 1: The Origin & `translate()`
The foundation of radial symmetry. By default, p5.js starts drawing from the top-left corner (0,0). The `translate()` function moves this origin point. Here, we move it to the center of the canvas. Draw with your mouse, then toggle the translation to see the effect.
Stage 2: Rotation & `rotate()`
Building on a centered origin, `rotate()` pivots the entire canvas. As you draw, use the slider to see how your brush stroke rotates around the center. This is the key to creating segments.
Stage 3: Reflection & `scale()`
The "mirror" effect comes from `scale()`. By flipping an axis (e.g., `scale(1, -1)` flips vertically), we can draw a reflected version of our line. Toggle the reflection to create a two-segment symmetrical pattern.
Stage 4: Full Kaleidoscope
Now, we combine all concepts. A loop rotates and reflects for each segment. Use the slider to change the number of symmetry segments and create complete kaleidoscopic patterns!
Component Explorer
The Symmetry Engine
This is the heart of the kaleidoscope. It's not a single component, but the combination of two key variables that dictate the pattern's structure:
- `symmetry` (Variable): An integer that sets the number of reflective segments. A value of 6 creates a hexagon, 8 an octagon, and so on. This is the primary control for the pattern's complexity.
- `angle` (Variable): The calculated angle for each segment (always `360 / symmetry`). It determines how much the canvas must rotate to draw each reflected piece.
Code Viewer
This is the core `draw()` function from the original p5.js project that powers the full kaleidoscope effect, combining all the concepts you explored above.