Euler's Formula Explorer
Copy this iframe to your website:
1 | |
Description
This MicroSim demonstrates Euler's formula, one of the most important equations in signal processing:
The left panel shows the complex plane with a green vector of length 1 that points at angle \(\theta\) from the positive real axis. Its tip is the complex number \(e^{i\theta}\). The blue dot is the projection of the tip onto the real axis, which is \(\cos(\theta)\). The red dot is the projection onto the imaginary axis, which is \(\sin(\theta)\). The right panel plots the two projections against \(\theta\): a faint curve shows one full period and a bold curve shows the part swept out so far. A dashed level line connects each plot's current point to its value axis. The box under the circle reports \(\theta\) in radians and degrees, \(\cos(\theta)\), \(\sin(\theta)\) and the number \(e^{i\theta}\) in rectangular form.
Use Play to rotate the vector, the Angle slider to set \(\theta\) yourself, and the Speed slider to change how fast it turns. This simulation supports the section on Euler's formula in Chapter 1: Mathematical Foundations.
Key Features
Left panel: unit circle
- The unit circle in the complex plane (radius = 1)
- The rotating green vector from the origin, whose tip is \(e^{i\theta}\)
- A blue point on the real axis showing \(\cos(\theta)\) and a red point on the imaginary axis showing \(\sin(\theta)\)
- Dashed lines connecting the tip to its two axis projections
- An arc marking the angle \(\theta\)
Right panel: wave traces
- A cosine plot (blue) and a sine plot (red) against \(\theta\) from 0 to \(2\pi\)
- The current point on each plot, with its value printed beside it
- A dashed level line from each plot's value axis to the current point
Controls
| Control | Function |
|---|---|
| Play / Pause | Start or stop the automatic rotation |
| Angle slider | Set \(\theta\) from 0 to \(2\pi\) in steps of \(0.01\pi\) (1.8°); moving it while the animation runs pauses the animation |
| Speed slider | Set the rotation speed from 0.1x to 5.0x; at 1.0x the vector turns at 1.2 rad/s, so one revolution takes about 5.24 s |
| Reset | Return to \(\theta = 0\), clear the traces and pause (the speed setting is kept) |
Mathematical Concepts
Euler's formula connects three fundamental ideas:
- Exponentiation (\(e^x\))
- Trigonometry (\(\cos\), \(\sin\))
- Complex numbers (\(i\))
It matters in signal processing because it allows us to:
- Represent sinusoids compactly: \(A\cos(\omega t + \phi) = \text{Re}\left[Ae^{i(\omega t + \phi)}\right]\)
- Simplify calculations: multiplying complex exponentials adds their phases, \(e^{i\theta_1} e^{i\theta_2} = e^{i(\theta_1 + \theta_2)}\)
- Understand frequency analysis: the Fourier transform decomposes signals into complex exponentials
Because \(\cos^2(\theta) + \sin^2(\theta) = 1\), the tip always lies on the unit circle: \(|e^{i\theta}| = 1\) for every \(\theta\). As \(\theta\) increases from 0 to \(2\pi\) the tip travels once around the circle counterclockwise, the real part completes one cycle of cosine and the imaginary part completes one cycle of sine. A point that rotates at a steady rate is called a complex sinusoid or phasor.
| \(\theta\) | Angle slider | \(e^{i\theta}\) | \(\cos(\theta)\) | \(\sin(\theta)\) |
|---|---|---|---|---|
| 0 | 0.00π | 1 | 1 | 0 |
| \(\pi/2\) | 0.50π | \(i\) | 0 | 1 |
| \(\pi\) | 1.00π | \(-1\) | \(-1\) | 0 |
| \(3\pi/2\) | 1.50π | \(-i\) | 0 | \(-1\) |
| \(2\pi\) | 2.00π | 1 | 1 | 0 |
Applications in Signal Processing
- Phasors: in AC circuit analysis a sinusoidal voltage or current is represented by a phasor \(Ve^{i\phi}\), which turns impedance calculations into complex arithmetic.
- Fourier transform: the transform uses \(e^{-i\omega t}\) as its basis functions and decomposes a signal into frequency components.
- Modulation: AM, FM and PM can be understood as varying the amplitude, frequency or phase of a complex exponential.
- Filter design: transfer functions and frequency responses are written with complex exponentials, which makes their analysis tractable.
Lesson Plan
Learning Objectives
After using this MicroSim, students will be able to:
- Explain how the rotating green vector on the unit circle represents \(e^{i\theta}\), with its real-axis projection tracing \(\cos(\theta)\) and its imaginary-axis projection tracing \(\sin(\theta)\)
- Predict the values of \(\cos(\theta)\) and \(\sin(\theta)\) at \(\theta\) = 0, \(\pi/2\), \(\pi\) and \(3\pi/2\), then confirm them with the angle slider and the read-out box
- Explain why the sine and cosine traces are identical curves offset by a quarter turn, given that they are projections of the same rotating vector onto perpendicular axes
- Trace how advancing \(\theta\) through a full \(2\pi\) rotation generates exactly one complete cycle of each wave
- Evaluate Euler's identity by setting \(\theta = \pi\) and confirming that \(e^{i\pi} = -1\)
Target Audience
College-level signal processing, complex analysis or pre-calculus courses. Plan 15-25 minutes for self-directed exploration, or about 45 minutes with instructor-led discussion of the assessment questions.
Prerequisites
- Complex numbers and the complex plane (see the Complex Plane MicroSim)
- Basic trigonometry: sine, cosine and the unit circle
- Familiarity with exponential functions
Activities
Activity 1: Trace the circle (5 min). Set the speed to 0.5x and press Play. One revolution takes about 10.5 s. Watch the green tip travel counterclockwise, watch the blue and red dots slide along the axes and watch the bold traces build up on the right. Press Pause at any point and read the box under the circle.
Activity 2: Find the special points (5-10 min). Press Reset, then use the angle slider.
- Set the angle to 0.25π (45°). The read-out shows \(\cos(\theta) = 0.7071\) and \(\sin(\theta) = 0.7071\), so \(e^{i\theta} = 0.71 + 0.71i\).
- Set 0.50π. The blue dot sits at the origin, \(\cos(\theta) = 0.0000\) and \(\sin(\theta) = 1.0000\).
- Set 1.50π. \(\cos(\theta) = 0.0000\) again and \(\sin(\theta) = -1.0000\).
- Find every setting where \(|\cos(\theta)| = |\sin(\theta)|\): 0.25π, 0.75π, 1.25π and 1.75π, where both read-outs are \(\pm 0.7071\).
Activity 3: Phase relationship (5 min). Set the angle to 0.00π: cosine is at its maximum (1.0000) while sine is 0. Now set 0.50π: sine is at its maximum (1.0000) while cosine is 0. The sine curve reaches each feature a quarter turn (\(\pi/2\)) later than the cosine curve, so \(\sin(\theta) = \cos(\theta - \pi/2)\).
Activity 4: Euler's identity (5 min). Set the angle to 1.00π. The read-out shows \(\cos(\theta) = -1.0000\), \(\sin(\theta) = 0.0000\) and \(e^{i\theta} = -1.00 + 0.00i\). The tip is at the left end of the real axis, so \(e^{i\pi} = -1\), or equivalently \(e^{i\pi} + 1 = 0\).
Activity 5: Frequency connection (5 min). Press Reset, set the speed to 5.0x and press Play. The vector turns at \(1.2 \times 5 = 6.0\) rad/s, which is \(6.0 / 2\pi \approx 0.95\) revolutions per second, so one full cycle of each wave takes about 1.05 s. At 1.0x the rate is 1.2 rad/s, or about 0.19 Hz. The frequency of the sinusoids is the rotation rate of the phasor.
Assessment
- What is the value of \(e^{i\pi}\)? Explain it geometrically. (Answer: \(-1\). The angle \(\pi\) points the unit vector along the negative real axis, so \(\cos(\pi) = -1\) and \(\sin(\pi) = 0\).)
- Why does the point move counterclockwise as \(\theta\) increases? (Answer: Positive angles are measured counterclockwise from the positive real axis. Just after \(\theta = 0\) the cosine falls slightly below 1 while the sine becomes positive, which moves the tip up and to the left.)
- How does multiplying two complex exponentials \(e^{i\theta_1} \cdot e^{i\theta_2}\) relate to their angles? (Answer: The angles add, giving \(e^{i(\theta_1 + \theta_2)}\). For example, \(0.25\pi + 0.25\pi = 0.50\pi\), and the result is \(i\).)
- At \(\theta = 0.75\pi\) what are \(\cos(\theta)\), \(\sin(\theta)\) and \(|e^{i\theta}|\)? (Answer: \(\cos(\theta) = -0.7071\), \(\sin(\theta) = 0.7071\) and \(|e^{i\theta}| = \sqrt{0.5 + 0.5} = 1\).)
- Why is Euler's formula useful for representing AC signals? (Answer: A sinusoid \(A\cos(\omega t + \phi)\) is the real part of the rotating phasor \(Ae^{i(\omega t + \phi)}\), so amplitude and phase combine into one complex number and time shifts become multiplications.)
Common Misconceptions
"Sine and cosine are two separate waves." They are two projections of one rotating vector. Press Play and watch the blue and red dots: they move together because they are driven by the same angle, and the sine curve is the cosine curve delayed by a quarter turn.
"The vector gets longer or shorter as it rotates." Its length is always 1. Compare the vector at 0.25π (both projections 0.7071) with the vector at 0.00π (projections 1 and 0): \(\cos^2(\theta) + \sin^2(\theta) = 1\) in every case, so only the direction changes.
References
- Euler's formula - Wikipedia - statement, proofs and applications of the formula
- Euler's identity - Wikipedia - the special case \(e^{i\pi} + 1 = 0\) explored in Activity 4
- Unit circle - Wikipedia - the circle on which the point \(e^{i\theta}\) travels
- Phasor - Wikipedia - representing sinusoids as rotating complex numbers
- Sine and cosine - Wikipedia - projections of a point on the unit circle and the quarter-turn offset between the two functions
- The Scientist and Engineer's Guide to Digital Signal Processing - Steven W. Smith - free online textbook with chapters on complex numbers and the complex exponential
- Oppenheim, A. V., & Schafer, R. W. (2010). Discrete-Time Signal Processing, 3rd ed. - Pearson - standard text that develops complex exponential sequences
- Nahin, P. J. (2006). Dr. Euler's Fabulous Formula - Princeton University Press - book-length treatment of the formula and its uses
- Euler, L. (1748). Introductio in analysin infinitorum - the original publication of the formula
Development Notes
Version history
Version 2.0.0 (2026-10-14). Ported from p5.js 1.11.10 to p5.js 2.3.2. Layout fixes: the read-out box no longer overlaps the circle, the lower plot is no longer clipped by the control region, the projection labels no longer collide at \(\theta = 0\), and the title shrinks to fit narrow screens. The traces are now computed from the current angle (a faint full period plus a bold swept portion) instead of a stored history, so they stay correct when the angle slider is dragged, and no spurious line is drawn when the animation wraps from \(2\pi\) to 0. The angle slider is now expressed in units of \(\pi\) so that \(\pi/2\), \(\pi\) and \(3\pi/2\) can be set exactly. Moving the angle slider while the animation runs now pauses it. Added the \(e^{i\theta}\) read-out and quarter-turn tick labels on the \(\theta\) axes.