Free Quantum Mechanics Double Slit Interference Simulator

Overview

A high-fidelity, single-file browser application designed to simulate the physical behavior of light through a double-slit apparatus. This tool provides an interactive laboratory environment for students and physics enthusiasts to visualize wave superposition, destructive/constructive interference, and the impact of geometric changes on physical phenomena.

Technical Specifications

• Architecture: Single-file Vanilla HTML5, CSS3, and JavaScript.
• Rendering: High-performance <canvas> element for frame-perfect interference pattern generation.
• Compatibility: Fully responsive design for mobile, tablet, and desktop.
• State Management: In-memory variables only (NO localStorage, sessionStorage, or external databases).
• Performance: requestAnimationFrame for fluid, real-time adjustments without visual stuttering.

UI/UX Design

• Aesthetic: Clean, professional "SaaS" aesthetic. Predominantly white background (#FFFFFF), neutral slate grays (#F8FAFC) for container sections, and vibrant primary blue (#2563EB) for interactive sliders and visual data markers.
• Layout:
  • Header: Minimalist title area with a brief explanation toggle.
  • Main Visualization: A large, centered canvas displaying the wave pattern and the resulting fringe intensity graph below it.
  • Control Sidebar: A collapsible sidebar (or bottom-aligned panel on mobile) containing:
    • Slider: Wavelength (λ) (Range: 400nm - 700nm).
    • Slider: Slit Distance (d) (Range: 0.1mm - 5mm).
    • Slider: Screen Distance (L) (Range: 0.5m - 5m).
    • Slider: Slit Width (a).
• Animations: Subtle transitions (transition: all 0.3s ease) on all sliders and UI elements to provide a tactile, responsive feel.

Key Features

• Live Mathematical Feedback: As sliders move, the application recalculates the fringe spacing formula (Δy = λL/d) and displays the values in real-time.
• Intensity Graphing: A secondary graph below the canvas showing a plot of light intensity across the screen width.
• Responsive Scaling: The canvas automatically resizes to maintain aspect ratio, ensuring the simulation is accurate regardless of viewport dimensions.
• Accessibility: High contrast sliders, clearly labeled input fields, and keyboard-friendly focus states for all controls.

Directives for Implementation

1. Environment: Use purely vanilla methods. No build tools. Include Tailwind CSS via CDN for styling support.
2. Security: All links must use target="_blank" rel="noopener noreferrer".
3. Persistence: Do not store data. If a user refreshes, the state resets to the default configuration.
4. Interactivity: Use standard <input type="range"> elements with custom CSS to match the professional design theme.
5. Performance: Do not use heavy physics engines; calculate patterns using optimized trigonometric wave superposition functions directly in the draw() loop.