Preface
To understand the mathematical notations in this document, you may want to have a look at the summary of mathematical notations and conventions before reading on.
Introduction
The Bloch sphere application implements an interactive geometrical visualization of a two-level quantum system. It visualizes the state of a two-level quantum system by representing it as a 3D arrow or a 3D flagpole. One example of a quantum system, which can be visualized this way, is the polarisation state of a single photon.
The Bloch sphere representation is named after the physicist Felix Bloch. It is particularly important, because it provides a geometrical interpretation of state transformations. Each physically allowed state transformation can be described as a rotation of the Bloch sphere.
Feature Overview
The application’s user interface visualizes the state of a two-level quantum system in two different ways:
- On the left-hand side, it is visualized as two circles representing the state vector consisting of two complex numbers.
- On the right-hand side, it is visualized by one (or two) arrows in 3D space. The one-arrow version is the “standard” Bloch sphere representation. The two-arrow version is an extended version, which is also called flagpole representation. The second arrow can be activated by the checkbox show total phase. While the one-arrow version can’t represent the total phase of the state, the two-arrow version does.
Above these visualizations, there are buttons to modify the state:
- The buttons on the left-hand side perform state transformations, which are closely related to the visualization on the left-hand side, e.g. changing the weight factors of the complex numbers or changing their phase angles.
- The buttons on the right-hand side perform state transformations, which can be described as rotations of the 3D arrow(s). The tool supports rotations around the x, y, z, and “Hadamard” axes by various angles. (The “Hadamard” axis is \((\vec{x} + \vec{z}) / \sqrt{2}\)).
Arrow vs. Flagpole Representation
The “normal” Bloch sphere visualization represents a state vector as a point on a sphere. For better visualization, this point is often visualized by an arrow starting at the center of the sphere and ending at the point on the sphere surface. From this point of view, a state vector is visualized by a direction in 3D space.
This “normal” Bloch sphere visualization can’t represent the total phase of the state vector. For this reason, the Bloch Sphere application supports an extended visualization, the so-called flagpole visualization. It can be enabled by clicking the checkbox “show total phase”. When this option is activated, the total phase is visualized as well, leading to an “almost” complete representation of the state vector.
A flagpole is a 3D arrow, which has an additional flag attached to it, whose direction is always perpendicular to the 3D arrow. (See the picture in the next section.) The flag visualizes the roll angle of the 3D arrow, i.e. the change, when the 3D arrow is rotated around its own axis. In other words: A 3D arrow only represents a direction in 3D space, whereas a flagpole represents an orientation in 3D space.
Please note that there is no real flag in the application’s visualization. Instead, the flag direction is just visualized by a second (green) 3D arrow. I nevertheless use the flagpole terminology here, because it is clearer than talking about “the first arrow” and “the second arrow”.
Definition of the Flagpole Orientation
How can we specify the orientation of a flagpole? It can be specified by three angles, which are called direction angle, inclination angle, and flag angle.
| Symbol | Name used in this readme | Other names | Value range |
|---|---|---|---|
| \(\varphi\) | (horizontal) direction angle | azimuthal angle, yaw angle |
0° … 360° |
| \(\theta\) | inclination angle | polar angle, pitch angle |
0° … 180° |
| \(\alpha\) | flag angle | roll angle | 0° … 720° (0° … 360°) |
The meaning of these angles can be seen in the following diagram. For more information see spherical coordinate systems, Euler angles, and an introduction to spinors.

