Flujo Electrico - Simulacion Interactiva<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-color: #0f1218;\n --panel-bg: rgba(20, 25, 35, 0.92);\n --border-color: #2a3444;\n --text-main: #e8ecf2;\n --text-muted: #8899aa;\n --accent-violet: #9575cd; \/* Superficie *\/\n --accent-red: #ef5350; \/* Vector E *\/\n --accent-blue: #42a5f5; \/* Vector dA *\/\n --accent-green: #66bb6a; \/* Proyeccion *\/\n --accent-orange: #ffa726; \/* Lineas campo *\/\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'Space Grotesk', sans-serif;\n background: var(--bg-color);\n color: var(--text-main);\n overflow: hidden;\n }\n\n #canvas-container {\n position: fixed;\n inset: 0;\n z-index: 1;\n }\n\n .control-panel {\n position: fixed;\n top: 20px;\n left: 20px;\n width: 320px;\n background: var(--panel-bg);\n border: 1px solid var(--border-color);\n border-radius: 16px;\n padding: 24px;\n z-index: 100;\n backdrop-filter: blur(16px);\n box-shadow: 0 8px 32px rgba(0,0,0,0.4);\n max-height: calc(100vh - 40px);\n overflow-y: auto;\n }\n\n .control-panel::-webkit-scrollbar { width: 4px; }\n .control-panel::-webkit-scrollbar-track { background: transparent; }\n .control-panel::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }\n\n .panel-title {\n font-size: 1.2rem;\n font-weight: 700;\n margin-bottom: 4px;\n color: var(--text-main);\n }\n\n .panel-subtitle {\n font-size: 0.8rem;\n color: var(--text-muted);\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 1px solid var(--border-color);\n }\n\n .section-header {\n font-size: 0.7rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n color: var(--text-muted);\n margin: 20px 0 12px 0;\n }\n\n .control-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n }\n\n .control-label {\n font-size: 0.9rem;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .dot-indicator {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n }\n\n .switch {\n position: relative;\n width: 48px;\n height: 26px;\n background: #1e2633;\n border-radius: 13px;\n cursor: pointer;\n transition: background 0.3s;\n }\n\n .switch.active { background: var(--accent-violet); }\n\n .switch::after {\n content: '';\n position: absolute;\n top: 3px;\n left: 3px;\n width: 20px;\n height: 20px;\n background: white;\n border-radius: 50%;\n transition: transform 0.3s;\n }\n\n .switch.active::after { transform: translateX(22px); }\n\n .slider-group { margin-bottom: 16px; }\n .slider-header {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n font-size: 0.85rem;\n }\n \n .slider-val { color: var(--accent-violet); font-family: 'JetBrains Mono', monospace; }\n\n input[type=\"range\"] {\n width: 100%;\n height: 4px;\n background: #1e2633;\n border-radius: 2px;\n outline: none;\n -webkit-appearance: none;\n }\n\n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n background: white;\n border-radius: 50%;\n cursor: pointer;\n box-shadow: 0 2px 6px rgba(0,0,0,0.3);\n }\n\n .info-panel {\n position: fixed;\n top: 20px;\n right: 20px;\n width: 280px;\n background: var(--panel-bg);\n border: 1px solid var(--border-color);\n border-radius: 16px;\n padding: 24px;\n z-index: 100;\n backdrop-filter: blur(16px);\n text-align: center;\n max-height: calc(100vh - 40px);\n overflow-y: auto;\n }\n\n .info-panel::-webkit-scrollbar { width: 4px; }\n .info-panel::-webkit-scrollbar-track { background: transparent; }\n .info-panel::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }\n\n .theta-display {\n font-size: 3.5rem;\n font-weight: 700;\n font-family: 'JetBrains Mono', monospace;\n color: var(--text-main);\n line-height: 1;\n margin: 10px 0;\n }\n\n .theta-label {\n font-size: 0.8rem;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n\n .flux-box {\n background: rgba(0,0,0,0.2);\n border-radius: 12px;\n padding: 16px;\n margin-top: 16px;\n font-family: 'Times New Roman', serif;\n font-style: italic;\n font-size: 1.4rem;\n }\n\n \/* --- NUEVO: Estilos para el calculo de flujo total --- *\/\n .flux-result-section {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid var(--border-color);\n }\n\n .flux-total-label {\n font-size: 0.8rem;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 8px;\n }\n\n .flux-total-value {\n font-family: 'JetBrains Mono', monospace;\n font-size: 1.2rem;\n font-weight: 700;\n color: var(--accent-green);\n margin-bottom: 4px;\n word-break: break-all;\n }\n\n .flux-formula-line {\n font-family: 'JetBrains Mono', monospace;\n font-size: 0.7rem;\n color: var(--text-muted);\n margin-top: 6px;\n line-height: 1.5;\n }\n\n .enclosed-status {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.78rem;\n margin-top: 10px;\n padding: 10px 12px;\n border-radius: 8px;\n background: rgba(0,0,0,0.2);\n text-align: left;\n }\n\n .enclosed-status.inside {\n color: var(--accent-green);\n border-left: 3px solid var(--accent-green);\n }\n\n .enclosed-status.outside {\n color: var(--accent-red);\n border-left: 3px solid var(--accent-red);\n }\n\n .enclosed-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n \/* --- FIN NUEVO --- *\/\n\n .legend {\n margin-top: 24px;\n text-align: left;\n padding-top: 16px;\n border-top: 1px solid var(--border-color);\n }\n\n .legend-item {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n font-size: 0.8rem;\n color: var(--text-muted);\n }\n .legend-line { width: 20px; height: 3px; border-radius: 2px; }\n\n .instructions {\n position: fixed;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n background: var(--panel-bg);\n padding: 10px 20px;\n border-radius: 8px;\n font-size: 0.75rem;\n color: var(--text-muted);\n z-index: 100;\n border: 1px solid var(--border-color);\n }\n\n .logo-box {\n position: fixed;\n bottom: 20px;\n right: 20px;\n display: flex;\n align-items: center;\n gap: 12px;\n background: rgba(20, 25, 35, 0.9);\n padding: 12px 16px;\n border-radius: 10px;\n border: 1px solid var(--border-color);\n z-index: 100;\n }\n \n .logo-img { width: 100px; }\n .logo-text { font-size: 0.75rem; line-height: 1.4; color: var(--text-muted); }\n .logo-text b { display: block; color: var(--text-main); font-weight: 600; }\n\n <\/style>\n<\/head>\n<body>\n\n<div id=\"canvas-container\"><\/div>\n\n\n<div class=\"control-panel\">\n <div class=\"panel-title\">Flujo Electrico<\/div>\n <div class=\"panel-subtitle\">Visualizacion de Superficie Gaussiana<\/div>\n\n <div class=\"section-header\">Opciones de Visualizacion<\/div>\n\n <div class=\"control-item\">\n <div class=\"control-label\"><div class=\"dot-indicator\" style=\"background: var(--accent-orange)\"><\/div>Lineas de Campo E<\/div>\n <div class=\"switch active\" id=\"tglLines\"><\/div>\n <\/div>\n <div class=\"control-item\">\n <div class=\"control-label\"><div class=\"dot-indicator\" style=\"background: var(--accent-violet)\"><\/div>Elemento dA<\/div>\n <div class=\"switch active\" id=\"tglDA\"><\/div>\n <\/div>\n <div class=\"control-item\">\n <div class=\"control-label\"><div class=\"dot-indicator\" style=\"background: var(--accent-green)\"><\/div>Proyeccion dA cos(theta)<\/div>\n <div class=\"switch active\" id=\"tglProj\"><\/div>\n <\/div>\n <div class=\"control-item\">\n <div class=\"control-label\"><div class=\"dot-indicator\" style=\"background: var(--accent-red)\"><\/div>Vector E<\/div>\n <div class=\"switch active\" id=\"tglE\"><\/div>\n <\/div>\n <div class=\"control-item\">\n <div class=\"control-label\"><div class=\"dot-indicator\" style=\"background: var(--accent-blue)\"><\/div>Vector Area<\/div>\n <div class=\"switch active\" id=\"tglN\"><\/div>\n <\/div>\n\n <div class=\"section-header\">Transformar Superficie<\/div>\n\n <div class=\"slider-group\">\n <div class=\"slider-header\">\n <span>Tamano<\/span>\n <span class=\"slider-val\" id=\"valScale\">1.0x<\/span>\n <\/div>\n <input type=\"range\" id=\"sldScale\" min=\"0.5\" max=\"2.0\" step=\"0.1\" value=\"1.0\">\n <\/div>\n\n \n <div class=\"slider-group\">\n <div class=\"slider-header\">\n <span>Carga Q<\/span>\n <span class=\"slider-val\" id=\"valCharge\">1.0 µC<\/span>\n <\/div>\n <input type=\"range\" id=\"sldCharge\" min=\"-5.0\" max=\"5.0\" step=\"0.1\" value=\"1.0\">\n <\/div>\n\n<\/div>\n\n\n<div class=\"info-panel\">\n <div class=\"theta-label\">Angulo entre E y n<\/div>\n <div class=\"theta-display\" id=\"dispTheta\">0.0<\/div>\n \n <div class=\"flux-box\">\n <span style=\"color: var(--accent-violet)\">dPhi<\/span> = \n <span style=\"color: var(--accent-red)\">E<\/span> \n <span style=\"color: var(--accent-blue)\">dA<\/span> \n cos(<span style=\"color: var(--text-main)\" id=\"dispThetaSmall\">0<\/span>)\n <\/div>\n\n \n <div class=\"flux-result-section\">\n <div class=\"flux-total-label\">Flujo Total<\/div>\n <div class=\"flux-total-value\" id=\"fluxValue\">--<\/div>\n <div class=\"flux-formula-line\" id=\"fluxFormula\">Φ = Q<sub>int<\/sub> \/ ε₀<\/div>\n <div class=\"enclosed-status outside\" id=\"enclosedStatus\">\n <div class=\"enclosed-dot\" id=\"enclosedDot\" style=\"background: var(--accent-red)\"><\/div>\n <span id=\"enclosedText\">Calculando...<\/span>\n <\/div>\n <\/div>\n\n <div class=\"legend\">\n <div class=\"legend-item\"><div class=\"legend-line\" style=\"background: var(--accent-orange)\"><\/div>Lineas de campo electrico<\/div>\n <div class=\"legend-item\"><div class=\"legend-line\" style=\"background: var(--accent-red)\"><\/div>Vector campo electrico (E)<\/div>\n <div class=\"legend-item\"><div class=\"legend-line\" style=\"background: var(--accent-blue)\"><\/div>Vector normal\/area (n \/ dA)<\/div>\n <div class=\"legend-item\"><div class=\"legend-line\" style=\"background: var(--accent-green)\"><\/div>Area proyectada<\/div>\n <div class=\"legend-item\"><div class=\"legend-line\" style=\"background: var(--accent-violet)\"><\/div>Superficie gaussiana<\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"instructions\">\n Click Izq en superficie: Mover | Click Der en superficie: Rotar | Fondo: Rotar camara | Scroll: Zoom\n<\/div>\n\n\n<div class=\"logo-box\">\n <a href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/FISAR_SIM\/\" target=\"_blank\">\n <img decoding=\"async\" src=\"FISAR_SIM_1\" alt=\"Logo\" class=\"logo-img\"><\/a>\n <div class=\"logo-text\"><b>FICA -UNSL<\/b>Simulaciones Interactivas<\/div>\n<\/div>\n\n<script type=\"importmap\">\n{\n \"imports\": {\n \"three\": \"https:\/\/unpkg.com\/three@0.160.0\/build\/three.module.js\",\n \"three\/addons\/\": \"https:\/\/unpkg.com\/three@0.160.0\/examples\/jsm\/\"\n }\n}\n<\/script>\n\n<script type=\"module\">\nimport * as THREE from 'three';\nimport { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\n\n\/\/ --- CONFIGURACION DE ESCENA ---\nconst container = document.getElementById('canvas-container');\nconst scene = new THREE.Scene();\nscene.background = new THREE.Color(0x0f1218);\n\nconst camera = new THREE.PerspectiveCamera(50, window.innerWidth \/ window.innerHeight, 0.1, 1000);\ncamera.position.set(0, 5, 12);\n\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\nrenderer.setSize(window.innerWidth, window.innerHeight);\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\ncontainer.appendChild(renderer.domElement);\n\nconst orbitControls = new OrbitControls(camera, renderer.domElement);\norbitControls.enableDamping = true;\norbitControls.minDistance = 5;\norbitControls.maxDistance = 30;\n\n\/\/ --- INICIO MODIFICACION: ZOOM GRADUAL MANUAL ---\norbitControls.enableZoom = false;\n\nrenderer.domElement.addEventListener('wheel', (event) => {\n event.preventDefault();\n const zoomSpeed = 0.002;\n const delta = event.deltaY * zoomSpeed;\n const direction = new THREE.Vector3();\n camera.getWorldDirection(direction);\n camera.position.addScaledVector(direction, -delta * camera.position.length());\n}, { passive: false });\n\/\/ --- FIN MODIFICACION ---\n\n\/\/ Iluminacion\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.7);\nscene.add(ambientLight);\nconst dirLight = new THREE.DirectionalLight(0xffffff, 0.8);\ndirLight.position.set(5, 10, 7);\nscene.add(dirLight);\n\n\/\/ --- CREACION DE ASSETS ---\n\n\/\/ 1. Carga Puntual (Fija en el origen)\nconst chargeGeo = new THREE.SphereGeometry(0.3, 32, 32);\nconst chargeMat = new THREE.MeshStandardMaterial({ \n color: 0xffd54f, \n emissive: 0xffa000, \n emissiveIntensity: 0.6,\n roughness: 0.3\n});\nconst chargeMesh = new THREE.Mesh(chargeGeo, chargeMat);\nscene.add(chargeMesh);\n\n\/\/ --- Variables de estado (declaradas antes de createFieldLines para evitar TDZ) ---\nlet chargeValue = 1.0; \/\/ Carga en microCoulombs\nconst EPSILON_0 = 8.854187817e-12; \/\/ Permittividad del vacio en C^2\/(N*m^2)\nconst fluxRaycaster = new THREE.Raycaster();\n\nconst uiState = {\n showLines: true,\n showDA: true,\n showProj: true,\n showE: true,\n showN: true\n};\n\nlet fieldLinesSign = 1; \/\/ Track current direction: 1 = outward (positive), -1 = inward (negative)\n\n\/\/ 2. Lineas de Campo Electrico\nconst fieldLinesGroup = new THREE.Group();\nscene.add(fieldLinesGroup);\n\nfunction createFieldLines() {\n \/\/ Limpiar lineas anteriores\n while (fieldLinesGroup.children.length > 0) {\n const child = fieldLinesGroup.children[0];\n fieldLinesGroup.remove(child);\n if (child.geometry) child.geometry.dispose();\n if (child.material) child.material.dispose();\n }\n \n const lineCount = 12;\n const color = 0xffa726;\n \n \/\/ Determinar direccion: carga positiva -> lineas hacia afuera, carga negativa -> lineas hacia adentro\n const direction = chargeValue >= 0 ? 1 : -1;\n fieldLinesSign = direction;\n \n for (let i = 0; i < lineCount; i++) {\n const phi = Math.acos(1 - 2 * (i + 0.5) \/ lineCount);\n const theta = Math.PI * (1 + Math.sqrt(5)) * i;\n \n const dir = new THREE.Vector3(\n Math.sin(phi) * Math.cos(theta),\n Math.sin(phi) * Math.sin(theta),\n Math.cos(phi)\n );\n \n const points = [];\n if (direction === 1) {\n \/\/ Carga positiva: lineas van de adentro hacia afuera\n for (let k = 1; k < 40; k++) {\n points.push(dir.clone().multiplyScalar(k * 0.25));\n }\n } else {\n \/\/ Carga negativa: lineas van de afuera hacia adentro (se invierte el orden de los puntos)\n for (let k = 39; k >= 1; k--) {\n points.push(dir.clone().multiplyScalar(k * 0.25));\n }\n }\n \n const geo = new THREE.BufferGeometry().setFromPoints(points);\n const mat = new THREE.LineBasicMaterial({ color: color, transparent: true, opacity: 0.6 });\n const line = new THREE.Line(geo, mat);\n fieldLinesGroup.add(line);\n \n \/\/ Flecha en posicion intermedia indicando la direccion del campo\n const arrowDir = direction === 1 ? dir : dir.clone().negate();\n const arrowPos = dir.clone().multiplyScalar(4.5); \/\/ Posicion intermedia de la linea\n const arrow = new THREE.ArrowHelper(arrowDir, arrowPos, 0.8, color, 0.4, 0.2);\n fieldLinesGroup.add(arrow);\n }\n \n fieldLinesGroup.visible = uiState.showLines;\n}\ncreateFieldLines();\n\n\/\/ 3. Superficie Gaussiana Irregular (Movible)\nconst surfaceGroup = new THREE.Group();\nscene.add(surfaceGroup);\n\nlet surfaceGeometry = new THREE.SphereGeometry(3, 64, 64);\nconst positions = surfaceGeometry.attributes.position;\nfor (let i = 0; i < positions.count; i++) {\n const x = positions.getX(i);\n const y = positions.getY(i);\n const z = positions.getZ(i);\n const noise = 0.3 * Math.sin(5 * x) * Math.cos(4 * y) + 0.2 * Math.sin(3 * z);\n const factor = 1 + noise * 0.2;\n positions.setXYZ(i, x * factor, y * factor, z * factor);\n}\nsurfaceGeometry.computeVertexNormals();\n\nconst surfaceMaterial = new THREE.MeshPhongMaterial({\n color: 0x9575cd,\n transparent: true,\n opacity: 0.35,\n side: THREE.DoubleSide,\n depthWrite: false,\n shininess: 100\n});\n\nconst surfaceMesh = new THREE.Mesh(surfaceGeometry, surfaceMaterial);\nsurfaceGroup.add(surfaceMesh);\n\nconst wireMat = new THREE.MeshBasicMaterial({ color: 0x9575cd, wireframe: true, transparent: true, opacity: 0.1 });\nconst wireMesh = new THREE.Mesh(surfaceGeometry, wireMat);\nsurfaceGroup.add(wireMesh);\n\n\/\/ 4. Elementos dinamicos (dA, Vectores, Proyeccion)\nconst dynamicGroup = new THREE.Group();\nscene.add(dynamicGroup);\n\nconst localPoint = new THREE.Vector3(1, 1, 1).normalize().multiplyScalar(3);\n\nfunction createLabel(text, color) {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n const fontSize = 64;\n ctx.font = \"bold \" + fontSize + \"px 'Space Grotesk', sans-serif\";\n \/\/ Medir el ancho real del texto para ajustar el canvas\n const metrics = ctx.measureText(text);\n const textWidth = metrics.width;\n const padding = 16;\n canvas.width = Math.ceil(textWidth + padding * 2);\n canvas.height = fontSize + padding * 2;\n \/\/ Re-aplicar font despues de resize (se pierde al cambiar tama\u00f1o del canvas)\n ctx.font = \"bold \" + fontSize + \"px 'Space Grotesk', sans-serif\";\n ctx.fillStyle = color;\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(text, canvas.width \/ 2, canvas.height \/ 2);\n \n const tex = new THREE.CanvasTexture(canvas);\n const mat = new THREE.SpriteMaterial({ map: tex, transparent: true, sizeAttenuation: false });\n const sprite = new THREE.Sprite(mat);\n \/\/ Escala proporcional al aspecto del texto (ancho\/alto)\n const aspect = canvas.width \/ canvas.height;\n const baseHeight = 0.04;\n sprite.scale.set(baseHeight * aspect, baseHeight, 1);\n return sprite;\n}\n\n\/\/ (uiState, chargeValue, EPSILON_0, fluxRaycaster ya declarados arriba antes de createFieldLines)\n\n\/**\n * Determina si la carga puntual esta encerrada por la superficie gaussiana.\n * Utiliza raycasting desde la posicion de la carga: si el numero de intersecciones\n * con la superficie cerrada es impar, la carga esta dentro; si es par, esta fuera.\n * Cuando la superficie no encierra la carga, el flujo es cero.\n *\/\nfunction isChargeInsideSurface() {\n const chargePos = new THREE.Vector3();\n chargeMesh.getWorldPosition(chargePos);\n \n \/\/ Probar varias direcciones para mayor robustez\n const testDirections = [\n new THREE.Vector3(1, 0, 0),\n new THREE.Vector3(0, 1, 0),\n new THREE.Vector3(0, 0, 1),\n new THREE.Vector3(-1, 0, 0),\n new THREE.Vector3(0, -1, 0),\n new THREE.Vector3(0, 0, -1),\n ];\n \n for (const dir of testDirections) {\n fluxRaycaster.set(chargePos, dir);\n const intersects = fluxRaycaster.intersectObject(surfaceMesh, false);\n \n \/\/ Filtrar intersecciones muy cercanas para evitar falsos positivos\n const validHits = intersects.filter(i => i.distance > 0.05);\n \n if (validHits.length > 0) {\n \/\/ Numero impar = carga dentro de la superficie cerrada\n \/\/ Numero par = carga fuera de la superficie cerrada\n return validHits.length % 2 === 1;\n }\n }\n \n \/\/ Si no hay intersecciones en ninguna direccion, la carga esta fuera\n return false;\n}\n\n\/**\n * Calcula el flujo electrico total a traves de la superficie gaussiana.\n * Ley de Gauss: Phi = Q_encerrada \/ epsilon_0\n * Si la carga no esta encerrada, el flujo es cero.\n *\/\nfunction calculateFlux() {\n const isInside = isChargeInsideSurface();\n const q = chargeValue * 1e-6; \/\/ Convertir microC a C\n \n let totalFlux = 0;\n if (isInside) {\n totalFlux = q \/ EPSILON_0;\n }\n \n return { isInside, totalFlux, q };\n}\n\n\/**\n * Actualiza la seccion de flujo en el panel de informacion.\n *\/\nfunction updateFluxDisplay() {\n const result = calculateFlux();\n \n const fluxValueEl = document.getElementById('fluxValue');\n const fluxFormulaEl = document.getElementById('fluxFormula');\n const enclosedStatusEl = document.getElementById('enclosedStatus');\n const enclosedDotEl = document.getElementById('enclosedDot');\n const enclosedTextEl = document.getElementById('enclosedText');\n \n if (result.isInside) {\n \/\/ Carga encerrada: flujo = Q \/ epsilon_0\n if (Math.abs(result.totalFlux) < 1e-10) {\n fluxValueEl.textContent = '0 N\\u00B7m\\u00B2\/C';\n } else {\n fluxValueEl.textContent = result.totalFlux.toExponential(3) + ' N\\u00B7m\\u00B2\/C';\n }\n fluxValueEl.style.color = 'var(--accent-green)';\n \n \/\/ Mostrar formula con valores\n const qExp = (chargeValue * 1e-6).toExponential(1);\n const e0Exp = EPSILON_0.toExponential(2);\n fluxFormulaEl.innerHTML = 'Φ = Q<sub>int<\/sub> \/ ε₀ = ' + qExp + ' \/ ' + e0Exp;\n \n enclosedStatusEl.className = 'enclosed-status inside';\n enclosedDotEl.style.background = 'var(--accent-green)';\n enclosedTextEl.textContent = 'Carga encerrada: Q = ' + chargeValue.toFixed(1) + ' \\u03BCC';\n } else {\n \/\/ Carga fuera de la superficie: flujo = 0\n fluxValueEl.textContent = '0 N\\u00B7m\\u00B2\/C';\n fluxValueEl.style.color = 'var(--accent-red)';\n \n fluxFormulaEl.innerHTML = 'Φ = 0 (carga no encerrada)';\n \n enclosedStatusEl.className = 'enclosed-status outside';\n enclosedDotEl.style.background = 'var(--accent-red)';\n enclosedTextEl.textContent = 'Carga fuera de la superficie';\n }\n}\n\/\/ --- FIN NUEVO ---\n\nfunction updateDynamicElements() {\n dynamicGroup.clear();\n \n const worldPos = localPoint.clone().applyMatrix4(surfaceGroup.matrixWorld);\n const localNormal = localPoint.clone().normalize();\n const worldNormal = localNormal.clone().transformDirection(surfaceGroup.matrixWorld).normalize();\n \n \/\/ Vector E: apunta hacia afuera si carga positiva, hacia adentro si negativa\n const vecE = worldPos.clone().sub(chargeMesh.position).normalize().multiplyScalar(chargeValue >= 0 ? 1 : -1);\n \n let cosTheta = vecE.dot(worldNormal);\n cosTheta = Math.max(-1, Math.min(1, cosTheta));\n const theta = Math.acos(cosTheta);\n \n const thetaDeg = (theta * 180 \/ Math.PI).toFixed(1);\n document.getElementById('dispTheta').innerText = thetaDeg + '\\u00B0';\n document.getElementById('dispThetaSmall').innerText = thetaDeg + '\\u00B0';\n \n \/\/ Dibujar Elemento dA (Parche)\n if (uiState.showDA) {\n const dAGeo = new THREE.CircleGeometry(0.6, 32);\n const dAMat = new THREE.MeshBasicMaterial({ \n color: 0x9575cd,\n side: THREE.DoubleSide,\n transparent: true,\n opacity: 0.9\n });\n const dAMesh = new THREE.Mesh(dAGeo, dAMat);\n \n dAMesh.position.copy(worldPos);\n const up = new THREE.Vector3(0, 0, 1);\n const quat = new THREE.Quaternion().setFromUnitVectors(up, worldNormal);\n dAMesh.setRotationFromQuaternion(quat);\n dAMesh.position.add(worldNormal.clone().multiplyScalar(0.01));\n \n const edges = new THREE.LineSegments(new THREE.EdgesGeometry(dAGeo), new THREE.LineBasicMaterial({ color: 0xffffff }));\n edges.position.copy(dAMesh.position);\n edges.rotation.copy(dAMesh.rotation);\n \n dynamicGroup.add(dAMesh);\n dynamicGroup.add(edges);\n \n const lblDA = createLabel('dA', '#FFFFFF');\n lblDA.position.copy(worldPos).add(worldNormal.clone().multiplyScalar(0.4));\n dynamicGroup.add(lblDA);\n }\n \n \/\/ Dibujar Proyeccion dA cos(theta)\n if (uiState.showProj && Math.abs(cosTheta) > 0.05) {\n const radius = 0.6 * Math.abs(cosTheta);\n const projGeo = new THREE.CircleGeometry(radius, 32);\n const projMat = new THREE.MeshBasicMaterial({ \n color: 0x66bb6a,\n side: THREE.DoubleSide,\n transparent: true,\n opacity: 0.8\n });\n const projMesh = new THREE.Mesh(projGeo, projMat);\n \n const upProj = new THREE.Vector3(0, 0, 1);\n const quatProj = new THREE.Quaternion().setFromUnitVectors(upProj, vecE);\n projMesh.setRotationFromQuaternion(quatProj);\n \n projMesh.position.copy(worldPos).sub(vecE.clone().multiplyScalar(0.8));\n \n dynamicGroup.add(projMesh);\n \n const linePoints = [worldPos.clone().sub(worldNormal.clone().multiplyScalar(0.01)), projMesh.position];\n const lineGeo = new THREE.BufferGeometry().setFromPoints(linePoints);\n const lineMat = new THREE.LineDashedMaterial({ color: 0x66bb6a, dashSize: 0.1, gapSize: 0.05 });\n const line = new THREE.Line(lineGeo, lineMat);\n line.computeLineDistances();\n dynamicGroup.add(line);\n \n const lblProj = createLabel('dA cos\\u03b8', '#66bb6a');\n lblProj.position.copy(projMesh.position).sub(vecE.clone().multiplyScalar(0.4));\n dynamicGroup.add(lblProj);\n }\n \n \/\/ Vector E (Rojo)\n if (uiState.showE) {\n const arrowE = new THREE.ArrowHelper(vecE, worldPos, 2.0, 0xef5350, 0.4, 0.2);\n dynamicGroup.add(arrowE);\n \n const lblE = createLabel('E', '#ef5350');\n lblE.position.copy(worldPos).add(vecE.clone().multiplyScalar(2.4));\n dynamicGroup.add(lblE);\n }\n \n \/\/ Vector Normal \/ Area (Azul)\n if (uiState.showN) {\n const arrowN = new THREE.ArrowHelper(worldNormal, worldPos, 2.0, 0x42a5f5, 0.4, 0.2);\n dynamicGroup.add(arrowN);\n \n const lblN = createLabel('n', '#42a5f5');\n lblN.position.copy(worldPos).add(worldNormal.clone().multiplyScalar(2.4));\n dynamicGroup.add(lblN);\n }\n \n \/\/ Arco del angulo\n if (theta > 0.1) {\n const arcAxis = new THREE.Vector3().crossVectors(worldNormal, vecE).normalize();\n if (arcAxis.length() > 0.001) {\n const arcPoints = [];\n for (let i = 0; i <= 32; i++) {\n const a = (i \/ 32) * theta;\n const rot = new THREE.Quaternion().setFromAxisAngle(arcAxis, a);\n const dir = worldNormal.clone().applyQuaternion(rot).multiplyScalar(1.2);\n arcPoints.push(dir.add(worldPos));\n }\n const arcGeo = new THREE.BufferGeometry().setFromPoints(arcPoints);\n const arc = new THREE.Line(arcGeo, new THREE.LineDashedMaterial({ color: 0xffffff, dashSize: 0.05, gapSize: 0.03 }));\n arc.computeLineDistances();\n dynamicGroup.add(arc);\n \n const midAngle = theta \/ 2;\n const qMid = new THREE.Quaternion().setFromAxisAngle(arcAxis, midAngle);\n const dirLbl = worldNormal.clone().applyQuaternion(qMid).multiplyScalar(1.6);\n const lblT = createLabel('\\u03b8', '#FFFFFF');\n lblT.position.copy(worldPos).add(dirLbl);\n dynamicGroup.add(lblT);\n }\n }\n \n \/\/ --- NUEVO: Actualizar calculo de flujo total ---\n updateFluxDisplay();\n}\n\n\/\/ --- INTERACCION ---\n\nconst raycaster = new THREE.Raycaster();\nconst mouse = new THREE.Vector2();\nlet isDraggingSurface = false;\nlet isRotatingSurface = false;\nconst dragPlane = new THREE.Plane();\nconst intersection = new THREE.Vector3();\nconst offset = new THREE.Vector3();\n\nfunction onMouseDown(event) {\n if (event.target !== renderer.domElement) return;\n \n mouse.x = (event.clientX \/ window.innerWidth) * 2 - 1;\n mouse.y = -(event.clientY \/ window.innerHeight) * 2 + 1;\n \n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObject(surfaceMesh);\n \n if (intersects.length > 0) {\n if (event.button === 0) {\n isDraggingSurface = true;\n orbitControls.enabled = false;\n dragPlane.setFromNormalAndCoplanarPoint(camera.getWorldDirection(new THREE.Vector3()).negate(), surfaceGroup.position);\n raycaster.ray.intersectPlane(dragPlane, intersection);\n offset.subVectors(surfaceGroup.position, intersection);\n } else if (event.button === 2) {\n isRotatingSurface = true;\n orbitControls.enabled = false;\n }\n }\n}\n\nfunction onMouseMove(event) {\n mouse.x = (event.clientX \/ window.innerWidth) * 2 - 1;\n mouse.y = -(event.clientY \/ window.innerHeight) * 2 + 1;\n \n if (isDraggingSurface) {\n raycaster.setFromCamera(mouse, camera);\n raycaster.ray.intersectPlane(dragPlane, intersection);\n surfaceGroup.position.copy(intersection.add(offset));\n updateDynamicElements();\n } else if (isRotatingSurface) {\n surfaceGroup.rotation.y += event.movementX * 0.01;\n surfaceGroup.rotation.x += event.movementY * 0.01;\n updateDynamicElements();\n }\n}\n\nfunction onMouseUp() {\n isDraggingSurface = false;\n isRotatingSurface = false;\n orbitControls.enabled = true;\n}\n\nwindow.addEventListener('mousedown', onMouseDown);\nwindow.addEventListener('mousemove', onMouseMove);\nwindow.addEventListener('mouseup', onMouseUp);\nwindow.addEventListener('contextmenu', (e) => e.preventDefault());\n\n\/\/ --- UI CONTROLS ---\nfunction setupToggle(id, key) {\n const el = document.getElementById(id);\n el.addEventListener('click', () => {\n el.classList.toggle('active');\n uiState[key] = el.classList.contains('active');\n if (key === 'showLines') fieldLinesGroup.visible = uiState[key];\n else updateDynamicElements();\n });\n}\n\nsetupToggle('tglLines', 'showLines');\nsetupToggle('tglDA', 'showDA');\nsetupToggle('tglProj', 'showProj');\nsetupToggle('tglE', 'showE');\nsetupToggle('tglN', 'showN');\n\ndocument.getElementById('sldScale').addEventListener('input', (e) => {\n const v = parseFloat(e.target.value);\n document.getElementById('valScale').innerText = v.toFixed(1) + 'x';\n surfaceGroup.scale.setScalar(v);\n updateDynamicElements();\n});\n\n\/\/ --- NUEVO: Handler del slider de carga ---\ndocument.getElementById('sldCharge').addEventListener('input', (e) => {\n chargeValue = parseFloat(e.target.value);\n document.getElementById('valCharge').innerText = chargeValue.toFixed(1) + ' \\u03BCC';\n \/\/ Reconstruir lineas de campo si cambio el signo de la carga\n const newSign = chargeValue >= 0 ? 1 : -1;\n if (newSign !== fieldLinesSign) {\n createFieldLines();\n }\n updateDynamicElements();\n});\n\nwindow.addEventListener('resize', () => {\n camera.aspect = window.innerWidth \/ window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n});\n\n\/\/ Inicializar\nupdateDynamicElements();\n\n\/\/ Loop\nfunction animate() {\n requestAnimationFrame(animate);\n orbitControls.update();\n renderer.render(scene, camera);\n}\nanimate();\n\n<\/script>\n\n<style>\n .btn-guia {\n position: fixed;\n bottom: 24px;\n left: 24px;\n z-index: 999;\n background: #3fb950;\n color: #0d1117;\n font-family: 'Space Grotesk', sans-serif;\n font-size: 0.82rem;\n font-weight: 700;\n letter-spacing: 1px;\n text-transform: uppercase;\n padding: 10px 18px;\n border-radius: 8px;\n border: none;\n cursor: pointer;\n box-shadow: 0 4px 20px rgba(63,185,80,0.35);\n transition: transform 0.2s, box-shadow 0.2s;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .btn-guia:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 24px rgba(63,185,80,0.5);\n }\n .btn-guia svg { width: 15px; height: 15px; flex-shrink: 0; }\n .guia-panel {\n position: fixed;\n bottom: 72px;\n left: 24px;\n width: 400px;\n max-height: 70vh;\n z-index: 1000;\n background: #ffffff;\n border: 1px solid #d0d7de;\n border-radius: 12px;\n box-shadow: 0 16px 48px rgba(0,0,0,0.4);\n display: none;\n flex-direction: column;\n overflow: hidden;\n font-family: 'Space Grotesk', sans-serif;\n }\n .guia-panel.visible { display: flex; }\n .guia-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n border-bottom: 1px solid #d0d7de;\n flex-shrink: 0;\n background: #f6f8fa;\n }\n .guia-header-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.85rem;\n font-weight: 700;\n color: #1f2328;\n }\n .guia-header-title svg { width: 15px; height: 15px; color: #3fb950; }\n .guia-close {\n background: none;\n border: none;\n color: #636c76;\n font-size: 1rem;\n cursor: pointer;\n padding: 2px 7px;\n border-radius: 4px;\n transition: color 0.2s, background 0.2s;\n line-height: 1;\n }\n .guia-close:hover { color: #1f2328; background: rgba(0,0,0,0.06); }\n .guia-body {\n overflow-y: auto;\n padding: 18px 18px 20px;\n color: #1f2328;\n font-size: 0.83rem;\n line-height: 1.65;\n background: #ffffff;\n }\n .guia-body::-webkit-scrollbar { width: 5px; }\n .guia-body::-webkit-scrollbar-track { background: transparent; }\n .guia-body::-webkit-scrollbar-thumb { background: #d0d7de; border-radius: 3px; }\n .guia-section-title {\n font-size: 1rem;\n font-weight: 700;\n color: #1f2328;\n margin: 0 0 12px 0;\n padding-bottom: 8px;\n border-bottom: 1px solid #d0d7de;\n }\n .guia-block { margin-bottom: 14px; }\n .guia-label {\n font-size: 0.72rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: #636c76;\n margin-bottom: 4px;\n }\n .guia-text { color: #1f2328; }\n .guia-formula {\n background: #f6f8fa;\n border: 1px solid #d0d7de;\n border-radius: 6px;\n padding: 10px 14px;\n text-align: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 0.88rem;\n color: #0550ae;\n margin: 10px 0;\n }\n .guia-steps { list-style: none; margin: 0; padding: 0; counter-reset: steps; }\n .guia-steps li {\n counter-increment: steps;\n display: flex;\n gap: 10px;\n margin-bottom: 8px;\n align-items: flex-start;\n color: #1f2328;\n }\n .guia-steps li::before {\n content: counter(steps);\n background: #dafbe1;\n color: #1a7f37;\n font-size: 0.72rem;\n font-weight: 700;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-top: 1px;\n border: 1px solid #1a7f37;\n }\n .guia-result {\n background: #dafbe1;\n border-left: 3px solid #1a7f37;\n border-radius: 0 6px 6px 0;\n padding: 10px 14px;\n color: #1f2328;\n font-size: 0.82rem;\n margin-top: 10px;\n }\n .guia-params {\n background: #f6f8fa;\n border: 1px solid #d0d7de;\n border-radius: 6px;\n padding: 10px 14px;\n font-size: 0.8rem;\n color: #1f2328;\n }\n .guia-params span { color: #0550ae; font-family: 'JetBrains Mono', monospace; }\n .var { font-family: 'JetBrains Mono', monospace; }\n .var.pos { color: #cf222e; }\n .var.neg { color: #0550ae; }\n .var.neu { color: #7d4e00; }\n .var.ok { color: #1a7f37; }\n<\/style>\n\n<div class=\"guia-panel\" id=\"guiaPanel\">\n <div class=\"guia-header\">\n <div class=\"guia-header-title\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\n Guía de uso\n <\/div>\n <button class=\"guia-close\" onclick=\"toggleGuia()\">✕<\/button>\n <\/div>\n\n <div class=\"guia-body\">\n\n<div style=\"font-family: Arial, sans-serif; line-height: 1.6; color: #333;\">\n<h3 style=\"color: #0056b3;\"><strong><span style=\"font-size: 16px; color: #000080;\">Ley de Gauss<\/span> <\/strong><strong style=\"font-size: 1.618em;\"><span style=\"font-size: 16px; color: #000080;\"> <\/span><span style=\"font-size: 16px; color: #ff0000;\"> <\/span><\/strong><\/h3>\n<span style=\"font-size: 16px;\"><strong>Objetivo:<\/strong> Comprender la relación fundamental entre el flujo eléctrico neto a través de una superficie cerrada (superficie gaussiana) y la carga eléctrica neta encerrada en su interior.<\/span>\n\n\n<span style=\"font-size: 16px;\"><strong>Descripción breve:<\/strong> Simulación interactiva que permite posicionar cargas puntuales dentro y fuera de diversas superficies cerradas (esferas, cilindros o cubos). La herramienta permite visualizar cómo las líneas de campo atraviesan la superficie elegida y calcula en tiempo real el flujo neto resultante, demostrando que este solo depende de la carga encerrada según la expresión:<\/span>\n<div style=\"text-align: center; margin: 20px 0;\"><span style=\"font-size: 16px;\">\\( \\Phi = \\oint \\mathbf{E} \\cdot d\\mathbf{A} = \\frac{Q_{int}}{\\varepsilon_0} \\)<\/span><\/div>\n<span style=\"font-size: 16px;\"><strong>Cómo usar (pasos):<\/strong><\/span>\n<ul style=\"margin-left: 20px;\">\n <li><span style=\"font-size: 16px;\">Seleccionar el tipo de superficie gaussiana (esférica, cilíndrica o cúbica) y ajustar su tamaño (radio o arista).<\/span><\/li>\n <li><span style=\"font-size: 16px;\">Agregar cargas puntuales positivas o negativas al espacio de trabajo.<\/span><\/li>\n <li><span style=\"font-size: 16px;\">Arrastrar las cargas para situarlas dentro o fuera del volumen delimitado por la superficie.<\/span><\/li>\n <li><span style=\"font-size: 16px;\">Activar la visualización de las líneas de campo y los vectores diferenciales de área (\\(d\\mathbf{A}\\)) en puntos específicos.<\/span><\/li>\n <li><span style=\"font-size: 16px;\">Consultar el panel de datos para observar el valor del flujo neto (\\(\\Phi\\)) y la sumatoria de carga encerrada.<\/span><\/li>\n<\/ul>\n<span style=\"font-size: 16px;\"><strong>Parámetros ajustables:<\/strong> Tipo de superficie, dimensiones de la superficie, número de cargas, valor y signo de cada carga (\\(q_i\\)), posición de las cargas, mostrar\/ocultar líneas de fuerza y visualización de la constante \\(\\varepsilon_0\\).<\/span>\n<p style=\"background-color: #f8f9fa; padding: 15px; border-left: 5px solid #0056b3;\"><span style=\"font-size: 16px;\"><strong>Resultados esperados \/ observaciones:<\/strong> El flujo neto es proporcional a la suma algebraica de las cargas internas. Las cargas situadas fuera de la superficie no contribuyen al flujo neto total (el flujo que entra es igual al que sale). El flujo permanece constante independientemente del tamaño de la superficie siempre que la carga encerrada no cambie.<\/span><\/p>\n\n<\/div>\n\n <\/div>\n<\/div>\n\n<button class=\"btn-guia\" onclick=\"toggleGuia()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\n Guía de uso\n<\/button>\n\n<script>\n function toggleGuia() {\n document.getElementById('guiaPanel').classList.toggle('visible');\n }\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Flujo Electrico – Simulacion Interactiva Flujo Electrico Visualizacion de Superficie Gaussiana Opciones de Visualizacion Lineas de Campo E Elemento dA Proyeccion dA cos(theta) Vector E…<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-5605","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>ley_de_gauss_2 - F\u00edsica 2<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ley_de_gauss_2 - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"Flujo Electrico – Simulacion Interactiva Flujo Electrico Visualizacion de Superficie Gaussiana Opciones de Visualizacion Lineas de Campo E Elemento dA Proyeccion dA cos(theta) Vector E…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-19T17:36:23+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_gauss_2\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_gauss_2\\\/\",\"name\":\"ley_de_gauss_2 - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\"},\"datePublished\":\"2026-03-06T01:05:31+00:00\",\"dateModified\":\"2026-04-19T17:36:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_gauss_2\\\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_gauss_2\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_gauss_2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ley_de_gauss_2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\",\"name\":\"F\u00edsica 2\",\"description\":\"FICA - UNSL\",\"publisher\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-AR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#organization\",\"name\":\"SAC- Secretar\u00eda General FICA\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/SG-Logo.png\",\"contentUrl\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/SG-Logo.png\",\"width\":4483,\"height\":1231,\"caption\":\"SAC- Secretar\u00eda General FICA\"},\"image\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"ley_de_gauss_2 - F\u00edsica 2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/","og_locale":"es_ES","og_type":"article","og_title":"ley_de_gauss_2 - F\u00edsica 2","og_description":"Flujo Electrico – Simulacion Interactiva Flujo Electrico Visualizacion de Superficie Gaussiana Opciones de Visualizacion Lineas de Campo E Elemento dA Proyeccion dA cos(theta) Vector E…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-04-19T17:36:23+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/","name":"ley_de_gauss_2 - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-03-06T01:05:31+00:00","dateModified":"2026-04-19T17:36:23+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"ley_de_gauss_2"}]},{"@type":"WebSite","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","name":"F\u00edsica 2","description":"FICA - UNSL","publisher":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fisica2.fica.unsl.edu.ar\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-AR"},{"@type":"Organization","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization","name":"SAC- Secretar\u00eda General FICA","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","logo":{"@type":"ImageObject","inLanguage":"es-AR","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","contentUrl":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","width":4483,"height":1231,"caption":"SAC- Secretar\u00eda General FICA"},"image":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/comments?post=5605"}],"version-history":[{"count":83,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5605\/revisions"}],"predecessor-version":[{"id":7183,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5605\/revisions\/7183"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=5605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Flujo Electrico - Simulacion Interactiva<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-color: #0f1218;\n --panel-bg: rgba(20, 25, 35, 0.92);\n --border-color: #2a3444;\n --text-main: #e8ecf2;\n --text-muted: #8899aa;\n --accent-violet: #9575cd; \/* Superficie *\/\n --accent-red: #ef5350; \/* Vector E *\/\n --accent-blue: #42a5f5; \/* Vector dA *\/\n --accent-green: #66bb6a; \/* Proyeccion *\/\n --accent-orange: #ffa726; \/* Lineas campo *\/\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'Space Grotesk', sans-serif;\n background: var(--bg-color);\n color: var(--text-main);\n overflow: hidden;\n }\n\n #canvas-container {\n position: fixed;\n inset: 0;\n z-index: 1;\n }\n\n .control-panel {\n position: fixed;\n top: 20px;\n left: 20px;\n width: 320px;\n background: var(--panel-bg);\n border: 1px solid var(--border-color);\n border-radius: 16px;\n padding: 24px;\n z-index: 100;\n backdrop-filter: blur(16px);\n box-shadow: 0 8px 32px rgba(0,0,0,0.4);\n max-height: calc(100vh - 40px);\n overflow-y: auto;\n }\n\n .control-panel::-webkit-scrollbar { width: 4px; }\n .control-panel::-webkit-scrollbar-track { background: transparent; }\n .control-panel::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }\n\n .panel-title {\n font-size: 1.2rem;\n font-weight: 700;\n margin-bottom: 4px;\n color: var(--text-main);\n }\n\n .panel-subtitle {\n font-size: 0.8rem;\n color: var(--text-muted);\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 1px solid var(--border-color);\n }\n\n .section-header {\n font-size: 0.7rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n color: var(--text-muted);\n margin: 20px 0 12px 0;\n }\n\n .control-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n }\n\n .control-label {\n font-size: 0.9rem;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .dot-indicator {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n }\n\n .switch {\n position: relative;\n width: 48px;\n height: 26px;\n background: #1e2633;\n border-radius: 13px;\n cursor: pointer;\n transition: background 0.3s;\n }\n\n .switch.active { background: var(--accent-violet); }\n\n .switch::after {\n content: '';\n position: absolute;\n top: 3px;\n left: 3px;\n width: 20px;\n height: 20px;\n background: white;\n border-radius: 50%;\n transition: transform 0.3s;\n }\n\n .switch.active::after { transform: translateX(22px); }\n\n .slider-group { margin-bottom: 16px; }\n .slider-header {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n font-size: 0.85rem;\n }\n \n .slider-val { color: var(--accent-violet); font-family: 'JetBrains Mono', monospace; }\n\n input[type=\"range\"] {\n width: 100%;\n height: 4px;\n background: #1e2633;\n border-radius: 2px;\n outline: none;\n -webkit-appearance: none;\n }\n\n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n background: white;\n border-radius: 50%;\n cursor: pointer;\n box-shadow: 0 2px 6px rgba(0,0,0,0.3);\n }\n\n .info-panel {\n position: fixed;\n top: 20px;\n right: 20px;\n width: 280px;\n background: var(--panel-bg);\n border: 1px solid var(--border-color);\n border-radius: 16px;\n padding: 24px;\n z-index: 100;\n backdrop-filter: blur(16px);\n text-align: center;\n max-height: calc(100vh - 40px);\n overflow-y: auto;\n }\n\n .info-panel::-webkit-scrollbar { width: 4px; }\n .info-panel::-webkit-scrollbar-track { background: transparent; }\n .info-panel::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }\n\n .theta-display {\n font-size: 3.5rem;\n font-weight: 700;\n font-family: 'JetBrains Mono', monospace;\n color: var(--text-main);\n line-height: 1;\n margin: 10px 0;\n }\n\n .theta-label {\n font-size: 0.8rem;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n\n .flux-box {\n background: rgba(0,0,0,0.2);\n border-radius: 12px;\n padding: 16px;\n margin-top: 16px;\n font-family: 'Times New Roman', serif;\n font-style: italic;\n font-size: 1.4rem;\n }\n\n \/* --- NUEVO: Estilos para el calculo de flujo total --- *\/\n .flux-result-section {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid var(--border-color);\n }\n\n .flux-total-label {\n font-size: 0.8rem;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 8px;\n }\n\n .flux-total-value {\n font-family: 'JetBrains Mono', monospace;\n font-size: 1.2rem;\n font-weight: 700;\n color: var(--accent-green);\n margin-bottom: 4px;\n word-break: break-all;\n }\n\n .flux-formula-line {\n font-family: 'JetBrains Mono', monospace;\n font-size: 0.7rem;\n color: var(--text-muted);\n margin-top: 6px;\n line-height: 1.5;\n }\n\n .enclosed-status {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.78rem;\n margin-top: 10px;\n padding: 10px 12px;\n border-radius: 8px;\n background: rgba(0,0,0,0.2);\n text-align: left;\n }\n\n .enclosed-status.inside {\n color: var(--accent-green);\n border-left: 3px solid var(--accent-green);\n }\n\n .enclosed-status.outside {\n color: var(--accent-red);\n border-left: 3px solid var(--accent-red);\n }\n\n .enclosed-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n \/* --- FIN NUEVO --- *\/\n\n .legend {\n margin-top: 24px;\n text-align: left;\n padding-top: 16px;\n border-top: 1px solid var(--border-color);\n }\n\n .legend-item {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n font-size: 0.8rem;\n color: var(--text-muted);\n }\n .legend-line { width: 20px; height: 3px; border-radius: 2px; }\n\n .instructions {\n position: fixed;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n background: var(--panel-bg);\n padding: 10px 20px;\n border-radius: 8px;\n font-size: 0.75rem;\n color: var(--text-muted);\n z-index: 100;\n border: 1px solid var(--border-color);\n }\n\n .logo-box {\n position: fixed;\n bottom: 20px;\n right: 20px;\n display: flex;\n align-items: center;\n gap: 12px;\n background: rgba(20, 25, 35, 0.9);\n padding: 12px 16px;\n border-radius: 10px;\n border: 1px solid var(--border-color);\n z-index: 100;\n }\n \n .logo-img { width: 100px; }\n .logo-text { font-size: 0.75rem; line-height: 1.4; color: var(--text-muted); }\n .logo-text b { display: block; color: var(--text-main); font-weight: 600; }\n\n <\/style>\n<\/head>\n<body>\n\n<div id=\"canvas-container\"><\/div>\n\n\n<div class=\"control-panel\">\n <div class=\"panel-title\">Flujo Electrico<\/div>\n <div class=\"panel-subtitle\">Visualizacion de Superficie Gaussiana<\/div>\n\n <div class=\"section-header\">Opciones de Visualizacion<\/div>\n\n <div class=\"control-item\">\n <div class=\"control-label\"><div class=\"dot-indicator\" style=\"background: var(--accent-orange)\"><\/div>Lineas de Campo E<\/div>\n <div class=\"switch active\" id=\"tglLines\"><\/div>\n <\/div>\n <div class=\"control-item\">\n <div class=\"control-label\"><div class=\"dot-indicator\" style=\"background: var(--accent-violet)\"><\/div>Elemento dA<\/div>\n <div class=\"switch active\" id=\"tglDA\"><\/div>\n <\/div>\n <div class=\"control-item\">\n <div class=\"control-label\"><div class=\"dot-indicator\" style=\"background: var(--accent-green)\"><\/div>Proyeccion dA cos(theta)<\/div>\n <div class=\"switch active\" id=\"tglProj\"><\/div>\n <\/div>\n <div class=\"control-item\">\n <div class=\"control-label\"><div class=\"dot-indicator\" style=\"background: var(--accent-red)\"><\/div>Vector E<\/div>\n <div class=\"switch active\" id=\"tglE\"><\/div>\n <\/div>\n <div class=\"control-item\">\n <div class=\"control-label\"><div class=\"dot-indicator\" style=\"background: var(--accent-blue)\"><\/div>Vector Area<\/div>\n <div class=\"switch active\" id=\"tglN\"><\/div>\n <\/div>\n\n <div class=\"section-header\">Transformar Superficie<\/div>\n\n <div class=\"slider-group\">\n <div class=\"slider-header\">\n <span>Tamano<\/span>\n <span class=\"slider-val\" id=\"valScale\">1.0x<\/span>\n <\/div>\n <input type=\"range\" id=\"sldScale\" min=\"0.5\" max=\"2.0\" step=\"0.1\" value=\"1.0\">\n <\/div>\n\n \n <div class=\"slider-group\">\n <div class=\"slider-header\">\n <span>Carga Q<\/span>\n <span class=\"slider-val\" id=\"valCharge\">1.0 µC<\/span>\n <\/div>\n <input type=\"range\" id=\"sldCharge\" min=\"-5.0\" max=\"5.0\" step=\"0.1\" value=\"1.0\">\n <\/div>\n\n<\/div>\n\n\n<div class=\"info-panel\">\n <div class=\"theta-label\">Angulo entre E y n<\/div>\n <div class=\"theta-display\" id=\"dispTheta\">0.0<\/div>\n \n <div class=\"flux-box\">\n <span style=\"color: var(--accent-violet)\">dPhi<\/span> = \n <span style=\"color: var(--accent-red)\">E<\/span> \n <span style=\"color: var(--accent-blue)\">dA<\/span> \n cos(<span style=\"color: var(--text-main)\" id=\"dispThetaSmall\">0<\/span>)\n <\/div>\n\n \n <div class=\"flux-result-section\">\n <div class=\"flux-total-label\">Flujo Total<\/div>\n <div class=\"flux-total-value\" id=\"fluxValue\">--<\/div>\n <div class=\"flux-formula-line\" id=\"fluxFormula\">Φ = Q<sub>int<\/sub> \/ ε₀<\/div>\n <div class=\"enclosed-status outside\" id=\"enclosedStatus\">\n <div class=\"enclosed-dot\" id=\"enclosedDot\" style=\"background: var(--accent-red)\"><\/div>\n <span id=\"enclosedText\">Calculando...<\/span>\n <\/div>\n <\/div>\n\n <div class=\"legend\">\n <div class=\"legend-item\"><div class=\"legend-line\" style=\"background: var(--accent-orange)\"><\/div>Lineas de campo electrico<\/div>\n <div class=\"legend-item\"><div class=\"legend-line\" style=\"background: var(--accent-red)\"><\/div>Vector campo electrico (E)<\/div>\n <div class=\"legend-item\"><div class=\"legend-line\" style=\"background: var(--accent-blue)\"><\/div>Vector normal\/area (n \/ dA)<\/div>\n <div class=\"legend-item\"><div class=\"legend-line\" style=\"background: var(--accent-green)\"><\/div>Area proyectada<\/div>\n <div class=\"legend-item\"><div class=\"legend-line\" style=\"background: var(--accent-violet)\"><\/div>Superficie gaussiana<\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"instructions\">\n Click Izq en superficie: Mover | Click Der en superficie: Rotar | Fondo: Rotar camara | Scroll: Zoom\n<\/div>\n\n\n<div class=\"logo-box\">\n <a href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/FISAR_SIM\/\" target=\"_blank\">\n <img decoding=\"async\" src=\"FISAR_SIM_1\" alt=\"Logo\" class=\"logo-img\"><\/a>\n <div class=\"logo-text\"><b>FICA -UNSL<\/b>Simulaciones Interactivas<\/div>\n<\/div>\n\n<script type=\"importmap\">\n{\n \"imports\": {\n \"three\": \"https:\/\/unpkg.com\/three@0.160.0\/build\/three.module.js\",\n \"three\/addons\/\": \"https:\/\/unpkg.com\/three@0.160.0\/examples\/jsm\/\"\n }\n}\n<\/script>\n\n<script type=\"module\">\nimport * as THREE from 'three';\nimport { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\n\n\/\/ --- CONFIGURACION DE ESCENA ---\nconst container = document.getElementById('canvas-container');\nconst scene = new THREE.Scene();\nscene.background = new THREE.Color(0x0f1218);\n\nconst camera = new THREE.PerspectiveCamera(50, window.innerWidth \/ window.innerHeight, 0.1, 1000);\ncamera.position.set(0, 5, 12);\n\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\nrenderer.setSize(window.innerWidth, window.innerHeight);\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\ncontainer.appendChild(renderer.domElement);\n\nconst orbitControls = new OrbitControls(camera, renderer.domElement);\norbitControls.enableDamping = true;\norbitControls.minDistance = 5;\norbitControls.maxDistance = 30;\n\n\/\/ --- INICIO MODIFICACION: ZOOM GRADUAL MANUAL ---\norbitControls.enableZoom = false;\n\nrenderer.domElement.addEventListener('wheel', (event) => {\n event.preventDefault();\n const zoomSpeed = 0.002;\n const delta = event.deltaY * zoomSpeed;\n const direction = new THREE.Vector3();\n camera.getWorldDirection(direction);\n camera.position.addScaledVector(direction, -delta * camera.position.length());\n}, { passive: false });\n\/\/ --- FIN MODIFICACION ---\n\n\/\/ Iluminacion\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.7);\nscene.add(ambientLight);\nconst dirLight = new THREE.DirectionalLight(0xffffff, 0.8);\ndirLight.position.set(5, 10, 7);\nscene.add(dirLight);\n\n\/\/ --- CREACION DE ASSETS ---\n\n\/\/ 1. Carga Puntual (Fija en el origen)\nconst chargeGeo = new THREE.SphereGeometry(0.3, 32, 32);\nconst chargeMat = new THREE.MeshStandardMaterial({ \n color: 0xffd54f, \n emissive: 0xffa000, \n emissiveIntensity: 0.6,\n roughness: 0.3\n});\nconst chargeMesh = new THREE.Mesh(chargeGeo, chargeMat);\nscene.add(chargeMesh);\n\n\/\/ --- Variables de estado (declaradas antes de createFieldLines para evitar TDZ) ---\nlet chargeValue = 1.0; \/\/ Carga en microCoulombs\nconst EPSILON_0 = 8.854187817e-12; \/\/ Permittividad del vacio en C^2\/(N*m^2)\nconst fluxRaycaster = new THREE.Raycaster();\n\nconst uiState = {\n showLines: true,\n showDA: true,\n showProj: true,\n showE: true,\n showN: true\n};\n\nlet fieldLinesSign = 1; \/\/ Track current direction: 1 = outward (positive), -1 = inward (negative)\n\n\/\/ 2. Lineas de Campo Electrico\nconst fieldLinesGroup = new THREE.Group();\nscene.add(fieldLinesGroup);\n\nfunction createFieldLines() {\n \/\/ Limpiar lineas anteriores\n while (fieldLinesGroup.children.length > 0) {\n const child = fieldLinesGroup.children[0];\n fieldLinesGroup.remove(child);\n if (child.geometry) child.geometry.dispose();\n if (child.material) child.material.dispose();\n }\n \n const lineCount = 12;\n const color = 0xffa726;\n \n \/\/ Determinar direccion: carga positiva -> lineas hacia afuera, carga negativa -> lineas hacia adentro\n const direction = chargeValue >= 0 ? 1 : -1;\n fieldLinesSign = direction;\n \n for (let i = 0; i < lineCount; i++) {\n const phi = Math.acos(1 - 2 * (i + 0.5) \/ lineCount);\n const theta = Math.PI * (1 + Math.sqrt(5)) * i;\n \n const dir = new THREE.Vector3(\n Math.sin(phi) * Math.cos(theta),\n Math.sin(phi) * Math.sin(theta),\n Math.cos(phi)\n );\n \n const points = [];\n if (direction === 1) {\n \/\/ Carga positiva: lineas van de adentro hacia afuera\n for (let k = 1; k < 40; k++) {\n points.push(dir.clone().multiplyScalar(k * 0.25));\n }\n } else {\n \/\/ Carga negativa: lineas van de afuera hacia adentro (se invierte el orden de los puntos)\n for (let k = 39; k >= 1; k--) {\n points.push(dir.clone().multiplyScalar(k * 0.25));\n }\n }\n \n const geo = new THREE.BufferGeometry().setFromPoints(points);\n const mat = new THREE.LineBasicMaterial({ color: color, transparent: true, opacity: 0.6 });\n const line = new THREE.Line(geo, mat);\n fieldLinesGroup.add(line);\n \n \/\/ Flecha en posicion intermedia indicando la direccion del campo\n const arrowDir = direction === 1 ? dir : dir.clone().negate();\n const arrowPos = dir.clone().multiplyScalar(4.5); \/\/ Posicion intermedia de la linea\n const arrow = new THREE.ArrowHelper(arrowDir, arrowPos, 0.8, color, 0.4, 0.2);\n fieldLinesGroup.add(arrow);\n }\n \n fieldLinesGroup.visible = uiState.showLines;\n}\ncreateFieldLines();\n\n\/\/ 3. Superficie Gaussiana Irregular (Movible)\nconst surfaceGroup = new THREE.Group();\nscene.add(surfaceGroup);\n\nlet surfaceGeometry = new THREE.SphereGeometry(3, 64, 64);\nconst positions = surfaceGeometry.attributes.position;\nfor (let i = 0; i < positions.count; i++) {\n const x = positions.getX(i);\n const y = positions.getY(i);\n const z = positions.getZ(i);\n const noise = 0.3 * Math.sin(5 * x) * Math.cos(4 * y) + 0.2 * Math.sin(3 * z);\n const factor = 1 + noise * 0.2;\n positions.setXYZ(i, x * factor, y * factor, z * factor);\n}\nsurfaceGeometry.computeVertexNormals();\n\nconst surfaceMaterial = new THREE.MeshPhongMaterial({\n color: 0x9575cd,\n transparent: true,\n opacity: 0.35,\n side: THREE.DoubleSide,\n depthWrite: false,\n shininess: 100\n});\n\nconst surfaceMesh = new THREE.Mesh(surfaceGeometry, surfaceMaterial);\nsurfaceGroup.add(surfaceMesh);\n\nconst wireMat = new THREE.MeshBasicMaterial({ color: 0x9575cd, wireframe: true, transparent: true, opacity: 0.1 });\nconst wireMesh = new THREE.Mesh(surfaceGeometry, wireMat);\nsurfaceGroup.add(wireMesh);\n\n\/\/ 4. Elementos dinamicos (dA, Vectores, Proyeccion)\nconst dynamicGroup = new THREE.Group();\nscene.add(dynamicGroup);\n\nconst localPoint = new THREE.Vector3(1, 1, 1).normalize().multiplyScalar(3);\n\nfunction createLabel(text, color) {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n const fontSize = 64;\n ctx.font = \"bold \" + fontSize + \"px 'Space Grotesk', sans-serif\";\n \/\/ Medir el ancho real del texto para ajustar el canvas\n const metrics = ctx.measureText(text);\n const textWidth = metrics.width;\n const padding = 16;\n canvas.width = Math.ceil(textWidth + padding * 2);\n canvas.height = fontSize + padding * 2;\n \/\/ Re-aplicar font despues de resize (se pierde al cambiar tama\u00f1o del canvas)\n ctx.font = \"bold \" + fontSize + \"px 'Space Grotesk', sans-serif\";\n ctx.fillStyle = color;\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(text, canvas.width \/ 2, canvas.height \/ 2);\n \n const tex = new THREE.CanvasTexture(canvas);\n const mat = new THREE.SpriteMaterial({ map: tex, transparent: true, sizeAttenuation: false });\n const sprite = new THREE.Sprite(mat);\n \/\/ Escala proporcional al aspecto del texto (ancho\/alto)\n const aspect = canvas.width \/ canvas.height;\n const baseHeight = 0.04;\n sprite.scale.set(baseHeight * aspect, baseHeight, 1);\n return sprite;\n}\n\n\/\/ (uiState, chargeValue, EPSILON_0, fluxRaycaster ya declarados arriba antes de createFieldLines)\n\n\/**\n * Determina si la carga puntual esta encerrada por la superficie gaussiana.\n * Utiliza raycasting desde la posicion de la carga: si el numero de intersecciones\n * con la superficie cerrada es impar, la carga esta dentro; si es par, esta fuera.\n * Cuando la superficie no encierra la carga, el flujo es cero.\n *\/\nfunction isChargeInsideSurface() {\n const chargePos = new THREE.Vector3();\n chargeMesh.getWorldPosition(chargePos);\n \n \/\/ Probar varias direcciones para mayor robustez\n const testDirections = [\n new THREE.Vector3(1, 0, 0),\n new THREE.Vector3(0, 1, 0),\n new THREE.Vector3(0, 0, 1),\n new THREE.Vector3(-1, 0, 0),\n new THREE.Vector3(0, -1, 0),\n new THREE.Vector3(0, 0, -1),\n ];\n \n for (const dir of testDirections) {\n fluxRaycaster.set(chargePos, dir);\n const intersects = fluxRaycaster.intersectObject(surfaceMesh, false);\n \n \/\/ Filtrar intersecciones muy cercanas para evitar falsos positivos\n const validHits = intersects.filter(i => i.distance > 0.05);\n \n if (validHits.length > 0) {\n \/\/ Numero impar = carga dentro de la superficie cerrada\n \/\/ Numero par = carga fuera de la superficie cerrada\n return validHits.length % 2 === 1;\n }\n }\n \n \/\/ Si no hay intersecciones en ninguna direccion, la carga esta fuera\n return false;\n}\n\n\/**\n * Calcula el flujo electrico total a traves de la superficie gaussiana.\n * Ley de Gauss: Phi = Q_encerrada \/ epsilon_0\n * Si la carga no esta encerrada, el flujo es cero.\n *\/\nfunction calculateFlux() {\n const isInside = isChargeInsideSurface();\n const q = chargeValue * 1e-6; \/\/ Convertir microC a C\n \n let totalFlux = 0;\n if (isInside) {\n totalFlux = q \/ EPSILON_0;\n }\n \n return { isInside, totalFlux, q };\n}\n\n\/**\n * Actualiza la seccion de flujo en el panel de informacion.\n *\/\nfunction updateFluxDisplay() {\n const result = calculateFlux();\n \n const fluxValueEl = document.getElementById('fluxValue');\n const fluxFormulaEl = document.getElementById('fluxFormula');\n const enclosedStatusEl = document.getElementById('enclosedStatus');\n const enclosedDotEl = document.getElementById('enclosedDot');\n const enclosedTextEl = document.getElementById('enclosedText');\n \n if (result.isInside) {\n \/\/ Carga encerrada: flujo = Q \/ epsilon_0\n if (Math.abs(result.totalFlux) < 1e-10) {\n fluxValueEl.textContent = '0 N\\u00B7m\\u00B2\/C';\n } else {\n fluxValueEl.textContent = result.totalFlux.toExponential(3) + ' N\\u00B7m\\u00B2\/C';\n }\n fluxValueEl.style.color = 'var(--accent-green)';\n \n \/\/ Mostrar formula con valores\n const qExp = (chargeValue * 1e-6).toExponential(1);\n const e0Exp = EPSILON_0.toExponential(2);\n fluxFormulaEl.innerHTML = 'Φ = Q<sub>int<\/sub> \/ ε₀ = ' + qExp + ' \/ ' + e0Exp;\n \n enclosedStatusEl.className = 'enclosed-status inside';\n enclosedDotEl.style.background = 'var(--accent-green)';\n enclosedTextEl.textContent = 'Carga encerrada: Q = ' + chargeValue.toFixed(1) + ' \\u03BCC';\n } else {\n \/\/ Carga fuera de la superficie: flujo = 0\n fluxValueEl.textContent = '0 N\\u00B7m\\u00B2\/C';\n fluxValueEl.style.color = 'var(--accent-red)';\n \n fluxFormulaEl.innerHTML = 'Φ = 0 (carga no encerrada)';\n \n enclosedStatusEl.className = 'enclosed-status outside';\n enclosedDotEl.style.background = 'var(--accent-red)';\n enclosedTextEl.textContent = 'Carga fuera de la superficie';\n }\n}\n\/\/ --- FIN NUEVO ---\n\nfunction updateDynamicElements() {\n dynamicGroup.clear();\n \n const worldPos = localPoint.clone().applyMatrix4(surfaceGroup.matrixWorld);\n const localNormal = localPoint.clone().normalize();\n const worldNormal = localNormal.clone().transformDirection(surfaceGroup.matrixWorld).normalize();\n \n \/\/ Vector E: apunta hacia afuera si carga positiva, hacia adentro si negativa\n const vecE = worldPos.clone().sub(chargeMesh.position).normalize().multiplyScalar(chargeValue >= 0 ? 1 : -1);\n \n let cosTheta = vecE.dot(worldNormal);\n cosTheta = Math.max(-1, Math.min(1, cosTheta));\n const theta = Math.acos(cosTheta);\n \n const thetaDeg = (theta * 180 \/ Math.PI).toFixed(1);\n document.getElementById('dispTheta').innerText = thetaDeg + '\\u00B0';\n document.getElementById('dispThetaSmall').innerText = thetaDeg + '\\u00B0';\n \n \/\/ Dibujar Elemento dA (Parche)\n if (uiState.showDA) {\n const dAGeo = new THREE.CircleGeometry(0.6, 32);\n const dAMat = new THREE.MeshBasicMaterial({ \n color: 0x9575cd,\n side: THREE.DoubleSide,\n transparent: true,\n opacity: 0.9\n });\n const dAMesh = new THREE.Mesh(dAGeo, dAMat);\n \n dAMesh.position.copy(worldPos);\n const up = new THREE.Vector3(0, 0, 1);\n const quat = new THREE.Quaternion().setFromUnitVectors(up, worldNormal);\n dAMesh.setRotationFromQuaternion(quat);\n dAMesh.position.add(worldNormal.clone().multiplyScalar(0.01));\n \n const edges = new THREE.LineSegments(new THREE.EdgesGeometry(dAGeo), new THREE.LineBasicMaterial({ color: 0xffffff }));\n edges.position.copy(dAMesh.position);\n edges.rotation.copy(dAMesh.rotation);\n \n dynamicGroup.add(dAMesh);\n dynamicGroup.add(edges);\n \n const lblDA = createLabel('dA', '#FFFFFF');\n lblDA.position.copy(worldPos).add(worldNormal.clone().multiplyScalar(0.4));\n dynamicGroup.add(lblDA);\n }\n \n \/\/ Dibujar Proyeccion dA cos(theta)\n if (uiState.showProj && Math.abs(cosTheta) > 0.05) {\n const radius = 0.6 * Math.abs(cosTheta);\n const projGeo = new THREE.CircleGeometry(radius, 32);\n const projMat = new THREE.MeshBasicMaterial({ \n color: 0x66bb6a,\n side: THREE.DoubleSide,\n transparent: true,\n opacity: 0.8\n });\n const projMesh = new THREE.Mesh(projGeo, projMat);\n \n const upProj = new THREE.Vector3(0, 0, 1);\n const quatProj = new THREE.Quaternion().setFromUnitVectors(upProj, vecE);\n projMesh.setRotationFromQuaternion(quatProj);\n \n projMesh.position.copy(worldPos).sub(vecE.clone().multiplyScalar(0.8));\n \n dynamicGroup.add(projMesh);\n \n const linePoints = [worldPos.clone().sub(worldNormal.clone().multiplyScalar(0.01)), projMesh.position];\n const lineGeo = new THREE.BufferGeometry().setFromPoints(linePoints);\n const lineMat = new THREE.LineDashedMaterial({ color: 0x66bb6a, dashSize: 0.1, gapSize: 0.05 });\n const line = new THREE.Line(lineGeo, lineMat);\n line.computeLineDistances();\n dynamicGroup.add(line);\n \n const lblProj = createLabel('dA cos\\u03b8', '#66bb6a');\n lblProj.position.copy(projMesh.position).sub(vecE.clone().multiplyScalar(0.4));\n dynamicGroup.add(lblProj);\n }\n \n \/\/ Vector E (Rojo)\n if (uiState.showE) {\n const arrowE = new THREE.ArrowHelper(vecE, worldPos, 2.0, 0xef5350, 0.4, 0.2);\n dynamicGroup.add(arrowE);\n \n const lblE = createLabel('E', '#ef5350');\n lblE.position.copy(worldPos).add(vecE.clone().multiplyScalar(2.4));\n dynamicGroup.add(lblE);\n }\n \n \/\/ Vector Normal \/ Area (Azul)\n if (uiState.showN) {\n const arrowN = new THREE.ArrowHelper(worldNormal, worldPos, 2.0, 0x42a5f5, 0.4, 0.2);\n dynamicGroup.add(arrowN);\n \n const lblN = createLabel('n', '#42a5f5');\n lblN.position.copy(worldPos).add(worldNormal.clone().multiplyScalar(2.4));\n dynamicGroup.add(lblN);\n }\n \n \/\/ Arco del angulo\n if (theta > 0.1) {\n const arcAxis = new THREE.Vector3().crossVectors(worldNormal, vecE).normalize();\n if (arcAxis.length() > 0.001) {\n const arcPoints = [];\n for (let i = 0; i <= 32; i++) {\n const a = (i \/ 32) * theta;\n const rot = new THREE.Quaternion().setFromAxisAngle(arcAxis, a);\n const dir = worldNormal.clone().applyQuaternion(rot).multiplyScalar(1.2);\n arcPoints.push(dir.add(worldPos));\n }\n const arcGeo = new THREE.BufferGeometry().setFromPoints(arcPoints);\n const arc = new THREE.Line(arcGeo, new THREE.LineDashedMaterial({ color: 0xffffff, dashSize: 0.05, gapSize: 0.03 }));\n arc.computeLineDistances();\n dynamicGroup.add(arc);\n \n const midAngle = theta \/ 2;\n const qMid = new THREE.Quaternion().setFromAxisAngle(arcAxis, midAngle);\n const dirLbl = worldNormal.clone().applyQuaternion(qMid).multiplyScalar(1.6);\n const lblT = createLabel('\\u03b8', '#FFFFFF');\n lblT.position.copy(worldPos).add(dirLbl);\n dynamicGroup.add(lblT);\n }\n }\n \n \/\/ --- NUEVO: Actualizar calculo de flujo total ---\n updateFluxDisplay();\n}\n\n\/\/ --- INTERACCION ---\n\nconst raycaster = new THREE.Raycaster();\nconst mouse = new THREE.Vector2();\nlet isDraggingSurface = false;\nlet isRotatingSurface = false;\nconst dragPlane = new THREE.Plane();\nconst intersection = new THREE.Vector3();\nconst offset = new THREE.Vector3();\n\nfunction onMouseDown(event) {\n if (event.target !== renderer.domElement) return;\n \n mouse.x = (event.clientX \/ window.innerWidth) * 2 - 1;\n mouse.y = -(event.clientY \/ window.innerHeight) * 2 + 1;\n \n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObject(surfaceMesh);\n \n if (intersects.length > 0) {\n if (event.button === 0) {\n isDraggingSurface = true;\n orbitControls.enabled = false;\n dragPlane.setFromNormalAndCoplanarPoint(camera.getWorldDirection(new THREE.Vector3()).negate(), surfaceGroup.position);\n raycaster.ray.intersectPlane(dragPlane, intersection);\n offset.subVectors(surfaceGroup.position, intersection);\n } else if (event.button === 2) {\n isRotatingSurface = true;\n orbitControls.enabled = false;\n }\n }\n}\n\nfunction onMouseMove(event) {\n mouse.x = (event.clientX \/ window.innerWidth) * 2 - 1;\n mouse.y = -(event.clientY \/ window.innerHeight) * 2 + 1;\n \n if (isDraggingSurface) {\n raycaster.setFromCamera(mouse, camera);\n raycaster.ray.intersectPlane(dragPlane, intersection);\n surfaceGroup.position.copy(intersection.add(offset));\n updateDynamicElements();\n } else if (isRotatingSurface) {\n surfaceGroup.rotation.y += event.movementX * 0.01;\n surfaceGroup.rotation.x += event.movementY * 0.01;\n updateDynamicElements();\n }\n}\n\nfunction onMouseUp() {\n isDraggingSurface = false;\n isRotatingSurface = false;\n orbitControls.enabled = true;\n}\n\nwindow.addEventListener('mousedown', onMouseDown);\nwindow.addEventListener('mousemove', onMouseMove);\nwindow.addEventListener('mouseup', onMouseUp);\nwindow.addEventListener('contextmenu', (e) => e.preventDefault());\n\n\/\/ --- UI CONTROLS ---\nfunction setupToggle(id, key) {\n const el = document.getElementById(id);\n el.addEventListener('click', () => {\n el.classList.toggle('active');\n uiState[key] = el.classList.contains('active');\n if (key === 'showLines') fieldLinesGroup.visible = uiState[key];\n else updateDynamicElements();\n });\n}\n\nsetupToggle('tglLines', 'showLines');\nsetupToggle('tglDA', 'showDA');\nsetupToggle('tglProj', 'showProj');\nsetupToggle('tglE', 'showE');\nsetupToggle('tglN', 'showN');\n\ndocument.getElementById('sldScale').addEventListener('input', (e) => {\n const v = parseFloat(e.target.value);\n document.getElementById('valScale').innerText = v.toFixed(1) + 'x';\n surfaceGroup.scale.setScalar(v);\n updateDynamicElements();\n});\n\n\/\/ --- NUEVO: Handler del slider de carga ---\ndocument.getElementById('sldCharge').addEventListener('input', (e) => {\n chargeValue = parseFloat(e.target.value);\n document.getElementById('valCharge').innerText = chargeValue.toFixed(1) + ' \\u03BCC';\n \/\/ Reconstruir lineas de campo si cambio el signo de la carga\n const newSign = chargeValue >= 0 ? 1 : -1;\n if (newSign !== fieldLinesSign) {\n createFieldLines();\n }\n updateDynamicElements();\n});\n\nwindow.addEventListener('resize', () => {\n camera.aspect = window.innerWidth \/ window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n});\n\n\/\/ Inicializar\nupdateDynamicElements();\n\n\/\/ Loop\nfunction animate() {\n requestAnimationFrame(animate);\n orbitControls.update();\n renderer.render(scene, camera);\n}\nanimate();\n\n<\/script>\n\n<style>\n .btn-guia {\n position: fixed;\n bottom: 24px;\n left: 24px;\n z-index: 999;\n background: #3fb950;\n color: #0d1117;\n font-family: 'Space Grotesk', sans-serif;\n font-size: 0.82rem;\n font-weight: 700;\n letter-spacing: 1px;\n text-transform: uppercase;\n padding: 10px 18px;\n border-radius: 8px;\n border: none;\n cursor: pointer;\n box-shadow: 0 4px 20px rgba(63,185,80,0.35);\n transition: transform 0.2s, box-shadow 0.2s;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .btn-guia:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 24px rgba(63,185,80,0.5);\n }\n .btn-guia svg { width: 15px; height: 15px; flex-shrink: 0; }\n .guia-panel {\n position: fixed;\n bottom: 72px;\n left: 24px;\n width: 400px;\n max-height: 70vh;\n z-index: 1000;\n background: #ffffff;\n border: 1px solid #d0d7de;\n border-radius: 12px;\n box-shadow: 0 16px 48px rgba(0,0,0,0.4);\n display: none;\n flex-direction: column;\n overflow: hidden;\n font-family: 'Space Grotesk', sans-serif;\n }\n .guia-panel.visible { display: flex; }\n .guia-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n border-bottom: 1px solid #d0d7de;\n flex-shrink: 0;\n background: #f6f8fa;\n }\n .guia-header-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.85rem;\n font-weight: 700;\n color: #1f2328;\n }\n .guia-header-title svg { width: 15px; height: 15px; color: #3fb950; }\n .guia-close {\n background: none;\n border: none;\n color: #636c76;\n font-size: 1rem;\n cursor: pointer;\n padding: 2px 7px;\n border-radius: 4px;\n transition: color 0.2s, background 0.2s;\n line-height: 1;\n }\n .guia-close:hover { color: #1f2328; background: rgba(0,0,0,0.06); }\n .guia-body {\n overflow-y: auto;\n padding: 18px 18px 20px;\n color: #1f2328;\n font-size: 0.83rem;\n line-height: 1.65;\n background: #ffffff;\n }\n .guia-body::-webkit-scrollbar { width: 5px; }\n .guia-body::-webkit-scrollbar-track { background: transparent; }\n .guia-body::-webkit-scrollbar-thumb { background: #d0d7de; border-radius: 3px; }\n .guia-section-title {\n font-size: 1rem;\n font-weight: 700;\n color: #1f2328;\n margin: 0 0 12px 0;\n padding-bottom: 8px;\n border-bottom: 1px solid #d0d7de;\n }\n .guia-block { margin-bottom: 14px; }\n .guia-label {\n font-size: 0.72rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: #636c76;\n margin-bottom: 4px;\n }\n .guia-text { color: #1f2328; }\n .guia-formula {\n background: #f6f8fa;\n border: 1px solid #d0d7de;\n border-radius: 6px;\n padding: 10px 14px;\n text-align: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 0.88rem;\n color: #0550ae;\n margin: 10px 0;\n }\n .guia-steps { list-style: none; margin: 0; padding: 0; counter-reset: steps; }\n .guia-steps li {\n counter-increment: steps;\n display: flex;\n gap: 10px;\n margin-bottom: 8px;\n align-items: flex-start;\n color: #1f2328;\n }\n .guia-steps li::before {\n content: counter(steps);\n background: #dafbe1;\n color: #1a7f37;\n font-size: 0.72rem;\n font-weight: 700;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-top: 1px;\n border: 1px solid #1a7f37;\n }\n .guia-result {\n background: #dafbe1;\n border-left: 3px solid #1a7f37;\n border-radius: 0 6px 6px 0;\n padding: 10px 14px;\n color: #1f2328;\n font-size: 0.82rem;\n margin-top: 10px;\n }\n .guia-params {\n background: #f6f8fa;\n border: 1px solid #d0d7de;\n border-radius: 6px;\n padding: 10px 14px;\n font-size: 0.8rem;\n color: #1f2328;\n }\n .guia-params span { color: #0550ae; font-family: 'JetBrains Mono', monospace; }\n .var { font-family: 'JetBrains Mono', monospace; }\n .var.pos { color: #cf222e; }\n .var.neg { color: #0550ae; }\n .var.neu { color: #7d4e00; }\n .var.ok { color: #1a7f37; }\n<\/style>\n\n<div class=\"guia-panel\" id=\"guiaPanel\">\n <div class=\"guia-header\">\n <div class=\"guia-header-title\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\n Guía de uso\n <\/div>\n <button class=\"guia-close\" onclick=\"toggleGuia()\">✕<\/button>\n <\/div>\n\n <div class=\"guia-body\">\n\n<div style=\"font-family: Arial, sans-serif; line-height: 1.6; color: #333;\">\n<h3 style=\"color: #0056b3;\"><strong><span style=\"font-size: 16px; color: #000080;\">Ley de Gauss<\/span> <\/strong><strong style=\"font-size: 1.618em;\"><span style=\"font-size: 16px; color: #000080;\"> <\/span><span style=\"font-size: 16px; color: #ff0000;\"> <\/span><\/strong><\/h3>\n<span style=\"font-size: 16px;\"><strong>Objetivo:<\/strong> Comprender la relación fundamental entre el flujo eléctrico neto a través de una superficie cerrada (superficie gaussiana) y la carga eléctrica neta encerrada en su interior.<\/span>\n\n\n<span style=\"font-size: 16px;\"><strong>Descripción breve:<\/strong> Simulación interactiva que permite posicionar cargas puntuales dentro y fuera de diversas superficies cerradas (esferas, cilindros o cubos). La herramienta permite visualizar cómo las líneas de campo atraviesan la superficie elegida y calcula en tiempo real el flujo neto resultante, demostrando que este solo depende de la carga encerrada según la expresión:<\/span>\n<div style=\"text-align: center; margin: 20px 0;\"><span style=\"font-size: 16px;\">\\( \\Phi = \\oint \\mathbf{E} \\cdot d\\mathbf{A} = \\frac{Q_{int}}{\\varepsilon_0} \\)<\/span><\/div>\n<span style=\"font-size: 16px;\"><strong>Cómo usar (pasos):<\/strong><\/span>\n<ul style=\"margin-left: 20px;\">\n <li><span style=\"font-size: 16px;\">Seleccionar el tipo de superficie gaussiana (esférica, cilíndrica o cúbica) y ajustar su tamaño (radio o arista).<\/span><\/li>\n <li><span style=\"font-size: 16px;\">Agregar cargas puntuales positivas o negativas al espacio de trabajo.<\/span><\/li>\n <li><span style=\"font-size: 16px;\">Arrastrar las cargas para situarlas dentro o fuera del volumen delimitado por la superficie.<\/span><\/li>\n <li><span style=\"font-size: 16px;\">Activar la visualización de las líneas de campo y los vectores diferenciales de área (\\(d\\mathbf{A}\\)) en puntos específicos.<\/span><\/li>\n <li><span style=\"font-size: 16px;\">Consultar el panel de datos para observar el valor del flujo neto (\\(\\Phi\\)) y la sumatoria de carga encerrada.<\/span><\/li>\n<\/ul>\n<span style=\"font-size: 16px;\"><strong>Parámetros ajustables:<\/strong> Tipo de superficie, dimensiones de la superficie, número de cargas, valor y signo de cada carga (\\(q_i\\)), posición de las cargas, mostrar\/ocultar líneas de fuerza y visualización de la constante \\(\\varepsilon_0\\).<\/span>\n<p style=\"background-color: #f8f9fa; padding: 15px; border-left: 5px solid #0056b3;\"><span style=\"font-size: 16px;\"><strong>Resultados esperados \/ observaciones:<\/strong> El flujo neto es proporcional a la suma algebraica de las cargas internas. Las cargas situadas fuera de la superficie no contribuyen al flujo neto total (el flujo que entra es igual al que sale). El flujo permanece constante independientemente del tamaño de la superficie siempre que la carga encerrada no cambie.<\/span><\/p>\n\n<\/div>\n\n <\/div>\n<\/div>\n\n<button class=\"btn-guia\" onclick=\"toggleGuia()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\n Guía de uso\n<\/button>\n\n<script>\n function toggleGuia() {\n document.getElementById('guiaPanel').classList.toggle('visible');\n }\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Flujo Electrico – Simulacion Interactiva Flujo Electrico Visualizacion de Superficie Gaussiana Opciones de Visualizacion Lineas de Campo E Elemento dA Proyeccion dA cos(theta) Vector E…<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-5605","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>ley_de_gauss_2 - F\u00edsica 2<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ley_de_gauss_2 - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"Flujo Electrico – Simulacion Interactiva Flujo Electrico Visualizacion de Superficie Gaussiana Opciones de Visualizacion Lineas de Campo E Elemento dA Proyeccion dA cos(theta) Vector E…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-19T17:36:23+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_gauss_2\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_gauss_2\\\/\",\"name\":\"ley_de_gauss_2 - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\"},\"datePublished\":\"2026-03-06T01:05:31+00:00\",\"dateModified\":\"2026-04-19T17:36:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_gauss_2\\\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_gauss_2\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/ley_de_gauss_2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ley_de_gauss_2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\",\"name\":\"F\u00edsica 2\",\"description\":\"FICA - UNSL\",\"publisher\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-AR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#organization\",\"name\":\"SAC- Secretar\u00eda General FICA\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/SG-Logo.png\",\"contentUrl\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/SG-Logo.png\",\"width\":4483,\"height\":1231,\"caption\":\"SAC- Secretar\u00eda General FICA\"},\"image\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"ley_de_gauss_2 - F\u00edsica 2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/","og_locale":"es_ES","og_type":"article","og_title":"ley_de_gauss_2 - F\u00edsica 2","og_description":"Flujo Electrico – Simulacion Interactiva Flujo Electrico Visualizacion de Superficie Gaussiana Opciones de Visualizacion Lineas de Campo E Elemento dA Proyeccion dA cos(theta) Vector E…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-04-19T17:36:23+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/","name":"ley_de_gauss_2 - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-03-06T01:05:31+00:00","dateModified":"2026-04-19T17:36:23+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"ley_de_gauss_2"}]},{"@type":"WebSite","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","name":"F\u00edsica 2","description":"FICA - UNSL","publisher":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fisica2.fica.unsl.edu.ar\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-AR"},{"@type":"Organization","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization","name":"SAC- Secretar\u00eda General FICA","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","logo":{"@type":"ImageObject","inLanguage":"es-AR","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","contentUrl":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","width":4483,"height":1231,"caption":"SAC- Secretar\u00eda General FICA"},"image":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/comments?post=5605"}],"version-history":[{"count":83,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5605\/revisions"}],"predecessor-version":[{"id":7183,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5605\/revisions\/7183"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=5605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}