You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
An interactive, web-based simulator that provides a real-time visualization of the diffraction pattern produced by a reflective or transmissive grating. This tool allows users to explore the principles of optical diffraction by adjusting a comprehensive set of parameters for both the incident light and the grating itself.
4
+
5
+
## Live Demo
6
+
7
+
Experience the simulator live at: **[visuphy.github.io/DiffractionGrating](https://visuphy.github.io/DiffractionGrating)**
8
+
9
+
## Screenshot
10
+
11
+
12
+
13
+
## Features
14
+
15
+
***Dual Light Modes:** Simulate diffraction for both **Monochromatic** and **White Light** sources.
16
+
***Comprehensive Beam Controls:**
17
+
* Adjust the **Wavelength (λ)** of monochromatic light with a dynamic range.
18
+
* Set the **Bandwidth (Δλ)** to observe the effect of spectral line width.
19
+
* Modify the **Angle of Incidence (α)** of the light source.
20
+
***Detailed Grating Properties:**
21
+
* Control **Grating Spacing (d)** or, alternatively, the **Groove Density** (lines/mm).
22
+
* Select the number of **Diffraction Orders (±m)** to display.
23
+
* Define the number of **Illuminated Grooves (N)** to see its effect on resolving power.
24
+
* Switch between **Reflective** and **Transmissive** grating types.
25
+
***Interactive Analysis:**
26
+
* In monochromatic mode, **click on any diffraction order** to view its key quantitative properties.
27
+
* Displayed data includes the precise diffraction angle, angular dispersion, temporal dispersion (GVD), and the system's resolving power.
28
+
***Littrow Condition Display:** The simulator calculates and displays the wavelength and angle required to satisfy the Littrow condition for m=1 based on the current setup.
29
+
30
+
## How to Use
31
+
32
+
1.**Launch the Simulator:** Open the [live demo link](https://visuphy.github.io/DiffractionGrating) in your browser.
33
+
2.**Select Light Properties:**
34
+
* Choose between `Monochromatic` or `White Light`.
35
+
* If monochromatic, use the sliders or input boxes to set the Wavelength and Bandwidth.
36
+
* Adjust the Angle of Incidence for the incoming beam.
37
+
3.**Configure Grating Properties:**
38
+
* Use the sliders or input fields to set the Grating Spacing or Groove Density. Note that changing one will automatically update the other.
39
+
* Set the maximum number of diffraction orders and illuminated grooves.
40
+
* Select whether the grating is `Reflective` or `Transmissive`.
41
+
4.**Analyze the Results:**
42
+
* Observe the diffraction pattern on the canvas.
43
+
* For detailed analysis, switch to `Monochromatic` mode and click on a specific diffracted ray (e.g., `m = 1`). The calculated physical properties for that order will appear in the top-left corner of the canvas.
44
+
45
+
## Technical Details
46
+
47
+
This simulator is built entirely with client-side web technologies:
48
+
49
+
***HTML5:** For the structure and layout of the user interface.
50
+
***CSS3:** For styling the controls and ensuring a responsive design.
51
+
***JavaScript:** For the core simulation logic, physics calculations, and rendering on the HTML5 Canvas.
52
+
53
+
No external libraries or frameworks are required, ensuring the simulator is lightweight and fast-loading.
54
+
55
+
## Contributing
56
+
57
+
Feedback and contributions are welcome! If you encounter any bugs, have suggestions for new features, or would like to improve the code, please feel free to:
58
+
59
+
***Report an issue:** Open an issue on the [GitHub Issues page](https://github.com/visuphy/DiffractionGrating/issues).
60
+
***Submit a pull request:** Fork the repository, make your changes, and submit a pull request for review.
61
+
62
+
## License
63
+
64
+
This project is licensed under the **MIT License**. See the `LICENSE` file for more details.
<!-- Removed the "About & Discussion" paragraph -->
53
+
</section>
54
+
55
+
<!-- Description Section -->
56
+
<sectionclass="description">
57
+
<h2>About This Simulator</h2>
58
+
<p>
59
+
Explore the principles of optical diffraction with this interactive and intuitive simulator. This tool provides a real-time visualization of the diffraction pattern generated when light interacts with a grating.</p>
60
+
<p>
61
+
You can adjust a comprehensive set of parameters, including the properties of the incident light—such as wavelength, bandwidth, and angle—and the physical characteristics of the grating, like groove density and type (reflective or transmissive).</p>
62
+
<p>
63
+
For a deeper analysis in monochromatic mode, simply click on a diffraction order to display its key quantitative properties, including the precise diffraction angle, angular and temporal dispersion, and the system's resolving power.
64
+
</p>
65
+
We appreciate your feedback! If you encounter any issues or have suggestions for improvement, please report them on our <ahref="https://github.com/visuphy/DiffractionGrating/issues" target="_blank" rel="noopener noreferrer">GitHub Issues page</a>.
66
+
</p>
67
+
<p>
68
+
Click the play button above to launch the simulator!
69
+
</p>
70
+
</section>
71
+
72
+
<!-- Comments Section -->
73
+
<sectionclass="comments-section">
74
+
<h2>Comments & Feedback</h2>
75
+
<scriptsrc="https://giscus.app/client.js"
76
+
data-repo="visuphy/DiffractionGrating"
77
+
data-repo-id="R_kgDOPnb5sQ"
78
+
data-category="Comments"
79
+
data-category-id="DIC_kwDOPnb5sc4CuziT"
80
+
data-mapping="pathname"
81
+
data-strict="0"
82
+
data-reactions-enabled="1"
83
+
data-emit-metadata="0"
84
+
data-input-position="bottom"
85
+
data-theme="light"
86
+
data-lang="en"
87
+
crossorigin="anonymous"
88
+
async>
89
+
</script>
90
+
<noscript>Please enable JavaScript to view the comments powered by Giscus.</noscript>
0 commit comments