Möbius Transform
Copy this iframe to your website:
1 | |
Description
A Möbius (linear fractional) transformation maps each complex number \(z\) to
The left plot is the input \(z\)-plane and the right plot is the output \(w\)-plane, at the same scale. White dots on the left form a grid of \(z\) values; the white dots on the right are their images. The dashed circle is the unit circle.
- Coefficients box: drag the colored dots to set \(A\), \(B\), \(C\) and \(D\) (parts from −1 to 1).
- Preset: exact coefficients for the identity, a rotation with scaling, the inversion \(1/z\), the bilinear map and the Cayley map.
- Draw in the input plane; its purple image appears on the right.
- Scale sets the half-width of both plots (±1 to ±20); Density sets the dots per row (10 to 50).
- Hover over the input plane to read \(z\) and \(f(z)\).
The read-outs show \(AD - BC\), the pole \(-D/C\) (red ×) and \(f(\infty) = A/C\) (black ○), where far-away inputs crowd. A Möbius map sends lines and circles to lines and circles and preserves angles (it is conformal).
Connection to IIR filter design. The bilinear transform in Chapter 10: Advanced Filter Design and Implementation, \(z = \frac{1 + sT/2}{1 - sT/2}\), is a Möbius map with \(A = T/2\), \(B = 1\), \(C = -T/2\), \(D = 1\). With \(T = 2\) it is the Bilinear preset: read the input as the analog \(s\)-plane and the output as the digital \(z\)-plane. The axis \(s = j\Omega\) lands on the unit circle at angle \(\omega = 2\arctan(\Omega T/2)\), the stable left half-plane lands inside the circle, and \(s = \infty\) lands at \(z = -1\): no aliasing, but warped frequency.
Lesson Plan
Learning Objectives
After using this MicroSim, students will be able to:
- Calculate the pole \(-D/C\), the image of infinity \(A/C\) and the determinant \(AD - BC\) of a Möbius transformation from its coefficients
- Predict whether a line or circle in the \(z\)-plane maps to a line or a circle, from its position relative to the pole
- Explain how \(B\) translates the plane, \(A\) rotates and scales it, and a nonzero \(C\) bends lines into circles
- Demonstrate that the bilinear map \((1+s)/(1-s)\) sends the imaginary axis onto the unit circle and the left half-plane inside it
- Calculate the warped digital frequency \(\omega = 2\arctan\Omega\) of a point \(s = j\Omega\) under the bilinear map with \(T = 2\)
Target Audience
Undergraduate engineering, physics or mathematics students in a signals and systems or digital signal processing course, ideally just before the bilinear-transform method of IIR filter design. Plan 25 to 30 minutes for the activities below.
Prerequisites
- Complex arithmetic in rectangular and polar form (see the Complex Plane MicroSim)
- Poles of a rational function
- Stability regions: the left half of the \(s\)-plane and the inside of the unit circle in the \(z\)-plane
Activities
Activity 1: The pole and the point at infinity (5 min). Choose Default example (\(A = 0.50 + 0.50i\), \(B = 0.30 + 0.20i\), \(C = -0.10 + 0.60i\), \(D = 0.20 - 0.50i\)) with Scale ±3. The read-outs show \(AD - BC = 0.50 - 0.31i\), the pole at \(z = 0.86 + 0.19i\) (red ×) and \(f(\infty) = 0.68 - 0.95i\) (black ○). The grid dots crowd around the ○, because the grid points farthest from the pole map closest to \(A/C\), while the dots next to the × are thrown out of view. Hover toward the ×: the \(w\) read-out grows without bound.
Activity 2: Lines become circles (7 min). Choose Inversion: w = 1/z and set Scale to ±2, so the grid lines sit at ±1. Trace the vertical grid line \(\mathrm{Re}\,z = 1\) from top to bottom. Its image is an arc of the circle with center \(0.5\) and radius \(0.5\); the missing piece near \(w = 0\) belongs to the parts of the line beyond \(|\mathrm{Im}\,z| = 2\). Hover at \(z = 2\) (the right edge of the input plane): \(w = 0.50\). Then trace the dashed unit circle: its image is the unit circle again, traversed in the opposite direction, because \(1/e^{i\theta} = e^{-i\theta}\).
Activity 3: The bilinear transform (8 min). Choose Bilinear: w = (1+z)/(1−z) with Scale ±3 and read the input plane as the \(s\)-plane. Trace the vertical axis from top to bottom: the image is an arc of the dashed unit circle from 143° through 0° to −143°. Draw a short stroke anywhere left of the vertical axis: its image lies inside the unit circle. Hover near \(z = i\): \(w \approx i\), an angle of \(2\arctan 1 = 90°\). Hover near the top of the axis, \(z \approx 3i\): \(w \approx -0.80 + 0.60i\), an angle of \(2\arctan 3 \approx 143.1°\). The pole × sits at \(s = 1\) and the ○ at \(w = -1\), where \(s = \infty\) lands.
Activity 4: One coefficient at a time (7 min). Choose Identity: w = z (\(A = D = 1\), \(B = C = 0\)); both plots look the same. Drag the green dot \(B\), on top at the origin, to about \(0.5\) on the real axis: every dot moves 0.5 to the right (a translation). Drag the blue dot \(C\), now alone at the origin, up to about \(0.5i\): a pole appears near \(z = -1/(0.5i) = 2i\), the ○ moves to about \(-2i\), and the straight grid rows bend into arcs. The Preset menu now reads Custom (dragged).
Assessment
- For the Bilinear preset, \(f(z) = \frac{z + 1}{-z + 1}\), where is the pole and what is \(f(\infty)\)? Answer: the pole is \(z = -D/C = 1\) and \(f(\infty) = A/C = -1\).
- With the bilinear transform and \(T = 2\), where does the analog point \(s = j1\) land, and what digital frequency does it represent? Answer: \(z = (1 + j)/(1 - j) = j\), on the unit circle at \(\omega = 2\arctan 1 = \pi/2\) rad (90°).
- A student sets \(A = 0.5\), \(B = 1\), \(C = 0.5\), \(D = 1\). What does the output plane show, and why? Answer: \(AD - BC = 0.5 - 0.5 = 0\), so \(f(z) = (0.5z + 1)/(0.5z + 1) = 1\) for every \(z \neq -2\); all dots land on \(w = 1\) and the read-out warns that \(f\) is constant.
- Why do \(A = 0.5\), \(B = 0.5\), \(C = -0.5\), \(D = 0.5\) give exactly the same picture as the Bilinear preset? Answer: they are the preset's coefficients multiplied by 0.5; the common factor cancels between numerator and denominator, so \(f\) is unchanged (only \(AD - BC\) changes, from 2 to 0.5).
- Under \(w = 1/z\), what is the image of the line \(\mathrm{Re}\,z = 1\), and why is it not a straight line? Answer: the circle \(|w - 0.5| = 0.5\) (without the point \(w = 0\)). A line maps to a line only when it passes through the pole, here \(z = 0\), and \(\mathrm{Re}\,z = 1\) does not.
Common Misconceptions
"A Möbius transformation keeps straight lines straight." Activity 2 turns the line \(\mathrm{Re}\,z = 1\) into a circle. Only lines through the pole stay straight: with the Inversion preset, trace the real axis (it passes through the × at 0) and its image is the real axis again.
"The bilinear transform maps analog frequency evenly onto the unit circle." In Activity 3, the stretch of the imaginary axis from \(\Omega = 0\) to \(1\) covers 90° of the circle, from \(1\) to \(3\) only about 53°, and every \(\Omega > 3\) is squeezed into the last 37° before \(w = -1\). The dots crowding near the ○ at \(-1\) show the same compression. This is frequency warping, which pre-warping corrects at chosen frequencies.
References
- Möbius transformation - Wikipedia - definition, the pole, the image of infinity and the circle-preserving property
- Bilinear transform - Wikipedia - the \(s\)-to-\(z\) mapping used in IIR filter design, and its frequency warping
- Conformal map - Wikipedia - why the right angles of the input grid survive the mapping
- Riemann sphere - Wikipedia - the point at infinity that a Möbius map sends to \(A/C\)
- Smith chart - Wikipedia - an engineering chart built on the Möbius map \(\Gamma = (z - 1)/(z + 1)\)
- The Scientist and Engineer's Guide to DSP, Chapter 33: The z-Transform - Steven W. Smith - free chapter on the \(z\)-plane and recursive (IIR) filter design
Development Notes
Prompt history
Version 2.0.0 (2026-10-14). Ported from p5.js 1.9.0 to p5.js 2.3.2 and made responsive; the entry file
mobius-transform.html was renamed to main.html (the old name redirects). Changes from version 1:
- The output plane was drawn upside down: it plotted the mirror image \(\overline{f(z)}\), with \(\mathrm{Im}\,w\) pointing down. It now uses the same orientation as the input plane.
- The input and output planes are drawn at the same size, so magnification can be read directly (version 1 drew the same coordinate range at 150 px for the input and 300 px for the output).
- A drawing now joins every pair of consecutive mouse points (version 1 used
beginShape(LINES), which drew every other segment), it is drawn in purple so it stays visible on the axes, and its image is a continuous curve. - The grid dots sit at the centers of the grid cells, so the grid is symmetric about 0.
- Added the preset menu, the pole and \(f(\infty)\) markers, the unit circle, the \(AD - BC\) read-out with a warning when it is zero, and the hover read-out.
Original prompt
Create p5.js interactive script that allows the user to view and alter a mobius transform.
Graph the coeffiecients as draggable vectors, and display a point domain of configurable scale and density.
Create a user drawable side canvas, map the drawn points back through the transform and displays it alongside the current point map visualization.
Links from the version 1 page (not re-verified):