Quantum Doodle
work in progressDraw a quantum circuit the way you'd doodle on a notebook margin — and watch the state vector evolve in real time. A small protest against how textbook QM is taught.
the problem
Quantum mechanics is taught as a wall of bra-ket notation that hides what's actually happening: vectors rotating in complex space. Most of my classmates could pass exams without ever building intuition for why a Hadamard does what it does, or what a CNOT visually means. I wanted a tool that traded textbook precision for tactile intuition — gesture-based circuit drawing with the math running in the background.
the approach
- Drawing surface — p5.js canvas where users sketch quantum gates with simple gestures. Recognized shapes get snapped to circuit elements; freehand wires connect them.
- Simulation engine — a small from-scratch quantum simulator: state-vector representation, gate application via tensor products, measurement collapse. Kept the code readable enough that a curious physics student could open it and see the linear algebra.
- Visualization — WebGL renders the evolving state on the Bloch sphere for single-qubit and as a probability heatmap for multi-qubit cases.
a hard decision
Whether to use Qiskit's simulator (correct, fast, well-tested) or write my own. I went with my own, because the project's whole point is to expose the math, not to hide it behind an SDK. The simulator is slower and supports fewer gates than Qiskit, but it's also fully readable in 200 lines — which is the artifact I actually wanted.
what came out
A live demo at quantum-doodle.vercel.app — draw a Hadamard, draw a CNOT, watch superposition and entanglement happen visually. Useful for the "what does this gate actually do" question that textbooks never quite answer.
stack
javascript · p5.js · webgl · html5 canvas · custom quantum simulator