Skip to content

Phase Relationship Visualizer

Run the Phase Relationship Visualizer MicroSim Fullscreen

To experiment with the code, paste phase-relationship.js into the p5.js editor.

About This MicroSim

Two sinusoids with the same amplitude and the same frequency (5 Hz, so \(T = 200\) ms) differ only in phase:

\[v_1(t) = V_m \sin(\omega t) \qquad v_2(t) = V_m \sin(\omega t + \phi)\]

The blue curve \(v_1\) is the reference. The red curve \(v_2\) is shifted by the phase difference \(\phi\). The MicroSim shows the same relationship two ways:

  • Waveform plot (left): the purple arrow marks the angle between corresponding peaks. If the red peak is to the left of the blue peak, \(v_2\) reaches its peak earlier in time.
  • Phasor diagram (right): each signal is an arrow of length \(V_m\). Both arrows rotate counterclockwise at \(\omega\), with \(\mathbf{V}_2\) ahead of \(\mathbf{V}_1\) by the angle \(\phi\). The height of each arrow tip above the horizontal axis is the instantaneous value at the dotted time cursor.

The statement at the top translates the picture into the standard vocabulary:

Phase difference Statement
\(\phi > 0\) \(v_2\) leads \(v_1\) by \(\phi\)
\(\phi < 0\) \(v_2\) lags \(v_1\) by \(\lvert\phi\rvert\)
\(\phi = 0°\) The signals are in phase
\(\phi = \pm 180°\) The signals are in antiphase

The time shift between the peaks is \(\Delta t = \dfrac{\lvert\phi\rvert}{360°}\,T\). At the default \(\phi = 45°\) this is \(\tfrac{45}{360} \times 200 = 25\) ms.

How to Use

  1. Drag the Phase difference slider from −180° to +180° and watch the red curve slide and the red phasor swing.
  2. Use the Quick select buttons to jump to 0°, 90°, 180° and −90°.
  3. Click Start to rotate the phasors in slow motion. The dotted cursor sweeps across the waveform plot at the same time, so you can see each waveform being generated by the height of its phasor tip. Click Stop to freeze the picture.
  4. Click Phasor Diagram to hide or show the phasor diagram.
  5. Click Reset to stop the animation and return to \(\phi = 45°\).

Iframe Embed Code

You can add this MicroSim to any web page by adding this to your HTML:

1
2
3
4
<iframe src="https://dmccreary.github.io/circuits/sims/phase-relationship/main.html"
        height="517px"
        width="100%"
        scrolling="no"></iframe>

Lesson Plan

Learning Objective

Students will compare two sinusoidal signals with different phase relationships and interpret leading/lagging terminology.

Target Audience

College students in a first circuits course (electrical engineering or computer science majors).

Duration

10-15 minutes

Prerequisites

  • Amplitude, frequency and period of a sinusoid
  • The phase angle \(\phi\) in \(V_m \sin(\omega t + \phi)\)
  • Angles in degrees on the unit circle

Activities

  1. Predict the direction (3 min): With \(\phi = 0°\), ask students which way the red curve will move when \(\phi\) becomes positive. Move the slider and discuss why "leads" means "shifted left" on a time axis.
  2. Four landmark cases (5 min): Use the quick select buttons. For each of 0°, 90°, 180° and −90°, students write one sentence describing where the peaks of \(v_2\) fall relative to \(v_1\) and sketch the two phasors.
  3. Connect the two views (5 min): Click Start. Students watch a red peak arrive, then a blue peak, and relate the delay to the angle between the rotating arrows. Stop the animation at any instant and check that each dot height on the vertical axis matches the waveform value at the cursor.
  4. Time shift calculation (2 min): For \(\phi = 60°\) students compute \(\Delta t = \tfrac{60}{360} \times 200 = 33.3\) ms and confirm it with the MicroSim.

Assessment

  • Given \(v_1 = 10\sin(\omega t)\) and \(v_2 = 10\sin(\omega t + 90°)\), students state which signal leads and by how much, and justify the answer with a phasor sketch.
  • Students explain why \(+180°\) and \(-180°\) produce the same picture.

References

  1. Wikipedia: Phase (waves) - Phase difference, leading and lagging signals, in-phase and antiphase conditions
  2. Wikipedia: Phasor - Representation of sinusoids as rotating vectors in the complex plane
  3. p5.js Reference - Documentation for the p5.js library used to build this MicroSim