Create a complete, highly interactive p5.js simulation demonstrating: light refraction phenomenon

CRITICAL REQUIREMENTS:
1. ACCURACY: The simulation must be scientifically/mathematically accurate for light refraction phenomenon
2. FUNCTIONAL INTERACTIVITY: All sliders and buttons MUST actually control and modify the simulation behavior in real-time
3. EDUCATIONAL: Users should learn about light refraction phenomenon through experimentation and parameter manipulation
4. VISUAL PRECISION: Animations should be smooth, realistic, and visually accurate to real-world physics

MANDATORY INTERACTIVE ELEMENTS THAT MUST WORK:
- At least 4-6 sliders controlling key parameters with realistic ranges - these MUST change simulation behavior
- At least 3-4 buttons for actions (reset, pause/play, presets, etc.) - these MUST perform actual functions
- Real-time parameter display showing current values that update as sliders move
- Visual feedback that responds immediately and visibly to control changes
- Mouse interactions where physically meaningful

CRITICAL: CONTROLS MUST BE FUNCTIONAL, NOT DECORATIVE
- Every slider must control a variable that actively affects the simulation
- Every button must perform a meaningful action that changes the simulation state
- Parameter changes must be immediately visible in the simulation output
- Use the actual slider values in mathematical calculations and physics equations

ANIMATION AND TIMING REQUIREMENTS:
- Use realistic time scaling - avoid animations that are too fast or unrealistic
- Implement proper frame rate control using deltaTime or fixed timesteps
- Use realistic physical constants and scaling factors
- Ensure smooth, stable animations at 60fps
- Avoid conflicting visual elements or overlapping controls
- Make animations visually appealing and scientifically accurate

CONTROL IMPLEMENTATION REQUIREMENTS:
- Sliders: Use createSlider(min, max, default, step) with appropriate ranges that make physical sense
- Buttons: Use createButton('Label') with meaningful functions that actually execute
- Show parameter values with text() in the main canvas that update in real-time
- Use function declarations for event handlers: function resetSim() {} 
- ALWAYS use slider.value() in your calculations - never ignore slider inputs

CODE FORMAT REQUIREMENTS:
- Use GLOBAL MODE p5.js (NOT instance mode)
- Define setup() and draw() as regular functions
- All variables should be global (use let/var at top level)
- Use standard p5.js function names: createCanvas, background, fill, etc.
- NO sketch wrapper function - write direct p5.js code


IMPORTANT UI REQUIREMENT:
- After creating each slider or button, immediately call .parent('p5-controls-container') so that all controls are placed inside the dedicated controls container below the canvas.
- Do NOT use .position(x, y) or .style('position', 'absolute') for controls.
- Do NOT set top/left/width for controls.
- Let the browser's normal layout flow (flexbox) handle the placement and grouping of controls.
- Controls should be grouped and flow naturally in a horizontal row or wrap as needed inside the container below the canvas.


SIMULATION ACCURACY FOR LIGHT REFRACTION PHENOMENON:
- Use correct physics equations, mathematical relationships, or algorithmic principles
- Realistic parameter ranges and default values that make physical sense
- Smooth, continuous animations with proper time scaling
- Proper scaling and units where applicable
- Include scientific constants or realistic coefficients
- ENSURE every parameter controlled by sliders affects the simulation visibly
- Use appropriate time steps and scaling factors to avoid too-fast animations

TEXT AND DISPLAY REQUIREMENTS:
- Show ONLY the simulation title at the top
- Display ONLY key physics parameters (velocity, acceleration, force, etc.) - no instructions or explanations
- Keep text minimal and clean - maximum 4-5 parameter displays
- NO instruction text like "Click to...", "Drag to...", etc.
- Use concise parameter labels like "Velocity: 5.2 m/s" not "Current velocity value is 5.2"
- Position parameter text neatly in corners or edges, not cluttering the center

VISUAL REQUIREMENTS:
- Clear, educational visualization of the concept
- Multiple visual elements (trails, vectors, measurements, etc.) that don't conflict
- Color coding to distinguish different aspects
- Grid lines, axes, or reference markers where helpful
- Immediate and obvious visual response to parameter changes
- Smooth, realistic motion that matches real-world physics
- Proper visual hierarchy - important elements should stand out
- Clean, uncluttered display with minimal text

Generate an accurate, interactive simulation of: light refraction phenomenon with WORKING controls, REALISTIC timing, and MINIMAL text displays