Overview
The Geometric Kaleidoscope Creator is an interactive web application designed to demonstrate dynamic, multi-axial radial symmetry. By integrating real-time mouse or touch coordinates with an internal coordinate projection engine, the system processes hand-drawn paths and projects them symmetrically across up to 12 reflection lines. The tool offers two creative phases: Draw Mode, which tracks vector trajectories in real time, and Color Mode, which applies a fast, pixel-level queue boundary flood fill to color enclosed spaces and their corresponding symmetrical segments.
How to Use
- Radial Symmetry Configurations: Adjust the Symmetry Matrix slider below the canvas to set the desired reflection density (selectable between 2 and 12 reflection segments).
- Vector Path Drawing: Ensure the interactive selector is set to Draw Mode. Choose an active color swatch from the bottom palette. Click and drag within the canvas space to draw. Symmetrical strokes will render in real time.
- Boundary Coloring: Switch the workspace configuration to Color Mode. Click or tap inside any fully closed geometric segment. The application automatically calculates boundaries, filling the chosen compartment and all of its reflection segments with the active color.
- Synthesizer & Theme: Press Sound OFF to activate the Tone.js audio engine, which matches coordinates and speeds to custom synthesizer parameters. Toggle Dark Mode to dynamically switch the UI theme and adjust drawing lines for visibility.
- Simulation Reversion: Click the Undo Step button to step back through changes, or select Reset Simulation to clear all variables and return parameters to their default settings.
Technical Details
This software platform uses an HTML5 double-buffered canvas system to separate rendering pathways. Canvas interaction coordinates are captured via unified Pointer Events and translated into center-offset vectors. Reflection operations are calculated using standard 2D rotation matrix transformations:
x' = x * cos(θ) - y * sin(θ) y' = x * sin(θ) + y * cos(θ)
To avoid browser call stack limit issues, the Color Mode uses an optimized, non-recursive, queue-based flood fill algorithm. It acts directly on the canvas image data array via CanvasRenderingContext2D.getImageData(), evaluating pixel values on a single thread inside a 200ms INP execution window. Live sonification relies on Tone.js and the Web Audio API to map cursor position offset values to frequency-modulated carrier waves.
Future Directions
The system is designed with an adaptable framework to accommodate future visual upgrades, including:
- SVG Vector Conversions: An integrated export module translating path structures directly into standard vector graphic formats.
- Translating Pivot Points: Customizable anchors allowing users to relocate the origin coordinate offset away from the direct center of the canvas window.
- GPU Fragment Shaders: WebGL implementation for rendering neon glowing paths, trails, and chromatic aberration.
- Live Video Capture: Directly record animations into localized container formats using the MediaRecorder API.