Visualizing Complex Functions with Three.js

Complex numbers are pairs of values that follow the multiplication rule

$(a, b) (c, d) = (a c - b d, a d + b c)$

This structure is commonly captured by introducing an imaginary unit whose square is negative one, which allows one to write

$(a, b) = a + i b (c, d) = c + i d$

Multiplying the numbers in this form replicates the multiplication rule, but it is not the only way to do so. One other simple way is with a matrix representation,

$(a, b) = (\begin{array}{c} a & b \\ - b & a \end{array}) (c, d) = (\begin{array}{c} c & d \\ - d & c \end{array})$

which again replicates the rule through matrix multiplication. In this representation complex conjugation, under which the imaginary unit changes sign, is represented by matrix transposition.

Complex numbers are often plotted in the Riemann plane, with their real part along the horizontal x-axis and the imaginary part along the vertical y-axis. This depiction is useful in extending the calculus of real variables to that of complex variables, but has the limitation that it can only be used for one complex variable. Two complex variables have four dimensions that cannot be exhibited directly to the eyesight of three-dimensional beings.

A function of a single complex variable is itself a complex value and one runs into the same issue that occurs in depicting two complex variables. In order to visualize a complex function, a choice must be made as to which three dimensions of the four are shown. It makes sense from the point of view of physics to separate the real and imaginary parts of a complex function,

$f (z) = f (x + i y) = u (x, y) + i v (x, y)$

because the two parts are complementary harmonic functions, that is functions that satisfy the two-dimensional Laplace equation:

$\nabla^{2} u = \frac{\partial^{2} u}{\partial x^{2}} + \frac{\partial^{2} u}{\partial y^{2}} = 0 \nabla^{2} v = \frac{\partial^{2} v}{\partial x^{2}} + \frac{\partial^{2} v}{\partial y^{2}} = 0$

The fact that the real and imaginary parts of a complex function are harmonic follows from the definition of a complex derivative. It implies that complex numbers need not be thought of as constituting some ‘spooky’ unreal space, but merely as a way to relate two harmonic functions that provide interlocking structure to a physical system.

The two dimensions in a single complex variable can be equally described with Cartesian or polar coordinates:

$z = x + i y = r cos φ + i r sin φ = r e^{i φ}$

One major advantage in using polar coordinates for graphical depiction is that the polar angle is limited in range from zero to 2π, and this can be mapped to the finite color range of the visible rainbow:

2π

This provides an immediate visual indication of which parts of a complex surface have the same value for the phase angle, which is an important descriptor of the the structure of surfaces. If one returns to the initial color after circling a singularity, then it is a pole, but if another color is found then the singularity is a branch point.

For single-valued functions, a typical visualization is a depiction of the absolute value of the function colored by the phase of the function. This is not particularly useful for multivalued functions: the absolute value itself washes out the location of branch cuts, while the mixing of coloration from multiple sheets muddies the information otherwise available. This is another motivation to work with real and imaginary parts individually. While the phase information is already contained in the elevation of these parts, coloring the surfaces according to phase provides additional immediate information about the structure of the surfaces.

It should also be noted that one could choose to use the real and imaginary parts of a function as independent variables for a visualization, with one of the original independent variables as the third dimension. This is equivalent to visualizing the real and imaginary parts of the inverse of the function, since

$x + i y = f^{- 1} (u + i v) = Re f^{- 1} + i Im f^{- 1}$

The difficulty with this in practice is that the distribution of the new independent variables is not guaranteed to cover the Riemann plane as cleanly as a direct parametrization of the inverse function.

Visualizations in this presentation will be implemented in WebGL using the Three.js JavaScript library written by the renowned Mr. Doob and others. The code common to the setup of scenes is segregated at the beginning of this document for ease of common adjustments and modifications. The code for the elevation and phase of each two-dimensional surface is contained in the div element where the visualization appears so that it is relatively close to its statement in mathematical notation.

Two points are in order concerning the common setup code. By default graphics are drawn with multiple sheets regardless of how many are required for the particular geometry. The extra angular extent simplifies the code by not requiring explicit tracking of how many sheets appear and on which specific sheet each portion of the geometry resides, with overlapping sheets combining at the same color for the same phase. This also means that the same setup code is immediately applicable to much more complicated geometries, as will be seen shortly.

Secondly, since phase colors are assigned according to an angular variable, the parametrizations of the surfaces are in polar coordinates. Without modification this produces circular edges that generally detract from the visualization of the surface. This is avoided by a mapping of the radial variable that stretches the surface into a square with corners at $\pm \frac{π}{4}$ and $\pm \frac{3 π}{4}$ , as described in detail at the end of this page.

Time to see the flexibility of the code in action: start with a single multiple root at the origin,

$z^{1 / k} = r^{1 / k} e^{i φ / k} = r^{1 / k} cos \frac{φ}{k} + i r^{1 / k} sin \frac{φ}{k}$

where variables in exponents will initially be restricted to integers. The real part of a single multiple root at the origin is

while its imaginary part is

