An interactive visualization exploring the mathematical beauty of recursive yin-yang patterns in both 2D and 3D space.
The "Yin-Yang fractal" is a modern mathematical and artistic construct that emerged from the fractal art community in the late 20th/early 21st century. While the traditional yin-yang symbol dates back to ancient Chinese philosophy, this fractal interpretation is a contemporary creation—its exact origin remains undocumented, existing as what might be called a "secret artist's symbol" within mathematical art circles.
This project provides an interactive exploration of this fascinating pattern, allowing you to observe its recursive self-similar structure through both 2D canvas rendering and 3D Three.js visualization.
- 2D Canvas Rendering: Classic flat visualization with smooth rotation animation
- 3D Three.js Visualization: Interactive 3D representation with mouse controls
- Click and drag to rotate the structure
- Scroll to zoom in/out
- Wireframe rendering for visual clarity through recursive layers
- Adjustable Rotation Speed: Control the animation speed with a slider
- Deep Recursion: Explores up to 7-8 levels of self-similar nesting
This fractal demonstrates several key mathematical concepts:
- Self-similarity: Each small circle contains a complete yin-yang pattern, recurring infinitely
- Recursive geometry: The pattern is defined by a simple recursive rule applied at multiple scales
- Circular symmetry: The construction maintains rotational properties throughout its recursive depth
- Complementary duality: The black/white (or opaque/transparent) relationship preserves philosophical balance at every scale
For a detailed mathematical analysis, see MATHEMATICAL_ANALYSIS.md.
Open fractal_yin_yang.html in any modern web browser to run the visualization locally.
- Three.js r128 (loaded via CDN)
- Modern browser with Canvas and WebGL support
- 2D Implementation: Uses HTML5 Canvas 2D context with recursive drawing functions
- 3D Implementation: Three.js with hemisphere geometries and recursive group hierarchies
- Recursion Depth: Configurable, currently set to 7-8 levels
- Materials: Wireframe rendering in 3D for transparency and visual depth
- Clone the repository:
git clone https://github.com/BlueberryMathematics/fractal-yin-yang.git
cd fractal-yin-yang- Open the HTML file:
open fractal_yin_yang.html
# or simply open it in your browser- Interact with the visualization:
- Click the "2D Canvas" or "3D Three.js" buttons to switch modes
- Adjust the rotation speed slider
- In 3D mode: drag to rotate, scroll to zoom
The 2D version uses a recursive function that:
- Draws a circle split into black and white halves
- Draws two smaller circles (upper and lower) of complementary colors
- Recursively calls itself within each smaller circle
The 3D version creates:
- Black and transparent hemispheres forming the main sphere
- Upper and lower smaller spheres with the same hemisphere pattern
- Recursive nested groups positioned at each smaller sphere's location
- Each nested level rotates independently (except the root)
Contributions are welcome! Whether it's:
- Mathematical analysis and improvements
- Performance optimizations
- Additional visualization modes
- Documentation of the historical origins of this pattern
Please feel free to open issues or submit pull requests.
- Reddit: Yin Yang Fractal
- Three.js Documentation
- Traditional yin-yang philosophy and I Ching symbolism
MIT License - See LICENSE file for details
This project explores a pattern that emerged from the fractal art community. While the exact discoverer remains unknown, it represents a beautiful intersection of ancient symbolism, modern mathematics, and computational art.
Note: If you have information about the origin or early history of the yin-yang fractal pattern, please consider contributing to the documentation or opening an issue to share your knowledge.