Technical Specification: L-System Fractal Tree & Wind Simulator

Overview

A high-performance, browser-based procedural generation tool designed to render fractal trees using L-System grammar. The application combines mathematical precision with artistic wind-simulation effects, providing a clean, responsive interface for users to experiment with recursion and procedural art.

Core Features

• Real-time L-System Engine: A robust JS engine that parses custom axioms and production rules to generate complex branching geometry.
• Interactive Controls: Precision sliders to modify:
  • Recursion Depth (1-10 levels).
  • Branching Angle (0° to 180°).
  • Branch Length Decay factor.
• Dynamic Wind Simulation: A frame-based animation loop that applies trigonometric displacement to branches for realistic swaying.
• Export Functionality: A one-click export button to capture the current canvas state as a local PNG file.
• Instant Preview: Immediate canvas re-rendering upon parameter adjustment.

UI/UX Layout

• Header: Clean, minimal title bar with a brief application description.
• Sidebar (Control Panel): Fixed-width panel (300px) on the left (collapsible on mobile) containing:
  • Numeric inputs and sliders for L-System parameters.
  • Wind configuration settings.
  • Reset and Randomize buttons.
• Main Display: A central canvas container that occupies the remaining viewport, featuring a subtle grid background and anti-aliased tree rendering.

Design System & Aesthetics

• Palette: Pure Light Mode.
  • Background: #FFFFFF.
  • Sidebar/UI Panels: #F3F4F6 (Light Gray).
  • Primary Accent (Buttons/Active Sliders): #2563EB (Royal Blue).
  • Text: #111827 (Dark Gray).
• Typography: Sans-serif, human-readable fonts (e.g., Inter or system UI stacks).
• Micro-interactions: Smooth transitions on hover states, gentle slide animations for sidebar toggles, and immediate visual feedback when interacting with canvas parameters.

Developer Directives

1. Environment: Single HTML file architecture. All JS/CSS must be embedded internally.
2. Performance: Utilize requestAnimationFrame for the wind simulation loop. Ensure the tree generation logic is optimized to prevent UI thread blocking.
3. Storage: STRICTLY PROHIBITED. Do not use localStorage, sessionStorage, or cookies. Maintain state purely in variable memory.
4. Security: Ensure all external links use rel="noopener noreferrer".
5. Responsiveness: Use CSS Flexbox/Grid to ensure the canvas fills the available space correctly on mobile devices and desktops.
6. Export: Implement canvas-to-blob or toDataURL for the image export feature.