These two graphics look extremely similar for the same root because the two parts only differ in having the cosine in the real replaced by a sine in the imaginary. The geometric form of the second graphic is rotated relative to the first, but the phase as represented by color not does rotate with the geometry.

When dealing with multivalued functions, it is customary to establish a branch cut to separate the various sheets of the function. The cut for a single root begins at the origin and extends to infinity in any direction. The radial lines where differently colored parts of the function cross represent branch cuts for which there is no change in magnitude traversing the cut. At all other points there is a change in functional value in crossing the branch cut onto a different sheet. The maximum change in traversing the cut is when sheets are farthest apart.

Integral powers of complex variables

$z^{m} = r^{m} e^{i m φ} = r^{m} cos m φ + i r^{m} sin m φ$

do not produce multiple sheets, but they do affect the distribution of phase around the resulting surface. The real part of a power function for integral exponent is

All of these cases have a single sheet for the function, but the phase occurs as many times on the sheet as the value of the exponent. The imaginary part of the power will look much the same, with its geometry but not its phase coloration rotated by ninety degrees, and so is not displayed here.

Functions that are expressible as series of integral powers of the independent variable will only have one sheet in their complex form. This includes common functions such as exponentials, trigonometric functions and hyperbolic functions, as well as many of the more complicated special functions of mathematical physics. These are known as entire functions by mathematicians.

Functions with singularities, however, can have multiple sheets depending on the structure of the singularity. One spectacular example is the logarithm function, whose complex form is

$ln z = ln (r e^{i φ}) = ln r + i φ$

The imaginary part of this complex function is

Only ten sheets of this function are shown, when in reality it is a corkscrew that extends infinitely in both positive and negative z-directions.

A singularity need not lead to multiple sheets. As noted above, returning to the same color of phase after circling a singularity is one way to distinguish a pole from a branch cut. This is because poles are given by negative integral exponents,

$z^{- m} = r^{- m} e^{- i m φ} = r^{- m} cos m φ - i r^{- m} sin m φ$

so that the phase structure does not differ from positive exponents. The real part of a single pole of order m at the origin is

While this graphic is visually different from the positive exponent due to the pole, it is still just a single sheet with no branch cuts.

Multiple sheets in the complex plane only appear for fractional powers that are equivalent to powers of roots. This is best seen with a rational exponent that can vary both its numerator and denominator:

$z^{m / k} = r^{m / k} e^{i m φ / k} = r^{m / k} cos \frac{m φ}{k} + i r^{m / k} sin \frac{m φ}{k}$

The real part of a power function with rational exponent is

It is easy to see that when the numerator and denominator are equal there is only one sheet with a single domain of phase coloration. For an irreducible fractional exponent, the number of sheets is determined by the denominator, while the number of cycles of phase is given by the numerator. When the fraction exponent is reducible, then this rule applies after cancelling common factors in the numerator and denominator.

The fun in the flexibility of the code is that now the corresponding graphic is easily generated for powers of negative roots of the form

$z^{- m / k} = r^{- m / k} e^{- i m φ / k} = r^{- m / k} cos \frac{m φ}{k} - i r^{- m / k} sin \frac{m φ}{k}$

The real part of a power function with negative rational exponent is

The code for this function differs from the last by one minus sign in the elevation() function. The same interaction between numerator and denominator holds as for the positive exponents: after cancelling common factors the number of sheets is given by the denominator and the number of cycles of phase by the numerator.

The natural extension of these last two graphics is to ask what happens when the exponent takes a continuous value, either positive or negative. In computational practice a real-valued numeric quantity is approximated by a rational number, the size of whose denominator depends on the precision of the numeric quantity. The number of sheets is still given by the value of the denominator after cancellation of common factors, so that exponents with many places after the decimal will produce geometries with a great number of sheets. In the limit of a real number, the number of sheets becomes infinite and fills the geometric space.

The space-filling number of sheets for a real exponent cannot be shown in all completeness, but it can be indicated by drawing a finite number of multiple sheets. The following graphic shows ten sheets of the real part of a power function with the indicated arbitrary exponent:

Exponent: Step:

If the exponent is set to an integer and the modified by small positive and negative steps, one can see how the multiple sheets diverge and converge in the vicinity of the integral exponent. The code can be easily modified to show hundreds of sheets in the vicinity of an integral exponent without overtaxing the rendering process, but so many sheets detracts from the informational value of the graphic. The exponent can be set to a negative integer to illustrate the same behavior in the vicinity of poles.

Repeating the process near an exponent of an integer plus or minus one half shows the same divergence and convergence, but with half the number of multiple sheets. This is because the geometry at that exponent requires twice as many sheets for complete rendering and these are not all provided. In the vicinity of an exponent of an integer plus or minus one third the divergence and convergence appears with a third as many sheets for a similar reason.

This last graphic is a wonderful example of how WebGL can outshine Mathematica for visual presentations. Attempting to produce a three-dimensional plot in Mathematica with ten overlapping sheets leads to a jumbled mess that conveys little information. WebGL seamlessly combines the sheets, allowing the simplified code to shine.

A complex variable displaced from the origin can still be parametrized in terms of a radius and angle,

$z - z_{0} = R e^{i Φ}$

