Mandelbrot.site

Mandelbrot.site is an interactive fractal viewer that runs in the browser. It offers a fast and intuitive way to explore the Mandelbrot set and share your discoveries. Built with Rust, WebAssembly, TypeScript, and Leaflet.js.

Features

Mandelbrot.site offers a variety of features to enhance your experience:

• Zoom in by scrolling or selecting a region.
• Adjust the detail level by modifying the iteration count or resolution.
• Explore multibrot sets by changing the exponent parameter.
• Download high-resolution images of your view.
• Customize your experience with different color palettes.
• View and update viewport coordinates on the complex plane.
• Generate URLs to share your favorite views.

Gallery

Explore some stunning images generated with Mandelbrot.site:

Explore more images

Architecture

Mandelbrot.site is built using modern web technologies to deliver a high-performance, interactive tool for exploring fractals. The computational backend is implemented in Rust, chosen for its performance and safety features. This Rust code is compiled to WebAssembly (Wasm) using the wasm-pack plugin, enabling high-speed computations directly in the browser. On the frontend, the user interface is crafted with TypeScript, enhancing code quality and maintainability. Leaflet.js is creatively adapted to render the Mandelbrot set tiles in a zoomable, map-like interface.

For performance optimization, Mandelbrot.site employs Web Workers via the threads.js library. This setup prevents intensive computations from blocking the main browser thread by creating a pool of workers that handle the generation of Mandelbrot set tiles in parallel. A key optimization technique used is "rectangle checking," which saves computation time for areas entirely within the set by checking only the perimeter of a tile.

This robust architecture ensures that Mandelbrot.site provides a seamless and responsive experience for users exploring the intricate details of the Mandelbrot set directly in their web browser.

Development

This project requires Node.js to be installed on your system. Check the .nvmrc file for the recommended Node.js version.

Commands

To set up and run the project on your local environment, navigate to the client directory and use the following commands.

• Install dependencies: npm install
• Build the project: npm run build
• Start development server: npm run dev
• Preview production build: npm run serve
• Check for type errors: npm run typecheck
• Identify code issues: npm run lint
• Format the code: npm run format
• Run Rust tests: npm run test
• Cleanup: npm run clean - removes caches and build artifacts

Project Structure

• Mandelbrot set implementation: mandelbrot/src/lib.rs
• Rust unit tests: mandelbrot/src/lib_test.rs
• TypeScript entry point: client/js/main.ts

Contributors

Many thanks to the following contributors who have helped shape this project:

Avatar	Name	GitHub Profile
	Ross Hill	rosslh
	Joseph Weissman	jweissman
	Shubhankar Shandilya	shubhankar-shandilya-india

Want to contribute? Check out the list of open issues!