wave-visualizations/phase-displacement.html at master · mrbeas-lab/wave-visualizations · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Phase in Traveling Waves</title>
    <style>
      body {
          font-family: sans-serif;
          max-width: 800px;
          margin: 2em auto;
          line-height: 1.6;
      }
      img {
          width: 100%;
          height: auto;
          border: 1px solid #ccc;
      }
      h1, h2 {
          text-align: center;
      }

      #explanation {
          clear: both;
          padding: 30px;
          max-width: 1000px;
          margin: 0 auto;
          background-color: #f4f4f4;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          line-height: 1.6;
      }

      #explanation h2 {
          margin-top: 0;
          color: #333;
      }

      #explanation ul {
          padding-left: 20px;
      }


    </style>
  </head>
  <body>

    <h1>Phase Displacement in Traveling Waves</h1>

    <img src="wave_circle_animation.gif" alt="Traveling Wave and Circular Motion Animation">

    <div id=explanation>

      <h2>What This Animation Shows</h2>
      <p>This animation illustrates a fundamental concept in wave physics: the phase of a wave at any given point is a function of both <strong>position</strong> and <strong>time</strong>.</p>

      <h2>Left Panel: Traveling Wave</h2>
      <p>The left plot shows a traveling wave, typically described by the function:</p>
      <pre>y(x, t) = A · sin(kx - ωt)</pre>
      <p>Here, the <strong>phase</strong> <code>(kx - ωt)</code> depends on both position <code>x</code> and time <code>t</code>. Three points on the wave (red, green, blue) show how displacement changes with time at different fixed positions.</p>
      <ul>
        <li>Each vertical dashed line marks a fixed position along the wave.</li>
        <li>The vertical displacement of each point varies sinusoidally over time, but not synchronously — because the phase depends on <em>where</em> the point is on the wave.</li>
      </ul>

      <h2>Right Panel: Circular Motion Analogy</h2>
      <p>The right plot represents each point's motion as a projection of a rotating vector (phasor) around a circle. The angular position around the circle reflects the phase at each location:</p>
      <ul>
        <li>The red, green, and blue vectors rotate at the same angular speed (frequency), but with different initial angles, because each has a different spatial phase offset.</li>
        <li>This helps visualize why even though all points oscillate with the same frequency, they do so out of phase with each other.</li>
      </ul>

      <h2>Conclusion</h2>
      <p>The animation shows that in a traveling wave, <strong>the phase at each point is not only a function of time, but also of position</strong>. This is why the wave form travels through space, rather than oscillating in place.</p>


    </div>
  </body>
</html>