Hugging Face's logo

Spaces:
great1sun
/
physics
Running

App Files Community
physics / index.html
great1sun's picture
great1sun
Add 2 files
ffbb03d verified
Raw
History Blame Contribute Delete
35.4 kB
<!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>