Spaces:

great1sun
/

physics

Running

File size: 35,377 Bytes

ffbb03d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electric Flux & Solid Angle Simulator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .canvas-container {
            position: relative;
            width: 100%;
            height: 400px;
            background-color: #f8fafc;
            border-radius: 0.5rem;
            overflow: hidden;
        }
        
        #fluxCanvas {
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .tooltip {
            position: absolute;
            padding: 0.5rem;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border-radius: 0.25rem;
            pointer-events: none;
            font-size: 0.875rem;
            z-index: 10;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .field-line {
            stroke-dasharray: 5, 5;
            animation: dash 30s linear infinite;
        }
        
        @keyframes dash {
            to {
                stroke-dashoffset: 1000;
            }
        }
        
        .glow {
            filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.7));
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <header class="mb-8 text-center">
            <h1 class="text-4xl font-bold text-blue-600 mb-2">Electric Flux & Solid Angle Simulator</h1>
            <p class="text-gray-600 max-w-2xl mx-auto">Visualize and understand the concepts of electric flux through surfaces and solid angles in 3D space</p>
        </header>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Visualization Panel -->
            <div class="lg:col-span-2 bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
                    <h2 class="text-xl font-semibold text-gray-800 flex items-center">
                        <i class="fas fa-project-diagram mr-2 text-blue-500"></i> 3D Visualization
                    </h2>
                </div>
                
                <div class="p-4">
                    <div class="canvas-container">
                        <canvas id="fluxCanvas" width="800" height="400"></canvas>
                        <div class="tooltip" id="tooltip"></div>
                    </div>
                    
                    <div class="mt-4 grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Surface Type</label>
                            <select id="surfaceType" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                                <option value="plane">Flat Plane</option>
                                <option value="sphere">Sphere</option>
                                <option value="cylinder">Cylinder</option>
                                <option value="cube">Cube</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Field Type</label>
                            <select id="fieldType" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                                <option value="uniform">Uniform Field</option>
                                <option value="point">Point Charge</option>
                                <option value="dipole">Dipole</option>
                                <option value="line">Line Charge</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Control Panel -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
                    <h2 class="text-xl font-semibold text-gray-800 flex items-center">
                        <i class="fas fa-sliders-h mr-2 text-blue-500"></i> Simulation Controls
                    </h2>
                </div>
                
                <div class="p-4 space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Electric Field Strength (N/C)</label>
                        <input type="range" id="fieldStrength" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                        <div class="flex justify-between text-xs text-gray-500 mt-1">
                            <span>0</span>
                            <span id="fieldStrengthValue">50</span>
                            <span>100</span>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Surface Angle (θ)</label>
                        <input type="range" id="surfaceAngle" min="0" max="90" value="0" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                        <div class="flex justify-between text-xs text-gray-500 mt-1">
                            <span>0°</span>
                            <span id="surfaceAngleValue">0°</span>
                            <span>90°</span>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Surface Area (m²)</label>
                        <input type="range" id="surfaceArea" min="1" max="20" value="10" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                        <div class="flex justify-between text-xs text-gray-500 mt-1">
                            <span>1</span>
                            <span id="surfaceAreaValue">10</span>
                            <span>20</span>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Show Field Lines</label>
                        <div class="mt-1">
                            <label class="inline-flex items-center">
                                <input type="checkbox" id="showFieldLines" checked class="form-checkbox h-4 w-4 text-blue-600">
                                <span class="ml-2 text-gray-700">Visible</span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="pt-4 border-t border-gray-200">
                        <h3 class="text-lg font-medium text-gray-800 mb-2">Calculations</h3>
                        <div class="space-y-2">
                            <div class="flex justify-between">
                                <span class="text-gray-600">Electric Flux (Φ):</span>
                                <span id="fluxValue" class="font-medium">0 N·m²/C</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Solid Angle (Ω):</span>
                                <span id="solidAngleValue" class="font-medium">0 sr</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Effective Area:</span>
                                <span id="effectiveAreaValue" class="font-medium">0 m²</span>
                            </div>
                        </div>
                    </div>
                    
                    <button id="calculateBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-150 flex items-center justify-center">
                        <i class="fas fa-calculator mr-2"></i> Calculate Values
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Information Section -->
        <div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden">
            <div class="p-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
                <h2 class="text-xl font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-info-circle mr-2 text-blue-500"></i> Concepts Explained
                </h2>
            </div>
            
            <div class="p-6 grid md:grid-cols-2 gap-6">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 mb-2 flex items-center">
                        <i class="fas fa-bolt mr-2 text-yellow-500"></i> Electric Flux
                    </h3>
                    <p class="text-gray-600 mb-4">
                        Electric flux (Φ) is a measure of the number of electric field lines passing through a surface. 
                        It's calculated as Φ = E·A·cosθ, where E is the electric field strength, A is the area of the surface, 
                        and θ is the angle between the field lines and the normal (perpendicular) to the surface.
                    </p>
                    <div class="bg-blue-50 p-3 rounded-lg">
                        <p class="text-blue-800 font-mono text-sm">
                            Φ = E × A × cos(θ)
                        </p>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-medium text-gray-800 mb-2 flex items-center">
                        <i class="fas fa-globe mr-2 text-green-500"></i> Solid Angle
                    </h3>
                    <p class="text-gray-600 mb-4">
                        Solid angle (Ω) is the 3D analog of an angle. It measures how large the object looks from a point, 
                        measured in steradians (sr). For a sphere, the total solid angle is 4π sr. For a small surface area A 
                        at distance r from the point, Ω ≈ A/r² when A is perpendicular to the line of sight.
                    </p>
                    <div class="bg-green-50 p-3 rounded-lg">
                        <p class="text-green-800 font-mono text-sm">
                            Ω = A<sub>projected</sub> / r²
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Graph Section -->
        <div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden">
            <div class="p-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
                <h2 class="text-xl font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-chart-line mr-2 text-blue-500"></i> Flux vs. Angle Relationship
                </h2>
            </div>
            
            <div class="p-4">
                <canvas id="fluxChart" height="300"></canvas>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get DOM elements
            const fluxCanvas = document.getElementById('fluxCanvas');
            const ctx = fluxCanvas.getContext('2d');
            const tooltip = document.getElementById('tooltip');
            const fieldStrength = document.getElementById('fieldStrength');
            const fieldStrengthValue = document.getElementById('fieldStrengthValue');
            const surfaceAngle = document.getElementById('surfaceAngle');
            const surfaceAngleValue = document.getElementById('surfaceAngleValue');
            const surfaceArea = document.getElementById('surfaceArea');
            const surfaceAreaValue = document.getElementById('surfaceAreaValue');
            const surfaceType = document.getElementById('surfaceType');
            const fieldType = document.getElementById('fieldType');
            const showFieldLines = document.getElementById('showFieldLines');
            const fluxValue = document.getElementById('fluxValue');
            const solidAngleValue = document.getElementById('solidAngleValue');
            const effectiveAreaValue = document.getElementById('effectiveAreaValue');
            const calculateBtn = document.getElementById('calculateBtn');
            const fluxChartCtx = document.getElementById('fluxChart').getContext('2d');
            
            // Initialize variables
            let mouseX = 0, mouseY = 0;
            let isDragging = false;
            let rotationX = 0, rotationY = 0;
            let startX, startY;
            
            // Set canvas dimensions
            function resizeCanvas() {
                const container = document.querySelector('.canvas-container');
                fluxCanvas.width = container.clientWidth;
                fluxCanvas.height = container.clientHeight;
                drawScene();
            }
            
            // Initialize Chart.js
            const fluxChart = new Chart(fluxChartCtx, {
                type: 'line',
                data: {
                    labels: Array.from({length: 19}, (_, i) => i * 5),
                    datasets: [{
                        label: 'Electric Flux (Φ)',
                        data: [],
                        borderColor: 'rgb(59, 130, 246)',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Angle (θ) in degrees'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Electric Flux (N·m²/C)'
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `Φ = ${context.parsed.y.toFixed(2)} N·m²/C at θ = ${context.parsed.x}°`;
                                }
                            }
                        }
                    }
                }
            });
            
            // Update chart data
            function updateChart() {
                const E = parseFloat(fieldStrength.value);
                const A = parseFloat(surfaceArea.value);
                const newData = Array.from({length: 19}, (_, i) => {
                    const theta = i * 5;
                    return E * A * Math.cos(theta * Math.PI / 180);
                });
                
                fluxChart.data.datasets[0].data = newData;
                fluxChart.update();
            }
            
            // Event listeners for controls
            fieldStrength.addEventListener('input', function() {
                fieldStrengthValue.textContent = this.value;
                updateCalculations();
                drawScene();
                updateChart();
            });
            
            surfaceAngle.addEventListener('input', function() {
                surfaceAngleValue.textContent = this.value + '°';
                updateCalculations();
                drawScene();
                updateChart();
            });
            
            surfaceArea.addEventListener('input', function() {
                surfaceAreaValue.textContent = this.value;
                updateCalculations();
                drawScene();
                updateChart();
            });
            
            surfaceType.addEventListener('change', function() {
                drawScene();
                updateCalculations();
            });
            
            fieldType.addEventListener('change', function() {
                drawScene();
                updateCalculations();
            });
            
            showFieldLines.addEventListener('change', function() {
                drawScene();
            });
            
            calculateBtn.addEventListener('click', function() {
                updateCalculations();
                drawScene();
            });
            
            // Mouse events for 3D interaction
            fluxCanvas.addEventListener('mousedown', function(e) {
                isDragging = true;
                startX = e.clientX;
                startY = e.clientY;
            });
            
            fluxCanvas.addEventListener('mousemove', function(e) {
                mouseX = e.clientX - fluxCanvas.getBoundingClientRect().left;
                mouseY = e.clientY - fluxCanvas.getBoundingClientRect().top;
                
                if (isDragging) {
                    rotationY = (e.clientX - startX) * 0.5;
                    rotationX = (e.clientY - startY) * 0.5;
                    drawScene();
                }
                
                // Update tooltip position
                tooltip.style.left = (mouseX + 10) + 'px';
                tooltip.style.top = (mouseY + 10) + 'px';
            });
            
            fluxCanvas.addEventListener('mouseup', function() {
                isDragging = false;
            });
            
            fluxCanvas.addEventListener('mouseleave', function() {
                isDragging = false;
                tooltip.style.opacity = '0';
            });
            
            // Window resize handler
            window.addEventListener('resize', function() {
                resizeCanvas();
            });
            
            // Calculate flux and solid angle
            function updateCalculations() {
                const E = parseFloat(fieldStrength.value);
                const A = parseFloat(surfaceArea.value);
                const theta = parseFloat(surfaceAngle.value) * Math.PI / 180;
                const effectiveArea = A * Math.cos(theta);
                const flux = E * effectiveArea;
                
                // For solid angle, we'll approximate based on surface type
                let solidAngle;
                if (surfaceType.value === 'sphere') {
                    solidAngle = 4 * Math.PI * (A / (4 * Math.PI * 100)); // Assuming radius of 10 units
                } else {
                    // Approximate solid angle as A/r² where r is distance to center (fixed at 10 units here)
                    solidAngle = effectiveArea / 100;
                }
                
                fluxValue.textContent = flux.toFixed(2) + ' N·m²/C';
                solidAngleValue.textContent = solidAngle.toFixed(4) + ' sr';
                effectiveAreaValue.textContent = effectiveArea.toFixed(2) + ' m²';
            }
            
            // Draw the 3D scene
            function drawScene() {
                const width = fluxCanvas.width;
                const height = fluxCanvas.height;
                ctx.clearRect(0, 0, width, height);
                
                // Draw coordinate axes
                drawAxes();
                
                // Draw electric field
                drawElectricField();
                
                // Draw surface
                drawSurface();
                
                // Draw flux lines
                if (showFieldLines.checked) {
                    drawFluxLines();
                }
            }
            
            function drawAxes() {
                const width = fluxCanvas.width;
                const height = fluxCanvas.height;
                const centerX = width / 2;
                const centerY = height / 2;
                
                ctx.save();
                ctx.strokeStyle = '#999';
                ctx.lineWidth = 1;
                
                // X axis (red)
                ctx.beginPath();
                ctx.moveTo(50, centerY);
                ctx.lineTo(width - 50, centerY);
                ctx.stroke();
                ctx.fillStyle = '#f00';
                ctx.fillText('X', width - 40, centerY - 10);
                
                // Y axis (green)
                ctx.beginPath();
                ctx.moveTo(centerX, height - 50);
                ctx.lineTo(centerX, 50);
                ctx.stroke();
                ctx.fillStyle = '#0f0';
                ctx.fillText('Y', centerX + 10, 60);
                
                // Z axis (blue) - simulated with perspective
                ctx.beginPath();
                ctx.moveTo(centerX, centerY);
                ctx.lineTo(centerX + 50, centerY + 50);
                ctx.stroke();
                ctx.fillStyle = '#00f';
                ctx.fillText('Z', centerX + 60, centerY + 60);
                
                ctx.restore();
            }
            
            function drawElectricField() {
                const width = fluxCanvas.width;
                const height = fluxCanvas.height;
                const centerX = width / 2;
                const centerY = height / 2;
                const E = parseFloat(fieldStrength.value);
                const fieldColor = E > 50 ? 'rgba(220, 38, 38, 0.7)' : 'rgba(5, 150, 105, 0.7)';
                
                ctx.save();
                ctx.strokeStyle = fieldColor;
                ctx.lineWidth = 1;
                
                if (fieldType.value === 'uniform') {
                    // Draw uniform field lines (parallel)
                    for (let y = 50; y < height - 50; y += 30) {
                        for (let x = 100; x < width - 100; x += 40) {
                            ctx.beginPath();
                            ctx.moveTo(x, y);
                            ctx.lineTo(x + 30, y);
                            ctx.stroke();
                            
                            // Arrow head
                            ctx.beginPath();
                            ctx.moveTo(x + 30, y);
                            ctx.lineTo(x + 25, y - 3);
                            ctx.lineTo(x + 25, y + 3);
                            ctx.closePath();
                            ctx.fillStyle = fieldColor;
                            ctx.fill();
                        }
                    }
                } else if (fieldType.value === 'point') {
                    // Draw radial field lines from center
                    const centerX = width / 2;
                    const centerY = height / 2;
                    
                    for (let angle = 0; angle < 360; angle += 30) {
                        const rad = angle * Math.PI / 180;
                        const endX = centerX + Math.cos(rad) * 150;
                        const endY = centerY + Math.sin(rad) * 150;
                        
                        ctx.beginPath();
                        ctx.moveTo(centerX, centerY);
                        ctx.lineTo(endX, endY);
                        ctx.stroke();
                        
                        // Arrow head
                        ctx.beginPath();
                        ctx.moveTo(endX, endY);
                        ctx.lineTo(endX - Math.cos(rad) * 10 + Math.sin(rad) * 3, 
                                  endY - Math.sin(rad) * 10 - Math.cos(rad) * 3);
                        ctx.lineTo(endX - Math.cos(rad) * 10 - Math.sin(rad) * 3, 
                                  endY - Math.sin(rad) * 10 + Math.cos(rad) * 3);
                        ctx.closePath();
                        ctx.fillStyle = fieldColor;
                        ctx.fill();
                    }
                    
                    // Draw point charge
                    ctx.beginPath();
                    ctx.arc(centerX, centerY, 10, 0, Math.PI * 2);
                    ctx.fillStyle = E > 50 ? '#ef4444' : '#10b981';
                    ctx.fill();
                    ctx.strokeStyle = '#fff';
                    ctx.lineWidth = 2;
                    ctx.stroke();
                    ctx.fillStyle = '#fff';
                    ctx.font = 'bold 14px Arial';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText(E > 50 ? '+' : '-', centerX, centerY);
                }
                
                ctx.restore();
            }
            
            function drawSurface() {
                const width = fluxCanvas.width;
                const height = fluxCanvas.height;
                const centerX = width / 2;
                const centerY = height / 2;
                const theta = parseFloat(surfaceAngle.value) * Math.PI / 180;
                const A = parseFloat(surfaceArea.value);
                const size = Math.sqrt(A) * 8; // Scale factor for visualization
                
                ctx.save();
                
                // Apply rotation based on mouse drag
                ctx.translate(centerX, centerY);
                ctx.rotate(rotationY * Math.PI / 180);
                ctx.rotate(rotationX * Math.PI / 180, 0);
                
                // Draw different surface types
                if (surfaceType.value === 'plane') {
                    // Draw a rectangle representing the plane
                    ctx.fillStyle = 'rgba(59, 130, 246, 0.3)';
                    ctx.strokeStyle = 'rgba(59, 130, 246, 0.8)';
                    ctx.lineWidth = 2;
                    
                    // Apply surface angle
                    ctx.rotate(theta);
                    
                    ctx.beginPath();
                    ctx.rect(-size/2, -size/2, size, size);
                    ctx.fill();
                    ctx.stroke();
                    
                    // Draw normal vector
                    ctx.strokeStyle = '#ff00ff';
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    ctx.moveTo(0, 0);
                    ctx.lineTo(0, -size/2);
                    ctx.stroke();
                    
                    // Arrow head
                    ctx.beginPath();
                    ctx.moveTo(0, -size/2);
                    ctx.lineTo(-5, -size/2 + 10);
                    ctx.lineTo(5, -size/2 + 10);
                    ctx.closePath();
                    ctx.fillStyle = '#ff00ff';
                    ctx.fill();
                    
                } else if (surfaceType.value === 'sphere') {
                    // Draw a sphere
                    const radius = size / 2;
                    
                    // Main circle
                    ctx.fillStyle = 'rgba(59, 130, 246, 0.3)';
                    ctx.strokeStyle = 'rgba(59, 130, 246, 0.8)';
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    ctx.arc(0, 0, radius, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.stroke();
                    
                    // Perspective circles
                    ctx.strokeStyle = 'rgba(59, 130, 246, 0.6)';
                    ctx.beginPath();
                    ctx.ellipse(0, 0, radius, radius/3, Math.PI/4, 0, Math.PI * 2);
                    ctx.stroke();
                    
                    ctx.beginPath();
                    ctx.ellipse(0, 0, radius, radius/3, -Math.PI/4, 0, Math.PI * 2);
                    ctx.stroke();
                    
                } else if (surfaceType.value === 'cylinder') {
                    // Draw a cylinder
                    const radius = size / 3;
                    const height = size;
                    
                    // Top and bottom circles
                    ctx.fillStyle = 'rgba(59, 130, 246, 0.3)';
                    ctx.strokeStyle = 'rgba(59, 130, 246, 0.8)';
                    ctx.lineWidth = 2;
                    
                    // Top
                    ctx.beginPath();
                    ctx.ellipse(0, -height/2, radius, radius/2, Math.PI/4, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.stroke();
                    
                    // Bottom
                    ctx.beginPath();
                    ctx.ellipse(0, height/2, radius, radius/2, Math.PI/4, 0, Math.PI * 2);
                    ctx.stroke();
                    
                    // Sides
                    ctx.beginPath();
                    ctx.moveTo(-radius * Math.cos(Math.PI/4), -height/2 + radius/2 * Math.sin(Math.PI/4));
                    ctx.lineTo(-radius * Math.cos(Math.PI/4), height/2 - radius/2 * Math.sin(Math.PI/4));
                    ctx.stroke();
                    
                    ctx.beginPath();
                    ctx.moveTo(radius * Math.cos(Math.PI/4), -height/2 - radius/2 * Math.sin(Math.PI/4));
                    ctx.lineTo(radius * Math.cos(Math.PI/4), height/2 + radius/2 * Math.sin(Math.PI/4));
                    ctx.stroke();
                    
                } else if (surfaceType.value === 'cube') {
                    // Draw a cube
                    ctx.fillStyle = 'rgba(59, 130, 246, 0.3)';
                    ctx.strokeStyle = 'rgba(59, 130, 246, 0.8)';
                    ctx.lineWidth = 2;
                    
                    // Front face
                    ctx.beginPath();
                    ctx.rect(-size/2, -size/2, size, size);
                    ctx.fill();
                    ctx.stroke();
                    
                    // Top face
                    ctx.beginPath();
                    ctx.moveTo(-size/2, -size/2);
                    ctx.lineTo(-size/2 + size/3, -size/2 - size/3);
                    ctx.lineTo(size/2 + size/3, -size/2 - size/3);
                    ctx.lineTo(size/2, -size/2);
                    ctx.stroke();
                    
                    // Side face
                    ctx.beginPath();
                    ctx.moveTo(size/2, -size/2);
                    ctx.lineTo(size/2 + size/3, -size/2 - size/3);
                    ctx.lineTo(size/2 + size/3, size/2 - size/3);
                    ctx.lineTo(size/2, size/2);
                    ctx.stroke();
                }
                
                ctx.restore();
            }
            
            function drawFluxLines() {
                const width = fluxCanvas.width;
                const height = fluxCanvas.height;
                const centerX = width / 2;
                const centerY = height / 2;
                const theta = parseFloat(surfaceAngle.value) * Math.PI / 180;
                const A = parseFloat(surfaceArea.value);
                const size = Math.sqrt(A) * 8;
                const E = parseFloat(fieldStrength.value);
                const flux = E * A * Math.cos(theta);
                
                ctx.save();
                ctx.translate(centerX, centerY);
                ctx.rotate(rotationY * Math.PI / 180);
                ctx.rotate(rotationX * Math.PI / 180, 0);
                
                // Color based on flux value
                const fluxColor = flux > 0 ? 'rgba(16, 185, 129, 0.7)' : 'rgba(239, 68, 68, 0.7)';
                ctx.strokeStyle = fluxColor;
                ctx.lineWidth = 1;
                
                if (surfaceType.value === 'plane') {
                    ctx.rotate(theta);
                    
                    // Draw flux lines passing through the plane
                    const lines = Math.min(20, Math.floor(Math.abs(flux) / 5) + 5);
                    
                    for (let i = 0; i < lines; i++) {
                        const x = -size/2 + (i + 0.5) * (size / lines);
                        
                        ctx.beginPath();
                        ctx.moveTo(x, -size);
                        ctx.lineTo(x, size);
                        
                        if (flux > 0) {
                            // Entering lines
                            ctx.setLineDash([5, 5]);
                        } else {
                            // Exiting lines
                            ctx.setLineDash([5, 5]);
                            ctx.lineDashOffset = 5;
                        }
                        
                        ctx.stroke();
                    }
                    
                    // Reset line dash
                    ctx.setLineDash([]);
                    
                } else if (surfaceType.value === 'sphere') {
                    const radius = size / 2;
                    const lines = Math.min(20, Math.floor(Math.abs(flux) / 5) + 5);
                    
                    // Draw flux lines for sphere (radial)
                    for (let i = 0; i < lines; i++) {
                        const angle = i * (2 * Math.PI / lines);
                        const x = Math.cos(angle) * radius * 1.5;
                        const y = Math.sin(angle) * radius * 1.5;
                        
                        ctx.beginPath();
                        ctx.moveTo(0, 0);
                        ctx.lineTo(x, y);
                        
                        if (flux > 0) {
                            // Entering lines
                            ctx.setLineDash([5, 5]);
                        } else {
                            // Exiting lines
                            ctx.setLineDash([5, 5]);
                            ctx.lineDashOffset = 5;
                        }
                        
                        ctx.stroke();
                    }
                    
                    // Reset line dash
                    ctx.setLineDash([]);
                }
                
                ctx.restore();
            }
            
            // Initialize
            resizeCanvas();
            updateCalculations();
            updateChart();
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=great1sun/physics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>