but these variables of parametrization need to be written in polar coordinates with the appropriate displacements

$R = \sqrt{(x - x_{0})^{2} + (y - y_{0})^{2}} Φ = {tan}^{- 1} (\frac{y - y_{0}}{x - x_{0}})$

so that parameters are calculated with respect to the displaced center. For a rational exponent this becomes

$(z - z_{0})^{m / k} = R^{m / k} e^{i m Φ / k} = R^{m / k} cos \frac{m Φ}{k} + i R^{m / k} sin \frac{m Φ}{k}$

The real part of a power function with rational exponent displaced to an arbitrary point in the xy-plane is

x offset: y offset:

This last interactive graphic is much trickier than the others on this page. In the others the branch point is at the origin and the the polar angle itself is sufficient for parametrizations. With a displaced branch point the JavaScript function atan2() is needed to evaluate phases. Since it returns angles only between −π and π, the Three.js ParametricGeometry automatically joins faces of the geometry across the branch cut, leading to a messy inaccurate graphic.

To remedy this a pass is made in the code through the geometry to find faces with large jumps in coloration for one corner, which is then replaced with the accurate vertex. This method is not completely successful, and a second pass is made through the geometry to remove obviously inaccurate faces. This unfortunately removes a few faces in the vicinity of the branch point that should remain.

For a future branch point explorer with multiple roots at arbitrary points in the complex plane, it will be more expedient to avoid Three.js meshes in favor of the Points class.

Mapping a Circle into a Square

For simplicity the angular variable is first reduced to the first quadrant of the complex plane by the JavaScript function octant(), then the radial variable is replaced in the first octant by

$r_{map} = \frac{r}{cos φ} = r sec φ$

and in the second octant by

$r_{map} = \frac{r}{cos (\frac{π}{2} - φ)} = \frac{r}{sin φ} = r csc φ$

The effect on Cartesian coordinates in the first octant is

$x = r_{map} cos φ = r y = r_{map} sin φ = r tan φ$

so that lines of constant radius become vertical lines at that value for the x-coordinate. The effect on Cartesian coordinates in the second octant is

$x = r_{map} cos φ = r cot φ y = r_{map} sin φ = r$

so that lines of constant radius become horizontal lines at that value for the y-coordinate.

With the radial mapping always evaluated in the first quadrant, changes in the angular parts of the Cartesian variables in the other three quadrants must be considered. In the second quadrant angles are increased by $\frac{π}{2}$ relative to the first quadrant, so that intermediate Cartesian coordinates in the second quadrant with respect to angles in the first quadrant are

$x = r_{map} cos (φ + \frac{π}{2}) = - r_{map} sin φ y = r_{map} sin (φ + \frac{π}{2}) = r_{map} cos φ$

In the third quadrant angles are increased by π relative to the first quadrant, so that intermediate Cartesian coordinates in the third quadrant with respect to angles in the first quadrant are

$x = r_{map} cos (φ+π) = - r_{map} cos φ y = r_{map} sin (φ+π) = - r_{map} sin φ$

In the fourth quadrant angles are increased by $\frac{3 π}{2}$ relative to the first quadrant, so that intermediate Cartesian coordinates in the fourth quadrant with respect to angles in the first quadrant are

$x = r_{map} cos (φ + \frac{3 π}{2}) = r_{map} sin φ y = r_{map} sin (φ + \frac{3 π}{2}) = - r_{map} cos φ$

These intermediate Cartesian coordinates need to be combined with the mapping of the radial variable for the total effect on Cartesian coordinates. Collecting the relevant expressions, the total effect of the mapping by octant is

Octant	r_map	x Intermediate	y Intermediate	x Total	y Total

First	$\frac{r}{cos φ}$	$r_{map} cos φ$	$r_{map} sin φ$	$r$	$r tan φ$
Second	$\frac{r}{sin φ}$	$r_{map} cos φ$	$r_{map} sin φ$	$r cot φ$	$r$
Third	$\frac{r}{cos φ}$	$- r_{map} sin φ$	$r_{map} cos φ$	$- r tan φ$	$r$
Fourth	$\frac{r}{sin φ}$	$- r_{map} sin φ$	$r_{map} cos φ$	$- r$	$r cot φ$
Fifth	$\frac{r}{cos φ}$	$- r_{map} cos φ$	$- r_{map} sin φ$	$- r$	$- r tan φ$
Sixth	$\frac{r}{sin φ}$	$- r_{map} cos φ$	$- r_{map} sin φ$	$- r cot φ$	$- r$
Seventh	$\frac{r}{cos φ}$	$r_{map} sin φ$	$- r_{map} cos φ$	$r tan φ$	$- r$
Eighth	$\frac{r}{sin φ}$	$r_{map} sin φ$	$- r_{map} cos φ$	$r$	$- r cot φ$

When the total effect of the mapping results in an expression that is simply the radial variable, lines of constant radius will become vertical or horizontal lines as appropriate. Following the transformation around an entire cycle of the octants, a circle in the xy-plane becomes a square under the mapping.

Uploaded 2015.03.17 — Updated 2016.09.04 analyticphysics.com