Fractal Zoom

An interactive, GPU-accelerated fractal viewer built with WebGL2 and GLSL. Explore Mandelbrot, Julia, Burning Ship, Newton, and Sierpinski fractals with smooth zooming, panning, and real-time color animation.

Features

• 5 Fractal Types: Mandelbrot, Julia, Burning Ship, Newton, and Sierpinski Triangle
• GPU-Accelerated Rendering: WebGL2 fragment shaders for escape-time fractals; Canvas 2D for Sierpinski
• Smooth Iteration Coloring: Logarithmic escape smoothing for artifact-free gradients
• Interactive Navigation:
  • Scroll wheel to zoom (1.15x multiplier per scroll)
  • Click and drag to pan the viewport
  • Touch pinch-to-zoom support
  • Crosshair indicator at screen center
• Muted Color Schemes: Cool, Warm, Grayscale, Neon, and Sunset palettes with adjustable iteration count
• Grid Overlay: 10px grid with intersections aligned to screen center
• Responsive Design: Works on desktop and mobile browsers with glassmorphism UI

Getting Started

Local Development

npm install
npm run dev

Open http://localhost:5173 in your browser.

Build for Production

npm run build

Output goes to dist/. Deploy the dist/ folder to any static hosting service.

Usage

• Switch Fractals: Click the fractal name buttons in the left panel
• Adjust Iterations: Use the slider to increase detail (higher = slower)
• Julia Parameters: When Julia is active, use the sliders to explore the parameter space
• Reset View: Click the reset button to return to the default zoom and center
• Toggle Grid: Use the grid toggle to show/hide the overlay

Project Structure

src/
├── fractals/           # Fractal configurations and types
│   ├── mandelbrot.ts
│   ├── julia.ts
│   ├── burning-ship.ts
│   ├── newton.ts
│   ├── sierpinski.ts
│   ├── index.ts
│   └── types.ts
├── renderer/           # Rendering engines
│   ├── WebGLRenderer.ts
│   ├── CanvasRenderer.ts
│   └── shaders/        # GLSL fragment shaders
│       ├── mandelbrot.glsl
│       ├── julia.glsl
│       ├── burning-ship.glsl
│       └── newton.glsl
├── interaction/        # User input handling
│   ├── ZoomController.ts
│   └── __tests__/
│       └── ZoomController.test.ts
├── ui/                 # UI components
│   └── Panel.ts
├── style.css
├── main.ts
└── index.html

Technologies

• Vite — Fast build tool and dev server
• TypeScript — Type-safe JavaScript
• WebGL2 — GPU-accelerated rendering
• GLSL — Fragment shader programs
• Canvas 2D — CPU-rendered Sierpinski triangle
• Vitest — Unit testing framework

Testing

npm test

Tests cover coordinate transformation logic for screen-to-fractal space conversion.

Color Schemes

All fractals use cosine-based palettes (Inigo Quilez style) with these schemes:

• Cool (default): Blues and purples
• Warm: Oranges, reds, and yellows
• Grayscale: Monochrome
• Neon: Bright, high-contrast
• Sunset: Orange to pink to purple

Colors animate smoothly over time via sin(u_time) modulation.

Performance Notes

• Zoom is exponential (1.15x per scroll unit) for smooth navigation
• Iteration smoothing uses log₂(log₂(|z|)) for artifact-free boundaries
• Grid rendering uses shader modulo with driver-compatibility offsets
• Mobile: Touch pinch-to-zoom provides native-feeling interaction

Browser Support

Requires WebGL2 support (all modern browsers). Tested on:

• Chrome/Edge 90+
• Firefox 88+
• Safari 15+
• Mobile Chrome/Safari

License

MIT