Inspiration
I have always been fascinated by the boundary where abstract mathematics becomes visible beauty. Fractals were my first glimpse of that bridge years ago, zooming videos of the Mandelbrot set felt like exploring an alien cosmos generated by a compact iterative rule. Lately I have also been intrigued by quantum randomness: the idea that some numbers are not pseudo‑generated but literally sampled from physical indeterminacy. Quantum Canvas grew from a simple question: what if I blend mathematically deterministic fractal equations with genuine quantum entropy to influence color palettes, sampling paths, mutation seeds, or exploration heuristics? Could that produce subtly more organic, less “machine‑regular” outputs, and provide an educational gateway to both complex dynamics and quantum tech?
What it does
I built a web application that lets users generate, explore, and export fractal imagery (and derivative NFT‑style assets) enhanced by optional quantum randomness.
Core capabilities:
- Generate classical sets: Mandelbrot, Julia variants, Burning Ship, experimental hybrids.
- Inject quantum randomness (via a QRNG fetch layer) into color gradients, orbit sampling jitter, and controlled bailout variance.
- Real‑time progress visualization with a responsive Astro + Tailwind UI.
- Export high‑resolution images and a structured metadata bundle suitable for NFT minting.
- Python back end fractal engine callable through serverless endpoints, orchestrated alongside a TypeScript front end.
How I built it
I structured the project as a hybrid stack:
- Mathematics & Algorithms (Python): Core iteration loops for multiple fractals. The canonical Mandelbrot iteration is: $$ z_{n+1} = z_n^2 + c,\qquad z_0 = 0,\quad c \in \mathbb{C} $$ For Burning Ship I apply absolute values to real and imaginary parts before squaring; for Julia sets I fix \( c \) and vary \( z_0 \).
- Performance tweaks: Progressive row batching so I can stream partial image data; selective vectorization while keeping code clarity.
- Quantum randomness layer: A module that queries a quantum hardware RNG (or falls back to a CSPRNG) and pools bits. I derive deterministic PRNG seeds from quantum bytes to balance unpredictability with reproducibility.
- API surface: Serverless handlers for start, progress, and export. JSON contracts include bounds, max iterations, palette seed, job id, and progress ratio.
- Front end: Astro pages with interactive controls (resolution, palette, fractal type). Tailwind CSS for layout; small reusable components (progress bar, tooltip).
- Deployment: Vercel (Astro adapter,
output: 'server') serving both static assets and serverless endpoints. - Color pipeline: Gradient generation in OKLab space; constrained quantum perturbations to maintain perceptual smoothness.
Challenges I ran into
- Serverless artifact mismatch: Vercel initially looked for
dist/server/entry.mjswhile the adapter output lived under its own function bundle. Committed build artifacts led Vercel to reuse stale outputs. Fix: ignore.vercel/, simplify config, allow a clean build. - Type definition noise: Missing
astro/client, Node, and test framework types cluttered the editor until dependencies were aligned. - Determinism vs quantum entropy: Pure quantum injection eliminated reproducibility. Solution: quantum‑derived seed feeding deterministic streams with the seed logged.
- Serverless timeouts: Large (e.g. 8K) renders risked exceeding execution time. Implemented tiling + progressive accumulation.
- Palette stability: Unbounded quantum jitter produced muddy results; constrained deltas in OKLab and applied smoothing.
- Latency of QRNG calls: Implemented batch prefetch and caching to amortize network overhead.
Accomplishments that I'm proud of
- A clean UI that still exposes advanced parameters without overwhelming first‑time users.
- Meaningful integration of quantum entropy beyond a gimmick.
- Fast perceived responsiveness via progressive rendering and real‑time progress updates.
- Modular fractal definitions allowing quick addition of new iterative formulas.
- A reproducibility model (quantum‑seeded PRNG) that is both explainable and intriguing.
What I learned
- The importance of not committing platform output directories to avoid misinterpreted builds.
- Inner workings of the Astro + Vercel adapter (routing, function bundling, server output).
- Techniques for blending true randomness with deterministic algorithms while preserving replayability.
- Practical color science: OKLab perturbations outperform naive RGB adjustments for maintaining gradient quality.
- Value of explicit, versioned API contracts for front end / back end synchronization.
- Strategies for streaming partial computational results in a serverless context.
What's next for Quantum Canvas
- Deep zoom with arbitrary precision arithmetic (possibly offloading to a Rust WASM or worker layer).
- Buddhabrot and orbit trap render modes with GPU acceleration (WebGL/WebGPU).
- Enhanced quantum layer: entropy batching, live “refresh quantum influence” control mid‑render.
- Shareable gallery: parameter + quantum seed hashes for reproducible exploration.
- Advanced export: vector contour approximations, animated zoom sequences, multi‑frame interpolation.
- Educational overlays: stepwise iteration visualizers, escape time derivations, and phase portraits.
- Parallel job orchestration: distributing tiles across multiple serverless invocations with merge reconciliation.
I built Quantum Canvas as a playground where rigorous math, emergent visuals, and frontier randomness intersect. There is still vast unexplored visual territory—and I am excited to keep iterating.
# Minimal illustrative (non-production) Mandelbrot line
def iterate(c, max_iter):
z = 0+0j
for n in range(max_iter):
if (z.real*z.real + z.imag*z.imag) > 4: return n
z = z*z + c
return max_iter
Inline math example: The escape condition checks whether \( |z_n|^2 = \Re(z_n)^2 + \Im(z_n)^2 > 4 \).
Built With
- astro
- ibm-quantum
- javascript
- node.js
- python
- qiskit
- tailwindcss
- typescript
Log in or sign up for Devpost to join the conversation.