To represent the state \({\ \color{blue} \ket{\psi}}\) as a flagpole, the angles \(\varphi\), \(\theta\) and \(\alpha\) are chosen to match the following equation:
\[ {\ \color{blue} \ket{\psi}} = e^{i(-\alpha - \varphi)/2} \cos\left(\frac{\theta}{2}\right){\ \color{blue} \ket{0}} + e^{i(-\alpha + \varphi)/2} \sin\left(\frac{\theta}{2}\right){\ \color{blue} \ket{1}} \]
The equation can be understood as follows:
The inclination angle \(\theta\) is determined by the distribution of the weight factors between the two basis states. Complete weight on \({\ \color{blue} \ket{0}}\) means “up” \((\theta = 0°)\), complete weight on \({\ \color{blue} \ket{1}}\) means “down” \((\theta = 180°)\), and an equal distribution of weights means “horizontal” \((\theta = 90°)\).
The direction angle \(\varphi\) is determined by the phase difference of the two amplitudes. A phase difference of 0° means x-direction \((\varphi = 0°)\), a phase difference of 180° means negative x-direction \((\varphi = 180°)\).
The flag angle \(\alpha\) is determined by the total phase of the state vector. A full rotation of the state vector’s total phase corresponds to \(\alpha\) traversing the values 0° … 720°. This is of course surprising, because the 3D representation can only visualize the flag angle modulo 360°. But it is required to define \(\alpha\) exactly in this way, because otherwise the definition would not be mathematically sound.
It should be noted that the values \(\varphi\) and \(\alpha\) are not always uniquely defined. For example, if \({\ \color{blue} \ket{\psi}} = 1 {\ \color{blue} \ket{0}}\), every choice obeying \(\varphi = - \alpha\) can fulfill the equation. But nevertheless the 3D representation is always uniquely defined. For example, in the case mentioned before, the rotations \(\varphi\) and \(\alpha\) cancel each other. This is why \(\alpha\) has to be defined exactly in this way.
“Almost” Complete?
The flagpole visualization is an “almost” complete representation of the state vector. What does “almost” mean in this context?
The answer is related to the fact that the equation in the previous section requires the flag angle \(\alpha\) to be in the range 0° … 720°. Of course this full range can’t be visualized in 3D space, because the angles \(\alpha\) and \((\alpha + 360°)\) look the same in 3D space.
But nevertheless the value of the formula is different in these cases: When you start with state \({\ \color{blue} \ket{\phi}}\) and rotate the flag by 360°, you will end up in state \((-1){\ \color{blue} \ket{\phi}}\).
This means that there are always exactly two state vectors, which are represented by the same flagpole visualization. In other words: “One bit” of information is missing for a complete representation.
Rotation Operators
The Bloch sphere application provides buttons to rotate the flagpole (or the arrow) around the x, y, z, and Hadamard axes. As written below, these state transformations are the basis for very important quantum gates.
To predict the results of these transformations, it is not necessary to compute the Bloch sphere mapping as an intermediate step. Instead, one can apply the following 2x2 transformation matrices directly to the state vector. The matrices are applied by multiplying them from the left. The parameter \(\beta\) corresponds to the desired rotation angle in 3D space.
\[ R_X(\beta) = \begin{pmatrix} \cos\left(\frac{\beta}{2}\right) & -i\sin\left(\frac{\beta}{2}\right) \\ -i\sin\left(\frac{\beta}{2}\right) & \cos\left(\frac{\beta}{2}\right) \end{pmatrix} \]
\[ R_Y(\beta) = \begin{pmatrix} \cos\left(\frac{\beta}{2}\right) & -\sin\left(\frac{\beta}{2}\right) \\ \sin\left(\frac{\beta}{2}\right) & \cos\left(\frac{\beta}{2}\right) \end{pmatrix} \]
\[ R_Z(\beta) = \begin{pmatrix} e^{-i\beta/2} & 0 \\ 0 & e^{i\beta/2} \end{pmatrix} \]
\[ R_H(\beta) = \cos\left(\frac{\beta}{2}\right) I - i \sin\left(\frac{\beta}{2}\right) \frac{1}{\sqrt{2}} \begin{pmatrix} 1 & 1 \\ 1 & -1 \end{pmatrix} \]
Standard Quantum Gates
The rotation operators listed above have a very close relation to some of the most important standard quantum gates:
| Symbol | Name |
|---|---|
| \(X\) | Pauli-X gate (aka bit flip) |
| \(Y\) | Pauli-Y gate |
| \(Z\) | Pauli-Z gate (aka phase flip) |
| \(H\) | Hadamard gate |
In fact these quantum gates are “basically” the same as the rotations \(R_X(180°)\), \(R_Y(180°)\), \(R_Z(180°)\) and \(R_H(180°)\). Technically, they only differ by a global phase shift of 90°, which can be corrected by multiplying \(e^{i \cdot 90°}=i\).
So here are the transformation matrices of the quantum gates and their relations to the rotations:
\[ X = \begin{pmatrix} 0 & 1 \\ 1 & 0 \end{pmatrix} = i \cdot R_X(180°) \]
\[ Y = \begin{pmatrix} 0 & -i \\ i & \;\;0 \end{pmatrix} = i \cdot R_Y(180°) \]
\[ Z = \begin{pmatrix} 1 & 0 \\ 0 & -1 \end{pmatrix} = i \cdot R_Z(180°) \]
\[ H = \frac{1}{\sqrt{2}} \begin{pmatrix} 1 & 1 \\ 1 & -1 \end{pmatrix} = i \cdot R_H(180°) \]