wave-visualizations/interference.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interference Phenomenon</title>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
    <script src="simulator.js"></script>
    <style>
      body {
          font-family: 'Segoe UI', sans-serif;
          background-color: #ffffff;
          margin: 0;
          padding: 0;
      }

      #controls {
          float: right;
          width: 300px;
          margin: 20px;
          padding: 15px;
          border: 1px solid #ccc;
          border-radius: 10px;
          background-color: #fff;
          box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
      }

      #controls label {
          display: block;
          margin-top: 10px;
          font-weight: bold;
      }

      #canvas-container {
          float: left;
          margin: 20px;
      }

      #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>
    <div id="controls">
      <label for="wallDistance">Wall distance:</label>
      <input type="range" id="wallDistance" name="wallDistance" min="300" max="1200" value="475">
      <span id="wallDistanceValue">475</span>
      <br>
      <label for="slitSpacing">Separation between holes:</label>
      <input type="range" id="slitSpacing" name="slitSpacing" min="20" max="500" value="80">
      <span id="slitSpacingValue">80</span>
      <br>
      <label for="waveAmplitude">Wave amplitude:</label>
      <input type="range" id="waveAmplitude" name="waveAmplitude" min="1" max="20" value="7.5" step="0.1">
      <span id="waveAmplitudeValue">7.5</span>
      <br>
      <label for="waveFrequency">Wave frequency:</Label>
      <input type="range" id="waveFrequency" name="waveFrequency" min="0.05" max="1" value="0.2" step="0.01">
      <span id="waveFrequencyValue">0.2</span>
    </div>

    <div id="canvas-container"></div>

    <div id="explanation">
      <h2>Wave Interference Simulation</h2>
      <p>
        This interactive simulation demonstrates the phenomenon of <strong>wave interference</strong> from two coherent sources (e.g., slits in a double-slit experiment).
        The left side shows two emitters sending out sinusoidal waves. These waves propagate toward the right wall, where their amplitudes are combined to produce a pattern.
      </p>
      <p>
        The resulting graph on the right represents the <strong>interference pattern</strong> created by the superposition of the two waves at each point on the detection screen.
        Regions of <strong>constructive interference</strong> (bright fringes) appear where the wave crests align, while <strong>destructive interference</strong> (dark fringes) occur where a crest meets a trough.
      </p>
      <p>
        Use the sliders above to modify the parameters and observe how the interference pattern changes in real time:
      </p>
      <ul>
        <li><strong>Wall distance:</strong> Increases or decreases the distance to the detection screen.</li>
        <li><strong>Separation between holes:</strong> Controls the spacing between the two wave sources.</li>
        <li><strong>Wave amplitude:</strong> Adjusts the height of the wave oscillations.</li>
        <li><strong>Wave frequency:</strong> Modifies how fast the waves oscillate.</li>
      </ul>
      <p>
        This model provides a visual understanding of how phase differences caused by different path lengths result in varying interference effects — a core concept in wave optics and quantum mechanics.
      </p>
    </div>

    <script>
      let canvasWidth = 1500;
      let canvasHeight = 1000;

      let leftWallX = 100;
      let rightWallX = 475;
      let wallTopY = 0.1 * canvasHeight;
      let wallHeight = 0.8 * canvasHeight;

      let slit1Y, slit2Y;
      let slitSpacing = 80;
      let waveFrequency = 0.2;
      let waveAmplitude = 7.5;

      let phaseCounter = 0;
      let phaseSteps = 100;
      let phaseShift = 0;

      let maxPoints = [];
      let minPoints = [];

      let graphOffsetRatio = 0.05;
      let graphSpacingRatio = 0.03;
      let markEndRatio = 0.02;
      let graph1X, graph2X, graph3X, markEndX;
    </script>
  </body>
</html>