<!-- 
# FROSTI Ray Tracing - Interactive Physics Simulation Application

## Overview
A comprehensive web-based ray tracing physics simulation built with vanilla JavaScript and HTML5 Canvas. Features real-time ray propagation, interactive reflector geometry controls, and multiple data visualization overlays in a responsive mobile-first interface.

## Core Architecture & Functions

### HTML Structure
- **Responsive Canvas Container**: Main simulation viewport with zoom controls and info overlay
- **Collapsible Control Panels**: Mobile-optimized accordion interface for parameter adjustment
- **Dual-Layout System**: Single column mobile, side-by-side desktop layout
- **Overlay System**: Grid background, zoom info, and help display integration

### Canvas & Viewport Management
- **Dynamic Sizing**: Responsive canvas dimensions based on viewport (min 1500px, maintains aspect ratio)
- **Coordinate System**: Centered origin with configurable zoom/pan state
- **Touch-Optimized**: Mobile viewport meta tag prevents scaling, maintains usability

### Control Interface Sections
1. **Simulation Controls**: Start/stop, reset, and ray clearing functions
2. **Overlay Controls**: Toggle KDE, histogram, thermal overlay, and reset functions  
3. **Ray Parameters**: Emission rate (1-5), max bounces (0-5), speed (5-50), lifetime (100-800)
4. **Reflector Geometry**: Source width, tilt angle, distance, target width, vertical offset

### State Management Variables
- **Viewport State**: `zoomLevel`, `panX`, `panY`, `centerX`, `centerY`
- **Interaction State**: `isDragging`, `lastMouseX`, `lastMouseY`
- **Simulation State**: `rays[]`, `isRunning`, `animationId`, `frameCount`
- **Physics Parameters**: `theta`, `dist_sor_tar`, `sourceLength`, `targetLength`, etc.

### Module Loading System (Dependency Order)
1. **Core Controls**: `controls-mobile.js`, `unitsGrid.js`, `controls.js`
2. **Physics Engine**: `geometry.js`, `rays.js`, `renderer.js`, `simulation.js`
3. **Visualization**: `distribution.js`, `KDE.js`, `testmass_vis.js`
4. **Interaction**: `zoom.js`, `termination.js`, `constraints.js`
5. **Utilities**: `preformance.js`

### Interactive Features
- **Hotkey System**: Comprehensive keyboard controls for overlays and parameters
- **Help Display**: Toggle-able overlay (Z key) showing all hotkey assignments
- **Real-time Updates**: Live parameter feedback with immediate visual updates
- **Mobile Touch**: Optimized for touch interaction with proper gesture handling

### Key Functions & Returns

#### Initialization Functions
- **Canvas Setup**: Returns configured canvas context with responsive dimensions
- **Control Binding**: Returns mapped control elements with event listeners
- **State Initialize**: Returns default simulation parameters and viewport settings

#### Simulation Core
- **Ray Tracing Engine**: Returns ray intersection calculations and bounce physics
- **Animation Loop**: Returns frame-based updates with performance monitoring
- **Physics Integration**: Returns real-time parameter updates affecting ray behavior

#### Visualization Overlays
- **KDE Overlay**: Returns kernel density estimation visualization of ray distribution
- **Histogram**: Returns binned frequency distribution of ray impacts
- **Thermal Overlay**: Returns heat map visualization with configurable diffusion
- **Grid System**: Returns coordinate reference with unit conversion display

#### User Interaction
- **Zoom/Pan System**: Returns transformed viewport coordinates for navigation
- **Parameter Controls**: Returns real-time slider/button input with live value display
- **Hotkey Handler**: Returns mapped keyboard shortcuts for advanced control

## Usage Context & Integration
Perfect for educational physics simulations, optical system design, or scientific visualization. The modular architecture allows easy extension of physics models, visualization types, or control interfaces. All code integrates with the mobile-first CSS framework for consistent responsive behavior.

## Performance Considerations
- Hardware-accelerated canvas rendering
- Efficient ray-object intersection algorithms  
- Frame-rate monitoring and adaptive quality
- Memory management for long-running simulations
- Touch-optimized interaction response times

