Home▸Quantum Computing▸2D Qubit & Bloch Circles

◯ 2D Qubit & Bloch Circles

A 2D companion to the Bloch sphere: two orthogonal great-circle projections of a real complex-amplitude qubit state, with live X/Y/Z/H/S/T gates, a continuous rotation gate and true |α|²/|β|² measurement bars.

Quantum Computing2DAdvanced60 FPS📱 Mobile-adapted⇄ 3D version

◯ 2D Qubit & Bloch Circles — Complex Amplitude Gates

A flat companion to the 3D Bloch sphere: the qubit's state vector is projected onto two orthogonal great circles (XZ and YZ), both driven by the same real complex-amplitude gate matrices. Apply Pauli X, Y, Z, Hadamard, S, T and a continuous Ry rotation, and watch both circles and the measurement bars update from the true amplitudes.

🔬 What It Demonstrates

Every single-qubit state |ψ⟩ = α|0⟩ + β|1⟩ maps to one point on the Bloch sphere; two orthogonal circle projections (XZ and YZ) together pin down all three Bloch coordinates without needing 3D rendering. A dashed inner circle shows how far the state sits along the axis coming out of each plane.

🎮 How to Use

Click gate buttons to apply them sequentially, or drag the Rθ slider and press Apply for a continuous rotation about the Y axis. Both circles animate together. The probability bars show |α|² and |β|² computed directly from the live complex amplitudes.

💡 Did You Know?

Two independent 2D projections are enough to reconstruct a 3D unit vector uniquely (up to reflection ambiguity resolved by the sign convention used here) — the same principle behind stereo photogrammetry and orthographic engineering drawings.

About this simulation

This is the flat, 2D companion to the 3D Bloch-sphere simulation. The qubit is still stored as a genuine complex amplitude pair [α, β] with |α|² + |β|² = 1, and gates are still applied as real 2×2 unitary matrices via real+imaginary matrix multiplication — nothing here is decorative. Instead of one 3D sphere, the Bloch vector (x, y, z) computed from those amplitudes is drawn as two orthogonal great-circle projections, XZ and YZ, so the full 3D orientation is visible using only flat canvas drawing.

🔬 What it shows

The state [α, β] evolves under real 4×4 matrices that encode the complex 2×2 gate unitaries acting on [αr, αi, βr, βi]. The Bloch vector is x = 2Re(αβ*), y = 2Im(αβ*), z = |α|²−|β|². Each circle plots two of those coordinates as a radius vector, with a dashed inner circle showing the magnitude of the third (depth) coordinate.

🎮 How to use

Click X, Y, Z, H, S or T to apply that gate. Drag the Rθ slider and press Apply for a continuous rotation about the Y axis (a real rotation matrix, not a discrete gate). Reset returns to |0⟩. Live panels show θ, φ, the α and β amplitudes, the P(|0⟩)/P(|1⟩) bars and a running gate history.

💡 Did you know?

Because Ry(θ) has only real entries, it never introduces an imaginary component on its own — it's the S and T gates that inject genuine complex phase into β, which is why the YZ circle only starts to move independently from a pure Ry sequence once a phase gate is used.

Frequently asked questions

How is this different from the 3D Bloch sphere simulation?

Both use the exact same complex-amplitude state and the exact same gate matrices. The only difference is the display: the 3D version renders one sphere with WebGL, while this version projects the same Bloch vector onto two flat, orthogonal great circles (XZ and YZ) drawn with plain 2D canvas, so no 3D rendering is required to see the full orientation.

Why are two circles needed instead of one?

A single 2D projection of a 3D vector loses one coordinate. Showing the XZ projection and the YZ projection together recovers all three Bloch coordinates (x, y, z), because each circle shares the z-axis with the other and each contributes one of the two remaining axes.

What does the dashed inner circle mean?

It shows the magnitude of the coordinate that plane cannot display directly — the y-component for the XZ circle, and the x-component for the YZ circle. A dashed circle near the outer edge means the state points mostly out of that plane; a small dashed circle means it lies almost within it.

What does the continuous Rθ rotation do?

Ry(θ) is the real 2×2 rotation matrix cos(θ/2)·I − i·sin(θ/2)·σy applied as a real-valued matrix on [α, β] (its entries have no imaginary part), continuously sweeping the Bloch vector around the Y axis by the angle you choose, unlike the fixed 90°/180° rotations of the named gates.

Is the underlying math the same as real quantum computing?

Yes. The state is a true 2-component complex vector with |α|² + |β|² = 1, gates are the standard unitary matrices for X, Y, Z, H, S and T, and the measurement probabilities are the exact |α|² and |β|² Born-rule values. As with the 3D version, measurement collapse and physical noise are not modelled — only the ideal unitary evolution.

⚙ Under the hood

A 2D companion to the Bloch sphere: two orthogonal great-circle projections of a real complex-amplitude qubit state, driven by genuine 2x2 unitary gate matrices. Apply X, Y, Z, H, S, T and a continuous rotation gate and watch both circles and the |α|²/|β|² measurement bars update live.

quantumqubitbloch-spherequantum-gatescomplex-numberslinear-algebra2d

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install