Quantum logic gates for a single qubit, interactively

Drag and drop quantum gates to see how they act on a qubit.

Claudia Zendejas-Morales http://claudiazm.xyz (Quantum Flytrap)https://quantumflytrap.com , Piotr Migdał https://p.migdal.pl (Quantum Flytrap)https://quantumflytrap.com

Quantum computers use quantum physics to perform computation. They use phenomena such as superposition and entanglement that make it possible to use more powerful algorithms than in classical computing (Nielsen and Chuang 2000). In classical computing, we use the electric signal as the carrier of information. In quantum, we use various implementations, including the polarization of light, the spin of ions, and the states of superconductors.


In classical computing, the basic unit is a bit - 0 or 1. In quantum computing, the basic unit is a qubit. Instead of just two values, we have a vector with two components. In this article, we explore what a single qubit is, and what are the quantum computing operations:

\[|0\rangle = \begin{bmatrix} 1\\ 0 \end{bmatrix} \hspace{1cm} |1\rangle = \begin{bmatrix} 0\\ 1 \end{bmatrix}\] In general, a qubit can be any superposition of \(|0\rangle\) and \(|1\rangle\) - that is

\[|\psi\rangle=\alpha|0\rangle +\beta|1\rangle\]

where \(\alpha\) and \(\beta\) are complex numbers, that is numbers \(z = x + i y\), were \(x\) and \(y\) are real numbers and \(i\) is an imaginary unit \(i^2=-1\). Here are a few common states:

\[|+\rangle=\frac{|0\rangle+|1\rangle}{\sqrt{2}} \hspace{1cm} |-\rangle=\frac{|0\rangle-|1\rangle}{\sqrt{2}}\]

\[|\!\circlearrowleft \rangle=\frac{|0\rangle+i|1\rangle}{\sqrt{2}} \hspace{1cm} |\!\circlearrowright\rangle=\frac{|0\rangle-i|1\rangle}{\sqrt{2}}\]

If complex numbers are new to you - don’t worry. First, many interesting quantum states, operators, and phenomena can be described without complex numbers. Second, complex numbers are important and fun on their own.

Operations on a qubit

Instead of classic logic gates, we use quantum logic gates. How do they work? These are \(2 \times 2\) matrices, changing the state via matrix-vector multiplication

\[|\psi_{new}\rangle = M |\psi\rangle\] or showing all complex parametrs: \[\begin{bmatrix} \alpha_{new} \\ \beta_{new} \end{bmatrix} = \begin{bmatrix} m_{00} & m_{01}\\ m_{01} & m_{11} \end{bmatrix} \begin{bmatrix} \alpha \\ \beta \end{bmatrix}\]

Let us pick a state and a quantum gate!

1. Pick a state

2. Pick a gate

3. Check the result

Quantum gates

Only identity (\(I\)) and negation (\(X\)) are the same in classical and quantum computing. All other gates are specific to quantum computing. For example, Hadamard gate (\(H\)), while having only real numbers, is enough to show the difference between \(|+\rangle\) and \(|-\rangle\) states (check it!). Another interesting gate is the square root of negation (\(\sqrt{X}\) or \(\sqrt{NOT}\)). If we apply it twice, we get a negation. Don’t worry - later in this post, you will be able to compose gates. So, what are the most typical gates?

I (Id, 𝟙, identity)
X (Pauli-X, NOT)
Y (Pauli-Y)
Z (Pauli-Z, 1/2 phase shiift)
H (Hadamard gate)
S (1/4 phase shift)
T (1/8 phase shift)
√X (square root of NOT)

Quantum circuits

Quantum gates can be composed. In a conventional matrix notation, we read from right to left. That is, \(X \;H \; Z \; |0\rangle\) means that we start with state \(|0\rangle\), then apply \(Z\) gate, then \(H\), then \(X\). I It is a historic notation that is going to stay here. While in quantum circuits, we use a typical left to right notation, for the sake of this visualization, we use the matrix notation.

You can interact with various sequences of gates in the section below. Drag the gate you want to apply to the selected gate area. To delete a gate from that area, drag it to the trash area. You can pick any input state from the gauges. It uses a general parametrization of:

\[|\psi\rangle = \cos\left(\tfrac{\theta}{2}\right) \; |0\rangle + e^{i\phi} \; \sin\left(\tfrac{\theta}{2}\right) \; |1\rangle\]

If you want to avoid complex values, use \(\phi=0\) (for positive values) or \(\phi=\pi\) (for negative values).

Observe how the state changes according to the applied gates. In BraKetVue, we use colors to denote phase of complex numbers(Petrisor 2019; Migdał 2014b) and (Migdał 2014a) for an implementation for QuTiP.

Pick any state and compose a circuit


This post is a part of the quantum computing series by Quantum Flytrap. We wrote it using Distill for R Markdown - a style based on the Distill journal. This article uses:

These libraries are open source (MIT), as well as this post (CC-BY). The source to this post is here. We believe in an open, contributive culture.

Stay tuned for our next posts! The easiest way to do so is to follow our Twitter account.

Migdał, Piotr. 2014a. “QuTiP Example: Qubism Visualizations.” 2014. https://nbviewer.jupyter.org/github/qutip/qutip-notebooks/blob/master/examples/qubism-and-schmidt-plots.ipynb.

———. 2014b. “Symmetries and Self-Similarity of Many-Body Wavefunctions, Chapter 3.” PhD thesis, ICFO – The Institute of Photonic Sciences. https://arxiv.org/abs/1412.6796.

Nielsen, Michael A., and Isaac L. C. Chuang. 2000. Quantum Computation and Quantum Information. Cambridge University Press.

Petrisor, Emilia. 2019. “Visualizing Complex-Valued Functions with Matplotlib and Mayavi: Domain Coloring Method.” 2019. https://nbviewer.jupyter.org/github/empet/Math/blob/master/DomainColoring.ipynb.



Text and figures are licensed under Creative Commons Attribution CC BY 4.0. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: "Figure from ...".