1. Overview & Mathematical Foundations
The Geometric Kaleidoscope Creator is a high-performance mathematical visualizer and dynamic symmetry studio built to explore the properties of 2D finite reflection groups—specifically the Dihedral Groups $D_n$. Named after Sir David Brewster's optical invention in 1816, a physical kaleidoscope relies on multiple planar mirror planes intersecting at dihedral angles $\theta = \frac{\pi}{n}$ to replicate a fundamental geometric domain throughout Euclidean space $\mathbb{R}^2$.
In this digital simulation engine, the discrete reflections and rotational transformations of the continuous orthogonal group $O(2)$ are calculated in real-time. The application combines interactive Cartesian coordinate mapping with an offscreen image-space rasterizer. Hand-drawn vector paths or procedural geometric splines generated in the primary quadrant are mapped synchronously across $2n$ symmetrical reflection sectors. Coupled with an optimized scanline flood fill engine and real-time frequency-modulated Web Audio sonification, the platform transforms abstract algebraic group theory into a tactile, multi-sensory educational environment.
3. Technical & Algorithmic Architecture
Dihedral Transformation Transformations
Every coordinate sample $P = (x, y)$ captured relative to the canvas origin $(x_c, y_c)$ is transformed across $n$ rotational angles $\alpha_k = k \cdot \frac{2\pi}{n}$ for $k \in \{0, 1, \dots, n-1\}$. For direct rotations and axial reflections across the radial bisector line, the transformation equations are expressed as:
$$P_{\text{rot}}(k) = \begin{bmatrix} \cos(k \theta_s) & -\sin(k \theta_s) \\ \sin(k \theta_s) & \cos(k \theta_s) \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix}$$
$$P_{\text{ref}}(k) = \begin{bmatrix} \cos(k \theta_s) & \sin(k \theta_s) \\ \sin(k \theta_s) & -\cos(k \theta_s) \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix}$$
These coordinate matrices map each stroke point to its corresponding $2n$ symmetric pairs, guaranteeing rigorous $C_{nv}$ symmetry across all canvas sectors.
Non-Recursive Scanline Stack Boundary Fill
To eliminate recursive stack overflows and unbounded array growth on large high-DPI canvas viewports, boundary coloring is executed via a memory-bounded scanline stack flood fill operating directly on the 32-bit integer buffer (`Uint32Array`). For a target seed pixel $(x_0, y_0)$ with initial color $C_{\text{target}}$ and replacement color $C_{\text{fill}}$:
Algorithm: SymmetricScanlineFloodFill(Origin, SeedPoint, FillColor, Symmetry_N)
1. Initialize stack S, push SeedPoint
2. For each sector k from 0 to N-1:
a. Compute RotatedSeed = Rotate(SeedPoint, k * 2π / N)
b. Compute ReflectedSeed = Reflect(SeedPoint, k * 2π / N)
c. Execute ScanlineSpanFill(RotatedSeed, FillColor)
d. Execute ScanlineSpanFill(ReflectedSeed, FillColor)
3. ScanlineSpanFill:
a. While S is not empty:
i. Pop (x, y) from S
ii. Find horizontal continuous span [x1, x2] matching TargetColor
iii. Fill span [x1, x2] with FillColor32
iv. Check lines y-1 and y+1 for unvisited span entries and push start indices to S
4. Commit modified buffer via lineContext.putImageData()
Synthesizer Polar Sonification Mapping
Cursor trajectories are converted from Cartesian $(x, y)$ to Polar coordinates $(r, \theta)$ where $r = \sqrt{x^2 + y^2}$ and $\theta = \operatorname{atan2}(y, x)$. The acoustic frequency $f(t)$ and modulation index $I_{\text{FM}}(t)$ are governed by:
$$f(t) = f_{\text{base}} \cdot 2^{\left(\frac{r(t)}{R_{\max}} \cdot 2.5\right)}, \quad I_{\text{FM}}(t) = 1.0 + 4.0 \cdot \left(\frac{|\theta(t)|}{\pi}\right)$$