Technical Specification: Fractal Geometry & Chaos Game Visualizer

Overview

This application is a high-performance, browser-based tool for rendering complex fractal geometries using Lindenmayer Systems (L-Systems) and the Chaos Game algorithm. The application focuses on real-time visual feedback, educational clarity, and a clean, high-contrast aesthetic suitable for classrooms, creative experimentation, and personal exploration.

Core Features

1. Fractal Engines

• L-System Generator: Users can input custom axioms, production rules, angle increments, and recursion depth to generate unique fractals.
• Chaos Game Simulator: Interactive mode allowing users to define polygon vertices (triangle, square, pentagon, etc.) and movement ratios (e.g., 0.5 for Sierpinski) to visualize emergent patterns.

2. Interactive Rendering Canvas

• Real-Time Preview: The canvas updates dynamically as parameters are adjusted.
• Zoom & Pan: Intuitive controls for inspecting fractal detail.
• Export: High-quality PNG download capability using HTML5 Canvas toDataURL.

3. Preset Library

• A selection of ready-to-load patterns, including: Sierpinski Triangle, Koch Snowflake, Dragon Curve, and Hilbert Curve.

UI/UX Design

• Layout:
  • Header: Minimal title and quick-action bar (Export, Share, Help).
  • Sidebar (Left): Context-aware control panel for adjusting mathematical variables (Recursion Level, Angle, Rules, Vertex count).
  • Main Area: Large, responsive HTML5 canvas for the render.
• Color Palette: Professional light-mode aesthetic.
  • Background: #F8FAFC (Cool Gray)
  • Primary Accent: #2563EB (Vibrant Blue for interaction buttons)
  • Text: #1E293B (Dark Slate)
  • Borders: #E2E8F0 (Subtle Gray)
• Animations: Subtle transition effects on input sliders and toggle switches to ensure a tactile, responsive feel.

Technical Implementation Constraints

• Single File: All HTML, CSS, and JS must be within one file.
• No Frameworks: Vanilla JavaScript and HTML5 Canvas only.
• Sandboxing Compatibility:
  • Do NOT use localStorage, sessionStorage, or cookies.
  • All modals (about, settings) must be CSS-based overlays.
  • No external pop-up or confirm dialogues.
• Performance: Ensure the loop is optimized; use requestAnimationFrame for smooth updates.

Development Directives

1. Use a standard CSS reset to ensure consistent font and layout across browsers.
2. Ensure all UI elements are touch-target compliant for mobile accessibility.
3. The application must initialize in a clean state with no persistent data loading.
4. All external fonts or icons must be loaded via secure CDNs with rel="stylesheet".