Fractal Explorer

An interactive web application for visualizing mathematical fractals, starting with the famous Mandelbrot set and designed to expand to other fractal types.

The entire webapp is being written in Cursor with minimal manual code edits.

The easiest way to run this is to

git clone https://github.com/kkg4theweb/fractals-cursor.git
cd fractals-cursor
python3 -m http.server 8080

and then view the webapp @ http://localhost:8080

Features

Current Implementation

• Mandelbrot Set Visualization: High-quality rendering of the Mandelbrot set with customizable parameters
• Julia Set Visualization: Interactive Julia sets with preset patterns and custom parameter control
• Lyapunov Fractal Visualization: Stability analysis of chaotic systems using the logistic map
• Interactive Navigation: Click and drag to pan, scroll to zoom, double-click for quick zoom
• Multiple Color Schemes: Classic, Fire, Ocean, and Rainbow color palettes
• Real-time Parameter Control: Adjust iterations, zoom level, and color schemes with immediate feedback
• Responsive Design: Works on desktop and mobile devices
• Image Export: Download your favorite fractal views as PNG images
• Point Information: Click on the fractal to see mathematical details about specific points
• Keyboard Shortcuts: Arrow keys for panning, +/- for zoom, R to reset view

Technical Features

• Modular Architecture: Extensible design for adding new fractal types
• Async Rendering: Non-blocking calculations with progress indicators
• Performance Optimized: Efficient pixel manipulation and viewport management
• Fast Color Remapping: Instant color scheme changes without recalculation
• Web Workers Support: Multi-threaded calculation for improved performance
• Mathematical Precision: Accurate complex number calculations
• Cross-browser Compatible: Works with modern web browsers

Project Structure

fractals-cursor/
├── index.html              # Main HTML file with UI layout
├── styles.css              # Complete styling and responsive design
├── js/
│   ├── fractal-base.js      # Base class for all fractal implementations
│   ├── mandelbrot.js        # Mandelbrot set implementation
│   ├── julia.js             # Julia set implementation
│   ├── lyapunov.js          # Lyapunov fractal implementation
│   ├── worker-manager.js    # Web Workers coordination and management
│   ├── fractal-worker.js    # Web Worker script for fractal calculations
│   ├── renderer.js          # Rendering pipeline and canvas management
│   ├── controls.js          # UI controls and user interactions
│   └── main.js              # Application initialization and entry point
└── README.md               # This file

Getting Started

1. Clone or download this repository
2. Open index.html in a modern web browser
3. Start exploring! Use mouse/touch to pan and zoom, adjust parameters with the controls

Controls

• Mouse: Click and drag to pan, scroll wheel to zoom
• Touch: Drag to pan, pinch to zoom (mobile)
• Double-click: Quick zoom to mouse position
• Keyboard:
  • Arrow keys: Pan view
  • +/=: Zoom in
  • -: Zoom out
  • R: Reset to default view
  • D: Download current view as image

Julia Set Features

• Beautiful Presets: Dragon, Douady Rabbit, Siegel Disk, Spiral, Lightning, Fractal Tree, and more
• Real-time Parameter Adjustment: Fine-tune the complex constant c with precision sliders
• Random Generation: Discover new patterns with the random Julia set generator
• Seamless Switching: Toggle between Mandelbrot and Julia sets instantly

Lyapunov Fractal Features

• Multiple Sequence Patterns: Classic (AABAB), Simple (AB), Complex, Fibonacci, Symmetric
• Parameter Control: Adjust A and B values for the logistic map with precision sliders
• Custom Sequences: Create your own alternating patterns using A and B characters
• Stability Visualization: Blue regions show stability, red regions show chaos
• Mathematical Insight: Click points to see Lyapunov exponents and system behavior

Performance Features

• Web Workers: Utilizes multiple CPU cores for faster calculations
• Parallel Processing: Fractal regions calculated simultaneously across workers
• Smart Fallback: Gracefully handles browsers without Web Worker support
• Live Performance Monitoring: Real-time display of worker status and performance
• Optimized Calculation: Separates mathematical computation from visual rendering

Mathematical Background

Mandelbrot Set

The Mandelbrot set is defined as the set of complex numbers c for which the sequence:

z₀ = 0
zₙ₊₁ = zₙ² + c

does not diverge (remain bounded) when iterated indefinitely.

Julia Sets

Julia sets are closely related to the Mandelbrot set. For a fixed complex constant c, the Julia set is defined as the set of initial values z₀ for which the sequence:

zₙ₊₁ = zₙ² + c

does not diverge. Different values of c produce dramatically different Julia set patterns.

Lyapunov Fractals

Lyapunov fractals visualize the stability of chaotic systems by analyzing the logistic map:

x(n+1) = r * x(n) * (1 - x(n))

where the parameter r alternates between two values (A and B) according to a sequence pattern like "AABAB". The Lyapunov exponent λ determines stability:

• λ < 0: Stable (periodic) behavior
• λ > 0: Chaotic behavior
• λ ≈ 0: Edge of chaos

Points are colored based on how quickly they "escape" (when |z| > 2), creating the beautiful fractal boundary patterns.

Roadmap

Planned Features

• Julia Set implementation
• Lyapunov Fractal implementation
• Burning Ship fractal
• Newton fractal
• Sierpinski triangle
• Web Workers for improved performance
• Save/load fractal coordinates
• Animation features
• 3D fractal visualization

Performance Improvements

• WebGL rendering for faster computation
• Multi-threading with Web Workers
• Adaptive precision based on zoom level
• Tile-based rendering for large zoom levels

Technical Details

The application uses HTML5 Canvas for rendering and implements:

• Object-oriented design with inheritance for different fractal types
• Viewport management with mathematical coordinate transformation
• Optimized rendering pipeline separating calculation from color application
• Multi-threaded computation using Web Workers for parallel processing
• Automatic fallback to main thread when Web Workers unavailable
• Color scheme algorithms with HSL and RGB color space manipulation
• Event handling for mouse, touch, and keyboard interactions
• Asynchronous rendering to prevent UI blocking

Browser Compatibility

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Contributing

This project is designed to be easily extensible. To add a new fractal type:

1. Create a new class extending FractalBase
2. Implement the calculate() method with your fractal algorithm
3. Add the new fractal to the renderer's type selection
4. Update the UI controls if needed

License

This project is open source and available under the MIT License.