Visualize light dispersion through a prism with our free online simulator. Adjust refractive indices, incident angles, and explore Snell's Law physics easily.
AI Generation Prompt
Overview
This single-file application is a high-fidelity educational utility designed to simulate the physical behavior of light rays passing through a prism. It provides an intuitive interface for students, teachers, and optics enthusiasts to visualize Snell’s Law and chromatic dispersion without needing complex laboratory equipment or expensive software.
Core Features
- Interactive Prism Canvas: A responsive HTML5 Canvas that renders the prism and ray path in real-time.
- Dynamic Control Panel: Adjust the prism's material (with pre-set refractive indices for glass, acrylic, water, diamond, etc.) and the incident light angle using smooth range sliders.
- Real-Time Snell’s Law Calculation: The application performs all mathematical refraction calculations on-the-fly and displays the resulting angles and deviation metrics in a dedicated results panel.
- Dispersion Visualization: A visual representation of the spectrum, allowing users to see the separation of wavelengths (color bands) as they exit the prism.
- Responsive UI: The layout adapts fluidly from a wide-screen dashboard view to a stacked mobile view.
UI/UX Specification
- Aesthetic: Clean, professional "SaaS" aesthetic. Use a crisp, light-mode color palette (White background, light gray borders, primary blue/indigo accents, and subtle drop shadows).
- Animations: All UI elements use CSS transitions (e.g., hover effects on buttons, smooth label updates). Ray path recalculations utilize a requestAnimationFrame loop to ensure fluid visual feedback when sliders are moved.
- Layout:
- Header: Simple, descriptive title.
- Main Area: Split-pane layout. Left side (or top on mobile) contains the simulation canvas. Right side (or bottom on mobile) contains the control panel (sliders for angle, refractive index selector, reset button).
- Results Section: A clear table or list displaying the calculated deviation angle and internal ray properties.
Technical Implementation
- Single File: The entire application must be encapsulated in one HTML file using
<style>for CSS and<script>for Vanilla JavaScript. - No Storage: No use of
localStorage,sessionStorage, or cookies. State must be handled entirely within local JavaScript variables. - Dependencies: Use CDN links for modern utility CSS (e.g., Tailwind CSS via CDN) and font libraries (e.g., Google Fonts 'Inter').
- Sandbox Compatibility: Do not use
alert()orprompt(). All modals/notifications must be built using custom HTML/CSS overlays. - Performance: Use
window.requestAnimationFramefor high-performance canvas updates to ensure the simulation feels responsive and lag-free.
Color Palette (Light Mode)
- Background:
#FFFFFF(Main page) - Surface:
#F9FAFB(Control panel background) - Border:
#E5E7EB(Subtle separation lines) - Primary Accent:
#4F46E5(Active UI elements/buttons) - Text:
#111827(Primary text),#6B7280(Secondary text) - Simulation Elements: High-contrast strokes for the prism boundaries and distinct colors (e.g., red, green, violet) for the dispersed light rays.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How does the prism light dispersion simulator work?
This application utilizes real-time geometric optics calculations based on Snell's Law to determine the path of light as it passes through a triangular medium. By inputting the refractive index of the material and the angle of the incident light, the tool mathematically models the refraction at each boundary surface. As the light ray enters and exits the prism, the simulation dynamically calculates the deviation angle and displays the dispersion of the light spectrum. This provides an accurate visual representation of how different wavelengths of light behave when encountering a medium with a higher refractive index than the surrounding environment.
Can I save my optical simulations in this tool?
To ensure maximum privacy and compliance with strict browser security standards, this application does not store any user data, simulations, or preferences. The entire application operates strictly within the volatile memory of your current browser session, meaning no information is written to local storage or cookies. Because the tool is designed to run in a sandboxed iframe environment for your safety, persistence mechanisms are intentionally disabled. If you refresh the page or close your browser, your current settings and simulation state will be reset, ensuring a completely clean slate for every new session.
What physics principles are used in this simulation?
The core of this simulation is governed by Snell's Law, which relates the angles of incidence and refraction to the refractive indices of two different media. We calculate the refraction angle at the first surface of the prism, then determine the path through the interior, and finally calculate the refraction as the ray exits into the surrounding air. Furthermore, the tool approximates light dispersion by simulating the slight variations in refractive index for different wavelengths, which is the physical cause behind the chromatic separation seen in prisms. This allows students and researchers to visualize how changing the material properties leads to different degrees of light separation.
Is this tool suitable for mobile devices?
Yes, the application is built with a mobile-first, responsive design approach, ensuring that all sliders, input fields, and the simulation canvas adjust seamlessly to different screen dimensions. Whether you are using a desktop monitor or a smartphone, the interface elements are optimized for touch-based interaction and readability. We utilize a fluid layout system that rearranges the control panel and the viewing area to maximize the available space. This ensures that you have a high-quality, professional educational tool available at your fingertips, regardless of the device you choose to use for your optics experiments.
