L-System Fractal Plant Growth Simulator: Technical Specification

Overview

A high-performance, browser-based utility for generating, visualizing, and exporting recursive botanical fractal structures using L-System (Lindenmayer system) grammars. Designed for educators, designers, and generative art enthusiasts.

Core Features

• Live Syntax Interpreter: A text-based input field for defining axioms and recursive production rules with real-time validation.
• Dynamic Fractal Rendering: Uses HTML5 Canvas API to render complex recursive strings with high-performance stroke drawing.
• Interactive Parameters:
  • Iteration Depth: Control the level of recursion (limit enforced to prevent browser hangs).
  • Angle Adjustment: Precise control over rotation degrees for branch divergence.
  • Visual Styling: Controls for stroke color, line weight, and background transparency.
• Preset Library: One-click loading of classic fractals (e.g., Sierpinski, Koch Snowflake, Pythagoras Tree, Dragon Curve).
• High-Quality Export: Capability to render the canvas as a PNG/JPG image file for use in other projects.

UI/UX Layout

• Header: Simple title and a 'Clear Canvas' / 'Download Image' action bar.
• Main Viewport: A responsive, full-width or side-by-side canvas area providing maximum room for the rendered fractal.
• Configuration Sidebar (Left/Top):
  • Input Sections: Axiom (e.g., F), Rules (e.g., F=F+F-F).
  • Sliders: Angle, Length, Depth, Stroke Thickness.
  • Visual Toggles: Toggle for automatic updates, canvas background color picker.
• Theme: Professional SaaS aesthetic. White (#FFFFFF) background, soft gray (#F8F9FA) panels, subtle border-radius (8px) on all UI components, and clean sans-serif typography.

Technical Implementation Constraints

• Single-File Requirement: All HTML, CSS, and JavaScript must reside in one single file. Tailwind CSS via CDN is recommended for layout styling.
• Memory & Storage: STRICTLY NO localStorage, sessionStorage, or IndexedDB. State management must reside purely in JavaScript variables.
• Performance: Rendering logic should be optimized using requestAnimationFrame. Long-running fractal recursion must be throttled or debounced to maintain browser responsiveness.
• No External Dependencies: No backend, no API calls, no third-party frameworks like React/Vue. Vanilla JS only.
• Sandboxed Compatibility: The app must function within a sandboxed iframe. Do not use alert(), confirm(), or prompt(). All user notifications and dialogues must be custom-built DOM elements.

Design Philosophy

• Colors: Use a cool, professional palette (e.g., Slate blue #475569 for text, Indigo #6366f1 for buttons, clean White/Gray for backgrounds). No dark mode.
• Transitions: Use CSS transition: all 0.2s ease for all interactive elements. Controls should have subtle hover states (e.g., lighten or change border color).
• Visual Feedback: Provide a clean loading spinner (CSS animation) when a high-iteration fractal is rendering to ensure the user knows the process is active.