Mandelbrot WASM Renderer

Overview

This is a Mandelbrot fractal renderer that runs entirely in the browser via WebAssembly compiled from Rust. No server, no API — just pure math rendered at native speed.

The WASM module handles the pixel-level computation: for each pixel on the canvas, it iterates z = z² + c and maps the escape iteration to a smooth color gradient. The JavaScript layer handles canvas rendering, mouse events for zoom/pan, and the UI controls.

Architecture

portfolio/
├── wasm-demos/fractal/        # Rust crate
│   ├── Cargo.toml
│   └── src/lib.rs             # Mandelbrot renderer (wasm-bindgen)
├── public/wasm/fractal/       # Compiled output (JS glue + .wasm binary)
└── src/components/projects/
    ├── WasmDemo.astro          # Generic WASM loader component
    └── FractalDemo.astro       # Fractal-specific controls + rendering

Technical details

Rendering pipeline:

1. Rust computes a raw RGBA pixel buffer (800×500 = 1.6M pixels per frame)
2. Uses web_sys::ImageData to write directly to the canvas
3. Smooth coloring via the normalized iteration count algorithm

Interaction:

• Scroll to zoom (keeps point under cursor fixed)
• Click-drag to pan
• Iteration slider adjusts detail vs. performance

Build:

npm run build:wasm    # wasm-pack build --target web
npm run build         # astro build (includes the WASM output as static assets)

Why this exists

This project demonstrates that computationally intensive Rust code can run in the browser at interactive speeds — no rewrite to JavaScript required. The same Rust code that generates fractals on the command line produces identical output in the browser, compiled once via wasm-pack.

The zoom/pan responsiveness you see is the WASM advantage: the Mandelbrot escape-time loop runs at near-native speed, completing 400,000 iterations per frame in milliseconds.