-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">    <title>FROSTI Ray Tracing</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">
        <div class="canvas-container">
            <canvas id="canvas" width="600" height="600"></canvas>
            <div class="zoom-controls">
                <button class="zoom-btn" id="zoomIn">+</button>
                <button class="zoom-btn" id="zoomOut">−</button>
                <button class="zoom-btn" id="zoomReset">⌂</button>
            </div>
            <div class="zoom-info" id="zoomInfo">
                Zoom: 100% | Pan: Drag to move
            </div>
            <div class="graph-overlay"></div>
        </div>
        <div class="controls">
            <div class="controls-header">
                <div class="controls-title">FROSTI Ray Tracing</div>
                <div class="controls-subtitle">Interactive Physics Simulation</div>
            </div>
            
            <div class="controls-content">
                <div class="control-section">
                    <h3>Simulation Controls</h3>
                    <div class="control-content">
                        <div class="button-group">
                            <button id="startBtn">Start Simulation</button>
                            <button id="resetBtn">Reset</button>
                            <button id="clearRay">Clear Rays</button> 
                        </div>
                    </div>
                </div>

                <div class="control-section">
                    <h3>Overlay Controls</h3>
                    <div class="control-content">
                        <div class="button-group">
                            <button id="resetOverlays">Reset Overlays</button>
                            <button id="toggleKDE">Toggle KDE</button>
                            <button id="toggleHistogram">Toggle Histogram</button>
                            <button id="toggleThermalOverlay">Toggle Thermal Overlay</button>
                        </div>
                    </div>
                </div>            
                
                <div class="control-section">
                    <h3>Ray Parameters</h3>
                    <div class="control-content">
                        <div class="control-group">
                            <label>Ray Emission Rate <span class="value" id="emissionRateValue">1</span></label>
                            <input type="range" id="emissionRate" min="1" max="5" step="1" value="1">
                        </div>
                        
                        <div class="control-group">
                            <label>Max Bounces <span class="value" id="maxBouncesValue">8</span></label>
                            <input type="range" id="maxBounces" min="0" max="5" step="1" value="5">
                        </div>
                        
                        <div class="control-group">
                            <label>Ray Speed <span class="value" id="raySpeedValue">30</span></label>
                            <input type="range" id="raySpeed" min="5" max="50" step="0.1" value="30">
                        </div>
                        
                        <div class="control-group">
                            <label>Ray Lifetime <span class="value" id="rayLifetimeValue">600</span></label>
                            <input type="range" id="rayLifetime" min="100" max="800" step="50" value="600">
                        </div>
                    </div>
                </div>

                <div class="control-section">
                    <h3>Reflector Geometry</h3>
                    <div class="control-content">
                        <div class="control-group">
                            <label>Source Width <span class="value" id="sourceLengthValue">2.0 mm</span></label>
                            <input type="range" id="sourceLength" min="10" max="500" step="10" value="200">
                        </div>
                        
                        <div class="control-group">
                            <label>Source Tilt (radians) <span class="value" id="thetaValue">0.9</span></label>
                            <input type="range" id="theta" min="0" max="1.4" step="0.01" value="0.9">
                        </div>
                        
                        <div class="control-group">
                            <label>Distance from Origin <span class="value" id="dist_sor_tar_Value">50.0 mm</span></label>
                            <input type="range" id="dist_sor_tar" min="1000" max="10000" step="10" value="7500">
                        </div>
                
                        <div class="control-group">
                            <label>Target Width <span class="value" id="targetLengthValue">40.0 mm</span></label>
                            <input type="range" id="targetLength" min="50" max="8000" step="10" value="4000">
                        </div>

                        <div class="control-group">
                            <label>Vertical Offset <span class="value" id="verticalOffsetValue">100 mm</span></label>
                            <input type="range" id="verticalOffset" min="1000" max="20000" step="5" value="10000">
                        </div>
                    </div>
                </div>
                <div class="physics-info">
                    <strong>Description:</strong>
                    <br>Click 'z' key to see hotkey assignments for the simulation.<br>
                    <a href="https://experimentalgravity.ucr.edu/" style="color: #6caffc; text-decoration: none;">Richardson Lab UCR</a><br>
                    <br>FROSTI Ray Tracing</b> is a physics simulation application that allows users to visualize and interact with ray tracing phenomena in a user-friendly interface. The simulation includes various parameters and overlays to enhance the understanding of ray behavior in different scenarios.
                </div>
            </div>
        </div>
    </div>

    <!-- Load modules in dependency order -->
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // Canvas and viewport parameters - Mobile responsive
        let canvasWidth = Math.max(1500, window.innerWidth - 32);
        let canvasHeight = Math.max(canvasWidth, window.innerHeight - 32); // Keep square aspect ratio
        console.log(`Canvas size: ${canvasWidth} x ${canvasHeight}`);

        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        
        let centerX = canvasWidth / 2;
        let centerY = canvasHeight / 2;
        
        // Zoom and pan state
        let zoomLevel = 1;
        let panX = 0;
        let panY = 0;
        let isDragging = false;
        let lastMouseX = 0;
        let lastMouseY = 0;
        
        // Physics constants
        const EPS = 1e-6;
        // Simulation stateg
        let rays = [];
        let isRunning = false;
        let animationId = null;
        let frameCount = 0;

        // Get current values
        let theta, dist_sor_tar, sourceLength, targetLength, verticalOffset;
        let emissionRate, maxBounces, raySpeed, rayLifetime;
        let a, b, z0, voffset;
    </script>
    <!-- Load Controls, Unit conversion, and draw background grid -->
    <script src="js/controls-mobile.js"></script>
    <script src="js/unitsGrid.js"></script>
    <script src="js/controls.js"></script>

    <!-- Load Ray and drawing code -->
    <script src="js/geometry.js"></script>
    <script src="js/rays.js"></script>
    <script src="js/renderer.js"></script>
    <script src="js/simulation.js"></script>

    <!-- Load overlays -->
    <script src="js/distribution.js"></script>
    <script src="js/KDE.js"></script>
    <script src="js/testmass_vis.js"></script>

    <!-- Load Zoom controls and control functions for reflection and drawing limitations -->
    <script src="js/zoom.js"></script>
    <script src="js/termination.js"></script>
    <script src="js/constraints.js"></script>

    <!-- Load Other -->
    <script src="js/preformance.js"></script>

    <script>
        // Hotkey help display
        let helpVisible = false;
        let helpElement = null;

        function createHelpDisplay() {
            if (helpElement) return helpElement;
            
            helpElement = document.createElement('div');
            helpElement.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: rgba(0, 0, 0, 0.8);
                color: white;
                padding: 15px;
                border-radius: 8px;
                font-family: monospace;
                font-size: 14px;
                line-height: 1.4;
                z-index: 10;
                white-space: pre-line;
                border: 2px solid #4a90e2;
            `;
            
            helpElement.textContent = `
            HOTKEY ASSIGNMENTS:

            Histagram Overlay:
            r - Reset histogram and KDE
            h - Toggle histogram 

            KDE Overlay:
            k - Toggle KDE 
            n - Increase KDE binwidth
            m - Decrease KDE binwidth
            b - change KDE fitting method

            "Heating" Overlay:
            t - Toggle overlay visibility
            - - Decrease 'Diffusion' rate (-0.1)
            + - Increase 'Diffusion' rate (+0.1)
            [ - Decrease tint strength (-0.1)
            ] - Increase tint strength (+0.1)
            < - Decrease something
            > - Increase something
            `;
            
            document.body.appendChild(helpElement);
            return helpElement;
        }

        function toggleHelp() {
            if (helpVisible) {
                hideHelp();
            } else {
                showHelp();
            }
        }

        function showHelp() {
            if (!helpVisible) {
                createHelpDisplay();
                helpElement.style.display = 'block';
                helpVisible = true;
            }
        }

        function hideHelp() {
            if (helpVisible && helpElement) {
                helpElement.style.display = 'none';
                helpVisible = false;
            }
        }

        // Simple keyboard controls
        document.addEventListener('keydown', (e) => {
            // Show help when H is held
            if (e.key === 'z' || e.key === 'Z') {
                toggleHelp();
                return;
            }
        }
        )

        // Update display values on control change
        Object.values(controls).forEach(control => {
            control.addEventListener('input', () => {
                updateValues();
                if (!isRunning) {
                    redraw();
                }
            });
        });
        //local
        // Initial setup
        updateValues();
        updateZoomInfo();
        autoCenter();
        
        // Initial render - draw everything on first load
        redraw();
    </script>
</body>
</html>