Spaces:

wop
/

SimulationOfParticles

Running

App Files Files Community

wop commited on Jun 1

Commit

b79f369

verified ·

1 Parent(s): 860e698

Update index.html

Browse files

Files changed (1) hide show

index.html +800 -18

index.html CHANGED Viewed

@@ -1,19 +1,801 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Coulomb's Law & Electric Field Visualizer</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* Custom styled sliders for consistent UI */
+        input[type="range"] {
+            -webkit-appearance: none;
+            appearance: none;
+            background: #2d3748;
+            height: 6px;
+            border-radius: 9999px;
+            outline: none;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: #3b82f6;
+            cursor: pointer;
+            transition: transform 0.1s ease;
+        }
+        input[type="range"]::-webkit-slider-thumb:hover {
+            transform: scale(1.2);
+        }
+        /* Glowing neon utilities */
+        .neon-shadow-red {
+            box-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
+        }
+        .neon-shadow-blue {
+            box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
+        }
+    </style>
+</head>
+<body class="bg-[#0b0f19] text-gray-200 h-full overflow-hidden flex flex-col font-sans select-none">
+    <!-- Header / Navbar -->
+    <header class="bg-[#111827]/80 backdrop-blur border-b border-gray-800 px-6 py-4 flex items-center justify-between z-10 shrink-0">
+        <div class="flex items-center space-x-3">
+            <div class="bg-gradient-to-tr from-blue-500 to-red-500 p-2 rounded-lg">
+                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+            </div>
+            <div>
+                <h1 class="text-lg font-bold tracking-tight text-white flex items-center gap-2">
+                    Coulomb Field Sandbox <span class="text-xs bg-gray-800 text-blue-400 border border-blue-500/30 px-2 py-0.5 rounded-full font-mono">v2.5</span>
+                </h1>
+                <p class="text-xs text-gray-400 hidden sm:block">Dynamic electric field lines & many-body Coulomb interactions</p>
+            </div>
+        </div>
+        <!-- Desktop Quick Stats -->
+        <div class="flex items-center space-x-6 text-xs text-gray-400 font-mono">
+            <div>Charges: <span id="stat-charges" class="text-white font-bold">0</span></div>
+            <div>FPS: <span id="stat-fps" class="text-emerald-400 font-bold">60</span></div>
+        </div>
+    </header>
+    <!-- Main Container Layout -->
+    <main class="flex-1 flex flex-col md:flex-row relative overflow-hidden">
+        <!-- Canvas Viewport -->
+        <div class="flex-1 relative bg-black overflow-hidden h-full">
+            <canvas id="physics-canvas" class="block w-full h-full cursor-grab active:cursor-grabbing"></canvas>
+            <!-- On-Screen Controls Overlay (Floating) -->
+            <div class="absolute bottom-6 left-6 right-6 md:right-auto flex flex-wrap gap-3 z-10">
+                <button id="btn-add-pos" class="flex items-center gap-2 px-4 py-2.5 bg-red-600/90 hover:bg-red-500 text-white font-semibold rounded-lg shadow-lg hover:shadow-red-500/20 active:scale-95 transition duration-150 text-sm">
+                    <span class="text-lg font-black">+</span> Add Positive
+                </button>
+                <button id="btn-add-neg" class="flex items-center gap-2 px-4 py-2.5 bg-blue-600/90 hover:bg-blue-500 text-white font-semibold rounded-lg shadow-lg hover:shadow-blue-500/20 active:scale-95 transition duration-150 text-sm">
+                    <span class="text-lg font-black">&minus;</span> Add Negative
+                </button>
+                <button id="btn-clear" class="flex items-center gap-2 px-4 py-2.5 bg-gray-800/90 hover:bg-gray-700 text-gray-300 rounded-lg border border-gray-700 hover:border-gray-600 active:scale-95 transition duration-150 text-sm">
+                    Clear Sandbox
+                </button>
+            </div>
+            <!-- Welcome/Instructive overlay banner -->
+            <div id="instruction-overlay" class="absolute top-4 left-4 right-4 bg-gray-950/85 border border-gray-800 p-4 rounded-xl max-w-md pointer-events-none transition-opacity duration-500 z-10">
+                <h3 class="text-sm font-semibold text-white flex items-center gap-2">
+                    💡 Sandbox Instructions
+                </h3>
+                <ul class="text-xs text-gray-400 mt-1.5 space-y-1 list-disc list-inside">
+                    <li>Drag existing charges to reposition them.</li>
+                    <li>Toggle physics to let them orbit, attract, or repel!</li>
+                    <li>Add multiple charges to see intricate field patterns.</li>
+                </ul>
+            </div>
+        </div>
+        <!-- Sidebar Config & Tuning Panel -->
+        <aside class="w-full md:w-80 bg-[#111827] border-t md:border-t-0 md:border-l border-gray-800 p-6 flex flex-col overflow-y-auto shrink-0 z-10 max-h-[40vh] md:max-h-none">
+            <!-- Subsection: Preset Configurations -->
+            <div class="mb-6">
+                <h2 class="text-xs font-semibold text-gray-400 tracking-wider uppercase mb-3">Simulation Presets</h2>
+                <div class="grid grid-cols-2 gap-2">
+                    <button class="preset-btn px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg text-xs font-medium text-white transition text-center" data-preset="dipole">
+                        🧲 Dipole
+                    </button>
+                    <button class="preset-btn px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg text-xs font-medium text-white transition text-center" data-preset="quadrupole">
+                        🌀 Quadrupole
+                    </button>
+                    <button class="preset-btn px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg text-xs font-medium text-white transition text-center" data-preset="chaos">
+                        💫 Chaotic Orbit
+                    </button>
+                    <button class="preset-btn px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg text-xs font-medium text-white transition text-center" data-preset="grid">
+                        ⏹️ Particle Grid
+                    </button>
+                </div>
+            </div>
+            <!-- Subsection: Physics Play/Pause -->
+            <div class="mb-6 flex gap-2">
+                <button id="btn-toggle-physics" class="flex-1 py-2.5 rounded-lg font-bold text-sm flex items-center justify-center gap-2 shadow transition duration-200 bg-emerald-600 hover:bg-emerald-500 text-white">
+                    <span id="play-pause-icon">⏸</span> <span id="play-pause-text">Pause Physics</span>
+                </button>
+            </div>
+            <!-- Divider -->
+            <hr class="border-gray-800 mb-6" />
+            <!-- Subsection: Toggles -->
+            <div class="space-y-3 mb-6">
+                <h2 class="text-xs font-semibold text-gray-400 tracking-wider uppercase mb-1">Display Toggles</h2>
+                <label class="flex items-center justify-between cursor-pointer py-1">
+                    <span class="text-xs text-gray-300">Show Field Lines</span>
+                    <input type="checkbox" id="toggle-field-lines" class="rounded bg-gray-800 border-gray-700 text-blue-600 focus:ring-blue-500 h-4 w-4" checked>
+                </label>
+                <label class="flex items-center justify-between cursor-pointer py-1">
+                    <span class="text-xs text-gray-300">Animate Vector Flow</span>
+                    <input type="checkbox" id="toggle-vector-flow" class="rounded bg-gray-800 border-gray-700 text-blue-600 focus:ring-blue-500 h-4 w-4" checked>
+                </label>
+                <label class="flex items-center justify-between cursor-pointer py-1">
+                    <span class="text-xs text-gray-300">Bounce on Canvas Edge</span>
+                    <input type="checkbox" id="toggle-bounds" class="rounded bg-gray-800 border-gray-700 text-blue-600 focus:ring-blue-500 h-4 w-4" checked>
+                </label>
+            </div>
+            <!-- Divider -->
+            <hr class="border-gray-800 mb-6" />
+            <!-- Subsection: Param Sliders -->
+            <div class="space-y-5 flex-1">
+                <h2 class="text-xs font-semibold text-gray-400 tracking-wider uppercase mb-1">Physical Constants</h2>
+                <!-- Coulomb Strength -->
+                <div>
+                    <div class="flex justify-between items-center mb-1.5">
+                        <span class="text-xs text-gray-300">Coulomb Constant ($k_e$)</span>
+                        <span id="val-k" class="text-xs font-mono text-blue-400">1000</span>
+                    </div>
+                    <input type="range" id="slide-k" min="100" max="5000" step="50" value="1200" class="w-full">
+                </div>
+                <!-- Simulation Friction (Damping) -->
+                <div>
+                    <div class="flex justify-between items-center mb-1.5">
+                        <span class="text-xs text-gray-300">Medium Viscosity (Damping)</span>
+                        <span id="val-damping" class="text-xs font-mono text-blue-400">1%</span>
+                    </div>
+                    <input type="range" id="slide-damping" min="0" max="100" step="1" value="5" class="w-full">
+                </div>
+                <!-- Softening Factor (to avoid divide by zero singularities) -->
+                <div>
+                    <div class="flex justify-between items-center mb-1.5">
+                        <span class="text-xs text-gray-300">Singularity Softening ($\epsilon^2$)</span>
+                        <span id="val-softening" class="text-xs font-mono text-blue-400">400</span>
+                    </div>
+                    <input type="range" id="slide-softening" min="100" max="2500" step="50" value="400" class="w-full">
+                </div>
+                <!-- Line Density -->
+                <div>
+                    <div class="flex justify-between items-center mb-1.5">
+                        <span class="text-xs text-gray-300">Lines per Charge</span>
+                        <span id="val-density" class="text-xs font-mono text-blue-400">12</span>
+                    </div>
+                    <input type="range" id="slide-density" min="4" max="24" step="2" value="12" class="w-full">
+                </div>
+                <!-- Vector Flow speed -->
+                <div>
+                    <div class="flex justify-between items-center mb-1.5">
+                        <span class="text-xs text-gray-300">Flow Indicator Velocity</span>
+                        <span id="val-flow-speed" class="text-xs font-mono text-blue-400">Medium</span>
+                    </div>
+                    <input type="range" id="slide-flow-speed" min="1" max="10" step="0.5" value="4" class="w-full">
+                </div>
+            </div>
+            <!-- Bottom Disclaimer/Footer info -->
+            <div class="mt-6 pt-6 border-t border-gray-800 text-[10px] text-gray-500 leading-relaxed font-mono">
+                Formula used: $F = k_e \frac{q_1 q_2}{r^2 + \epsilon^2}$. Lines integrated via Euler-Heun path-tracer.
+            </div>
+        </aside>
+    </main>
+    <!-- App Logic Script -->
+    <script>
+        // Setup state variables
+        const canvas = document.getElementById('physics-canvas');
+        const ctx = canvas.getContext('2d');
+        // High DPI Support
+        function resizeCanvas() {
+            const rect = canvas.getBoundingClientRect();
+            canvas.width = rect.width * window.devicePixelRatio;
+            canvas.height = rect.height * window.devicePixelRatio;
+            ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+        }
+        window.addEventListener('resize', resizeCanvas);
+        // Physics variables & configs
+        let particles = [];
+        let physicsEnabled = true;
+        let showFieldLines = true;
+        let showVectorFlow = true;
+        let bounceBounds = true;
+        // Constants from slider inputs
+        let k_e = 1200;
+        let dampingCoeff = 0.005; // Friction % (damping = 1 - dampingCoeff)
+        let softening = 400; // soft factor to prevent infinite forces at proximity
+        let linesPerCharge = 12;
+        let flowVelocityMultiplier = 4;
+        // Interaction state
+        let selectedParticle = null;
+        let isDragging = false;
+        let lastMousePos = { x: 0, y: 0 };
+        // FPS tracking
+        let lastTime = performance.now();
+        let fps = 60;
+        let flowAnimOffset = 0; // global offset parameter for flowing arrows
+        // Model of particle charge
+        class ChargeParticle {
+            constructor(x, y, charge) {
+                this.x = x;
+                this.y = y;
+                this.charge = charge; // Positive (+1) or Negative (-1)
+                this.vx = 0;
+                this.vy = 0;
+                this.radius = 18;
+                this.mass = Math.abs(charge) * 1.5; // proportional to charge value
+            }
+            draw() {
+                ctx.save();
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+                // Glow style based on charge sign
+                if (this.charge > 0) {
+                    ctx.fillStyle = '#ef4444'; // Red
+                    ctx.shadowColor = 'rgba(239, 68, 68, 0.7)';
+                } else {
+                    ctx.fillStyle = '#3b82f6'; // Blue
+                    ctx.shadowColor = 'rgba(59, 130, 246, 0.7)';
+                }
+                ctx.shadowBlur = 15;
+                ctx.fill();
+                // Draw outline border
+                ctx.lineWidth = 2;
+                ctx.strokeStyle = '#ffffff';
+                ctx.shadowBlur = 0; // turn off shadow for lines
+                ctx.stroke();
+                // Draw central sign indicator (+ or -)
+                ctx.font = 'bold 20px monospace';
+                ctx.fillStyle = '#ffffff';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(this.charge > 0 ? '+' : '−', this.x, this.y - 1);
+                ctx.restore();
+            }
+            containsPoint(px, py) {
+                const dist = Math.hypot(this.x - px, this.y - py);
+                return dist < this.radius + 8;
+            }
+        }
+        // Initialize Simulation Canvas
+        function init() {
+            resizeCanvas();
+            loadPreset('dipole');
+            setupControls();
+            // Fade out instructions after 5s
+            setTimeout(() => {
+                document.getElementById('instruction-overlay').style.opacity = '0';
+            }, 6000);
+            // Start animation loop
+            requestAnimationFrame(updateLoop);
+        }
+        // Setup Controls & UI Observers
+        function setupControls() {
+            // Slider linkages
+            const bindSlider = (id, valId, callback, suffix = '') => {
+                const slider = document.getElementById(id);
+                const display = document.getElementById(valId);
+                slider.addEventListener('input', (e) => {
+                    const val = parseFloat(e.target.value);
+                    display.innerText = val + suffix;
+                    callback(val);
+                });
+            };
+            bindSlider('slide-k', 'val-k', (v) => k_e = v);
+            bindSlider('slide-damping', 'val-damping', (v) => dampingCoeff = v / 100, '%');
+            bindSlider('slide-softening', 'val-softening', (v) => softening = v);
+            bindSlider('slide-density', 'val-density', (v) => linesPerCharge = v);
+            bindSlider('slide-flow-speed', 'val-flow-speed', (v) => {
+                flowVelocityMultiplier = v;
+                const txt = v < 3 ? 'Slow' : (v < 7 ? 'Medium' : 'Fast');
+                document.getElementById('val-flow-speed').innerText = txt;
+            });
+            // Toggles
+            document.getElementById('toggle-field-lines').addEventListener('change', (e) => {
+                showFieldLines = e.target.checked;
+            });
+            document.getElementById('toggle-vector-flow').addEventListener('change', (e) => {
+                showVectorFlow = e.target.checked;
+            });
+            document.getElementById('toggle-bounds').addEventListener('change', (e) => {
+                bounceBounds = e.target.checked;
+            });
+            // Play/Pause Action
+            const toggleBtn = document.getElementById('btn-toggle-physics');
+            const playPauseIcon = document.getElementById('play-pause-icon');
+            const playPauseText = document.getElementById('play-pause-text');
+            toggleBtn.addEventListener('click', () => {
+                physicsEnabled = !physicsEnabled;
+                if (physicsEnabled) {
+                    toggleBtn.className = "flex-1 py-2.5 rounded-lg font-bold text-sm flex items-center justify-center gap-2 shadow transition duration-200 bg-emerald-600 hover:bg-emerald-500 text-white";
+                    playPauseIcon.innerText = "⏸";
+                    playPauseText.innerText = "Pause Physics";
+                } else {
+                    toggleBtn.className = "flex-1 py-2.5 rounded-lg font-bold text-sm flex items-center justify-center gap-2 shadow transition duration-200 bg-amber-600 hover:bg-amber-500 text-white";
+                    playPauseIcon.innerText = "▶";
+                    playPauseText.innerText = "Resume Physics";
+                }
+            });
+            // Sandbox clear/add actions
+            document.getElementById('btn-clear').addEventListener('click', () => {
+                particles = [];
+                updateStats();
+            });
+            document.getElementById('btn-add-pos').addEventListener('click', () => {
+                const { w, h } = getCanvasLogicalSize();
+                const x = w / 2 + (Math.random() - 0.5) * 150;
+                const y = h / 2 + (Math.random() - 0.5) * 150;
+                particles.push(new ChargeParticle(x, y, 1.0));
+                updateStats();
+            });
+            document.getElementById('btn-add-neg').addEventListener('click', () => {
+                const { w, h } = getCanvasLogicalSize();
+                const x = w / 2 + (Math.random() - 0.5) * 150;
+                const y = h / 2 + (Math.random() - 0.5) * 150;
+                particles.push(new ChargeParticle(x, y, -1.0));
+                updateStats();
+            });
+            // Presets
+            document.querySelectorAll('.preset-btn').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    const preset = e.target.getAttribute('data-preset');
+                    loadPreset(preset);
+                });
+            });
+            // Interaction Drag Logic (Mouse & Touch)
+            const getCoords = (e) => {
+                const rect = canvas.getBoundingClientRect();
+                const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+                const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+                // Scale back based on element bounding box vs coordinate spacing
+                return {
+                    x: (clientX - rect.left),
+                    y: (clientY - rect.top)
+                };
+            };
+            const dragStart = (coords) => {
+                for (let p of particles) {
+                    if (p.containsPoint(coords.x, coords.y)) {
+                        selectedParticle = p;
+                        isDragging = true;
+                        lastMousePos = coords;
+                        break;
+                    }
+                }
+            };
+            const dragMove = (coords) => {
+                if (isDragging && selectedParticle) {
+                    selectedParticle.x = coords.x;
+                    selectedParticle.y = coords.y;
+                    // Reset velocities during drag so it doesn't build crazy speed
+                    selectedParticle.vx = 0;
+                    selectedParticle.vy = 0;
+                }
+            };
+            const dragEnd = () => {
+                isDragging = false;
+                selectedParticle = null;
+            };
+            canvas.addEventListener('mousedown', (e) => dragStart(getCoords(e)));
+            canvas.addEventListener('mousemove', (e) => dragMove(getCoords(e)));
+            window.addEventListener('mouseup', dragEnd);
+            canvas.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                dragStart(getCoords(e));
+            }, { passive: false });
+            canvas.addEventListener('touchmove', (e) => {
+                e.preventDefault();
+                dragMove(getCoords(e));
+            }, { passive: false });
+            window.addEventListener('touchend', dragEnd);
+        }
+        // Get Logical size for styling boundaries
+        function getCanvasLogicalSize() {
+            const rect = canvas.getBoundingClientRect();
+            return { w: rect.width, h: rect.height };
+        }
+        // Reusable configuration setup
+        function loadPreset(name) {
+            const { w, h } = getCanvasLogicalSize();
+            particles = [];
+            // Re-center setup dynamically based on size
+            const cx = w > 0 ? w / 2 : 400;
+            const cy = h > 0 ? h / 2 : 300;
+            if (name === 'dipole') {
+                particles.push(new ChargeParticle(cx - 100, cy, 1.0));
+                particles.push(new ChargeParticle(cx + 100, cy, -1.0));
+            } else if (name === 'quadrupole') {
+                particles.push(new ChargeParticle(cx - 100, cy - 80, 1.0));
+                particles.push(new ChargeParticle(cx + 100, cy - 80, -1.0));
+                particles.push(new ChargeParticle(cx - 100, cy + 80, -1.0));
+                particles.push(new ChargeParticle(cx + 100, cy + 80, 1.0));
+            } else if (name === 'chaos') {
+                // Fixed massive heavy negative charge inside, lightweight positive orbits
+                const heavyCenter = new ChargeParticle(cx, cy, -3.0);
+                heavyCenter.radius = 26;
+                particles.push(heavyCenter);
+                const orbiter1 = new ChargeParticle(cx - 160, cy, 0.8);
+                orbiter1.vy = 4.5; // horizontal spin-velocity
+                orbiter1.vx = -1.2;
+                particles.push(orbiter1);
+                const orbiter2 = new ChargeParticle(cx + 180, cy + 10, 0.8);
+                orbiter2.vy = -3.8;
+                orbiter2.vx = 0.5;
+                particles.push(orbiter2);
+            } else if (name === 'grid') {
+                // Alternating matrix of positive and negatives
+                const sizeX = 3;
+                const sizeY = 3;
+                const spacingX = Math.min(150, w / 4);
+                const spacingY = Math.min(130, h / 4);
+                const startX = cx - ((sizeX - 1) * spacingX) / 2;
+                const startY = cy - ((sizeY - 1) * spacingY) / 2;
+                for (let i = 0; i < sizeX; i++) {
+                    for (let j = 0; j < sizeY; j++) {
+                        const type = (i + j) % 2 === 0 ? 1.0 : -1.0;
+                        particles.push(new ChargeParticle(startX + i * spacingX, startY + j * spacingY, type));
+                    }
+                }
+            }
+            updateStats();
+        }
+        // Live stats rendering
+        function updateStats() {
+            document.getElementById('stat-charges').innerText = particles.length;
+        }
+        // Calculate Electric Field Vector E(x, y) at any coordinate
+        function calculateEField(x, y) {
+            let Ex = 0;
+            let Ey = 0;
+            for (let p of particles) {
+                const dx = x - p.x;
+                const dy = y - p.y;
+                const dSq = dx * dx + dy * dy;
+                // Introduce softening factor to avoid numerical infinity (singularity) near the point charge
+                const denominator = Math.pow(dSq + softening, 1.5);
+                // E = k_e * q / r^2
+                const magnitude = (k_e * p.charge) / denominator;
+                Ex += magnitude * dx;
+                Ey += magnitude * dy;
+            }
+            return { Ex, Ey };
+        }
+        // Vector tracing algorithm for field lines
+        function traceFieldLine(startX, startY, direction) {
+            const { w, h } = getCanvasLogicalSize();
+            const points = [{ x: startX, y: startY }];
+            let x = startX;
+            let y = startY;
+            const maxSteps = 160;
+            const stepSize = 8; // Step size of the Euler integration path tracer
+            for (let step = 0; step < maxSteps; step++) {
+                const { Ex, Ey } = calculateEField(x, y);
+                const E_mag = Math.hypot(Ex, Ey);
+                if (E_mag < 0.0001) break; // field is zero
+                // Direction of integration step
+                const dx = (Ex / E_mag) * stepSize * direction;
+                const dy = (Ey / E_mag) * stepSize * direction;
+                x += dx;
+                y += dy;
+                points.push({ x, y });
+                // Bounds termination check
+                if (x < -100 || x > w + 100 || y < -100 || y > h + 100) {
+                    break;
+                }
+                // Hit detection check with nearby charge
+                let hitCharge = false;
+                for (let p of particles) {
+                    const distToP = Math.hypot(x - p.x, y - p.y);
+                    if (distToP < p.radius - 2) {
+                        // Landed on or inside the charge
+                        hitCharge = true;
+                        break;
+                    }
+                }
+                if (hitCharge) {
+                    break;
+                }
+            }
+            return points;
+        }
+        // Render calculated lines and fluid movement vectors
+        function drawElectricField() {
+            if (particles.length === 0) return;
+            const linesToTrace = [];
+            // Spawn paths radiating outward from positive charges, and inward to negative ones
+            particles.forEach(p => {
+                const N = Math.floor(linesPerCharge * Math.abs(p.charge));
+                for (let i = 0; i < N; i++) {
+                    const angle = (Math.PI * 2 * i) / N;
+                    // Slightly offset outward from the border of the charge
+                    const startX = p.x + Math.cos(angle) * (p.radius + 1);
+                    const startY = p.y + Math.sin(angle) * (p.radius + 1);
+                    // Integrate forward (+) if charge is positive, backward (-) if negative
+                    const dir = p.charge > 0 ? 1 : -1;
+                    linesToTrace.push(traceFieldLine(startX, startY, dir));
+                }
+            });
+            // Draw Paths on Canvas
+            linesToTrace.forEach(line => {
+                if (line.length < 2) return;
+                if (showFieldLines) {
+                    ctx.beginPath();
+                    ctx.moveTo(line[0].x, line[0].y);
+                    for (let i = 1; i < line.length; i++) {
+                        ctx.lineTo(line[i].x, line[i].y);
+                    }
+                    // Field line styling: Neon semi-transparent teal-white line style
+                    ctx.strokeStyle = 'rgba(243, 244, 246, 0.16)';
+                    ctx.lineWidth = 1.5;
+                    ctx.stroke();
+                }
+                // Show Animated Energy Flow
+                if (showVectorFlow) {
+                    // We can sample points along the calculated line to draw glowing field markers
+                    // The markers move down the path continuously based on global offset
+                    const speed = flowVelocityMultiplier * 0.5;
+                    const dashSpacing = 70; // gap distance between cascading glow points
+                    // Track path-length spacing to place dots perfectly
+                    let lengthAccumulator = 0;
+                    const segments = [];
+                    for (let i = 0; i < line.length - 1; i++) {
+                        const segmentLen = Math.hypot(line[i+1].x - line[i].x, line[i+1].y - line[i].y);
+                        segments.push({
+                            start: line[i],
+                            end: line[i+1],
+                            len: segmentLen,
+                            accum: lengthAccumulator
+                        });
+                        lengthAccumulator += segmentLen;
+                    }
+                    // Draw moving flow indicators
+                    let flowDist = flowAnimOffset % dashSpacing;
+                    while (flowDist < lengthAccumulator) {
+                        // Find the segment representing this distance
+                        const seg = segments.find(s => flowDist >= s.accum && flowDist <= s.accum + s.len);
+                        if (seg) {
+                            const ratio = (flowDist - seg.accum) / seg.len;
+                            const dotX = seg.start.x + (seg.end.x - seg.start.x) * ratio;
+                            const dotY = seg.start.y + (seg.end.y - seg.start.y) * ratio;
+                            // Draw a small bright field vector dot
+                            ctx.beginPath();
+                            ctx.arc(dotX, dotY, 2, 0, Math.PI * 2);
+                            ctx.fillStyle = 'rgba(255, 255, 255, 0.85)';
+                            ctx.shadowColor = '#00f2ff';
+                            ctx.shadowBlur = 4;
+                            ctx.fill();
+                            ctx.shadowBlur = 0; // reset
+                        }
+                        flowDist += dashSpacing;
+                    }
+                }
+            });
+        }
+        // Apply Coulomb many-body forces
+        function updatePhysics() {
+            if (!physicsEnabled) return;
+            // 1. Calculate and accumulate net force vector
+            const forces = particles.map(() => ({ fx: 0, fy: 0 }));
+            for (let i = 0; i < particles.length; i++) {
+                // Skip calculations for the charge currently held by user
+                if (particles[i] === selectedParticle) continue;
+                for (let j = 0; j < particles.length; j++) {
+                    if (i === j) continue;
+                    const p1 = particles[i];
+                    const p2 = particles[j];
+                    const dx = p1.x - p2.x;
+                    const dy = p1.y - p2.y;
+                    const dSq = dx * dx + dy * dy;
+                    // Compute vector distance
+                    const distance = Math.hypot(dx, dy);
+                    if (distance < 0.1) continue;
+                    // Electrostatic Force (Coulomb's Law): F = k_e * q1 * q2 / r^2
+                    // Softening factor avoids divide-by-zero singularity when particles overlaps
+                    const forceMag = (k_e * p1.charge * p2.charge) / (dSq + softening);
+                    // Direction of forces (like charges repel, opposite charges attract)
+                    forces[i].fx += (dx / distance) * forceMag;
+                    forces[i].fy += (dy / distance) * forceMag;
+                }
+            }
+            // 2. Integration and Update of Position and Velocity Vectors
+            const { w, h } = getCanvasLogicalSize();
+            const damping = 1 - dampingCoeff;
+            for (let i = 0; i < particles.length; i++) {
+                const p = particles[i];
+                if (p === selectedParticle) continue; // locked under mouse drag
+                const f = forces[i];
+                // F = m * a -> a = F / m
+                const ax = f.fx / p.mass;
+                const ay = f.fy / p.mass;
+                p.vx += ax;
+                p.vy += ay;
+                // Apply friction / viscous damping
+                p.vx *= damping;
+                p.vy *= damping;
+                p.x += p.vx;
+                p.y += p.vy;
+                // 3. Keep within canvas boundaries (Elastic or non-destructive bounces)
+                if (bounceBounds) {
+                    const padding = p.radius;
+                    if (p.x < padding) {
+                        p.x = padding;
+                        p.vx *= -0.6; // absorb partial kinetic energy on hit
+                    } else if (p.x > w - padding) {
+                        p.x = w - padding;
+                        p.vx *= -0.6;
+                    }
+                    if (p.y < padding) {
+                        p.y = padding;
+                        p.vy *= -0.6;
+                    } else if (p.y > h - padding) {
+                        p.y = h - padding;
+                        p.vy *= -0.6;
+                    }
+                }
+            }
+        }
+        // Animation Frame loop handler
+        function updateLoop() {
+            // Calculate real-time FPS
+            const now = performance.now();
+            const delta = now - lastTime;
+            lastTime = now;
+            fps = Math.round(1000 / delta);
+            document.getElementById('stat-fps').innerText = fps;
+            // Clear Canvas Frame
+            const { w, h } = getCanvasLogicalSize();
+            ctx.clearRect(0, 0, w, h);
+            // Redraw background space grid
+            drawBackgroundSpaceGrid(w, h);
+            // Update physical positions & velocities
+            updatePhysics();
+            // Render field lines and flow tracers
+            flowAnimOffset += flowVelocityMultiplier * 0.4;
+            drawElectricField();
+            // Render actual charged particles
+            particles.forEach(p => p.draw());
+            requestAnimationFrame(updateLoop);
+        }
+        // Premium ambient digital grid background
+        function drawBackgroundSpaceGrid(w, h) {
+            ctx.strokeStyle = 'rgba(31, 41, 55, 0.4)';
+            ctx.lineWidth = 1;
+            const step = 40;
+            for (let x = 0; x < w; x += step) {
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, h);
+                ctx.stroke();
+            }
+            for (let y = 0; y < h; y += step) {
+                ctx.beginPath();
+                ctx.moveTo(0, y);
+                ctx.lineTo(w, y);
+                ctx.stroke();
+            }
+        }
+        // Launch Application sandbox
+        window.onload = init;
+    </script>
+</body>
 </html>