{"id":5585,"date":"2026-03-05T10:37:08","date_gmt":"2026-03-05T13:37:08","guid":{"rendered":"https:\/\/fisica2.fica.unsl.edu.ar\/?page_id=5585"},"modified":"2026-03-19T14:43:29","modified_gmt":"2026-03-19T17:43:29","slug":"flujo_electrico","status":"publish","type":"page","link":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/flujo_electrico\/","title":{"rendered":"flujo_electrico"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\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\r\n\r\n\r\n \r\n \r\n Simulador de Flujo Electrico - Fisica 2<\/title>\r\n <style>\r\n \r\n \r\n \r\n \r\n\/* El contenedor principal sigue en columna *\/\r\n .branding-header {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n background-color: #1a202c; \/* Color oscuro de fondo *\/\r\n padding: 20px;\r\n border-radius: 8px;\r\n }\r\n\r\n \/* Ajuste de la imagen *\/\r\n .branding-logo-small {\r\n max-width: 180px;\r\n height: auto;\r\n \/* IMPORTANTE: Reducimos este margen para acercar el texto *\/\r\n margin-bottom: 5px; \/* <--- Ajusta este valor para m\u00e1s\/menos espacio *\/\r\n }\r\n\r\n \/* Caja de texto: Ahora en horizontal (fila) *\/\r\n .branding-text-box {\r\n display: flex;\r\n flex-direction: row; \/* Elementos uno al lado del otro *\/\r\n align-items: center; \/* Alineaci\u00f3n vertical centrada *\/\r\n gap: 8px; \/* <--- Espacio horizontal entre \"FICA\" y \"2026\" *\/\r\n }\r\n\r\n \/* Estilo para FICA - UNSL *\/\r\n .branding-inst {\r\n color: #4fd1c5;\r\n font-family: sans-serif;\r\n font-weight: bold;\r\n font-size: 5px;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n \/* Estilo para el a\u00f1o 2026 (al lado) *\/\r\n .branding-year {\r\n color: #4fd1c5; \/* Color turquesa\/celeste *\/\r\n font-family: sans-serif;\r\n font-weight: bold;\r\n font-size: 5px; \/* Misma altura que el texto institucional *\/\r\n }\r\n \r\n\r\n\r\n\r\n\/* Estilos para el encabezado institucional *\/\r\n .branding-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding-bottom: 16px;\r\n margin-bottom: 16px;\r\n border-bottom: 1px solid var(--border-color);\r\n }\r\n\r\n .branding-logo-small {\r\n height: 42px;\r\n width: auto;\r\n object-fit: contain;\r\n \/* Si el logo tiene fondo blanco, esto ayuda a integrarlo mejor, \r\n aunque idealmente deber\u00eda ser transparente. *\/\r\n background: rgba(255, 255, 255, 0.95);\r\n padding: 2px 4px;\r\n border-radius: 4px;\r\n }\r\n\r\n .branding-text-box {\r\n display: flex;\r\n flex-direction: column;\r\n line-height: 1.2;\r\n }\r\n\r\n .branding-inst {\r\n font-weight: 700;\r\n font-size: 15px;\r\n color: var(--text-primary);\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .branding-year {\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 12px;\r\n color: var(--accent-cyan);\r\n margin-top: 2px;\r\n }\r\n\r\n .section-title {\r\n font-size: 11px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n color: var(--text-secondary);\r\n margin-bottom: 12px;\r\n padding-bottom: 8px;\r\n border-bottom: 1px solid var(--border-color);\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --bg-dark: #0a0d10;\r\n --bg-panel: rgba(18, 22, 28, 0.95);\r\n --bg-input: #1e262f;\r\n --text-main: #e7eaed;\r\n --text-muted: #7a8a99;\r\n --accent-field: #e85d04;\r\n --accent-normal: #00b4d8;\r\n --accent-flux: #38b000;\r\n --accent-angle: #ffbe0b;\r\n --border-color: #2a3540;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\r\n background: var(--bg-dark);\r\n color: var(--text-main);\r\n overflow: hidden;\r\n line-height: 1.5;\r\n }\r\n\r\n #scene-container {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 1;\r\n }\r\n\r\n .left-panel {\r\n position: fixed;\r\n top: 24px;\r\n left: 24px;\r\n width: 280px;\r\n background: var(--bg-panel);\r\n border: 1px solid var(--border-color);\r\n border-radius: 14px;\r\n padding: 20px;\r\n z-index: 100;\r\n backdrop-filter: blur(12px);\r\n }\r\n\r\n \/* Estilos para el encabezado institucional (Branding) *\/\r\n .branding-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding-bottom: 14px;\r\n margin-bottom: 14px;\r\n border-bottom: 1px solid var(--border-color);\r\n }\r\n\r\n .branding-logo-small {\r\n height: 38px;\r\n width: auto;\r\n object-fit: contain;\r\n \/* Fondo ligero para mejorar visibilidad si el logo es claro *\/\r\n background: rgba(255, 255, 255, 0.9);\r\n padding: 2px 4px;\r\n border-radius: 4px;\r\n }\r\n\r\n .branding-text-box {\r\n display: flex;\r\n flex-direction: column;\r\n line-height: 1.2;\r\n }\r\n\r\n .branding-inst {\r\n font-weight: 700;\r\n font-size: 15px;\r\n color: var(--text-secondary);\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n\r\n\r\n .branding-year {\r\n font-family: 'SF Mono', 'Consolas', monospace;\r\n font-size: 12px;\r\n color: var(--accent-field); \/* Usamos el color de acento naranja *\/\r\n margin-top: 2px;\r\n }\r\n\r\n .panel-header {\r\n margin-bottom: 20px;\r\n padding-bottom: 14px;\r\n border-bottom: 1px solid var(--border-color);\r\n }\r\n\r\n .panel-title {\r\n font-size: 1.15rem;\r\n font-weight: 700;\r\n color: var(--text-main);\r\n margin-bottom: 4px;\r\n }\r\n\r\n .panel-desc {\r\n font-size: 0.8rem;\r\n color: var(--text-muted);\r\n }\r\n\r\n .control-section {\r\n margin-bottom: 16px;\r\n }\r\n\r\n .control-label {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .label-text {\r\n font-size: 0.85rem;\r\n color: var(--text-muted);\r\n font-weight: 500;\r\n }\r\n\r\n .label-value {\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n font-family: 'SF Mono', 'Consolas', monospace;\r\n padding: 3px 8px;\r\n background: var(--bg-input);\r\n border-radius: 5px;\r\n }\r\n\r\n .label-value.angle { color: var(--accent-angle); }\r\n .label-value.field { color: var(--accent-field); }\r\n .label-value.area { color: var(--accent-normal); }\r\n\r\n input[type=\"range\"] {\r\n width: 100%;\r\n height: 6px;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n background: var(--bg-input);\r\n border-radius: 3px;\r\n cursor: pointer;\r\n }\r\n\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n width: 16px;\r\n height: 16px;\r\n background: var(--text-main);\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: transform 0.12s ease;\r\n }\r\n\r\n input[type=\"range\"]::-webkit-slider-thumb:hover {\r\n transform: scale(1.2);\r\n }\r\n\r\n input[type=\"range\"]::-moz-range-thumb {\r\n width: 16px;\r\n height: 16px;\r\n background: var(--text-main);\r\n border-radius: 50%;\r\n border: none;\r\n cursor: pointer;\r\n }\r\n\r\n .legend {\r\n margin-top: 16px;\r\n padding-top: 14px;\r\n border-top: 1px solid var(--border-color);\r\n }\r\n\r\n .legend-title {\r\n font-size: 0.7rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1.2px;\r\n color: var(--text-muted);\r\n margin-bottom: 10px;\r\n }\r\n\r\n .legend-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-bottom: 6px;\r\n font-size: 0.78rem;\r\n }\r\n\r\n .legend-marker {\r\n width: 18px;\r\n height: 3px;\r\n border-radius: 2px;\r\n }\r\n\r\n .legend-marker.field { background: var(--accent-field); }\r\n .legend-marker.normal { background: var(--accent-normal); }\r\n .legend-marker.surface { \r\n background: rgba(0, 180, 216, 0.3);\r\n border: 1px solid var(--accent-normal);\r\n }\r\n .legend-marker.angle-arc { \r\n background: var(--accent-angle);\r\n border-radius: 50%;\r\n width: 10px;\r\n height: 10px;\r\n }\r\n\r\n .right-panel {\r\n position: fixed;\r\n top: 24px;\r\n right: 24px;\r\n width: 220px;\r\n background: var(--bg-panel);\r\n border: 1px solid var(--accent-flux);\r\n border-radius: 14px;\r\n padding: 18px;\r\n z-index: 100;\r\n backdrop-filter: blur(12px);\r\n }\r\n\r\n .flux-header {\r\n text-align: center;\r\n margin-bottom: 12px;\r\n padding-bottom: 12px;\r\n border-bottom: 1px solid var(--border-color);\r\n }\r\n\r\n .flux-label {\r\n font-size: 0.75rem;\r\n color: var(--text-muted);\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .flux-value {\r\n font-size: 2rem;\r\n font-weight: 800;\r\n font-family: 'SF Mono', 'Consolas', monospace;\r\n text-align: center;\r\n }\r\n\r\n .flux-positive { color: var(--accent-flux); }\r\n .flux-zero { color: var(--text-muted); }\r\n .flux-negative { color: #ff6b6b; }\r\n\r\n .flux-unit {\r\n font-size: 0.8rem;\r\n color: var(--text-muted);\r\n text-align: center;\r\n margin-top: 2px;\r\n }\r\n\r\n .formula-display {\r\n background: var(--bg-input);\r\n border-radius: 8px;\r\n padding: 12px;\r\n text-align: center;\r\n margin-top: 12px;\r\n }\r\n\r\n .formula-text {\r\n font-family: 'Times New Roman', Georgia, serif;\r\n font-size: 1.2rem;\r\n font-style: italic;\r\n }\r\n\r\n .formula-text .phi { color: var(--accent-flux); }\r\n .formula-text .E { color: var(--accent-field); }\r\n .formula-text .A { color: var(--accent-normal); }\r\n .formula-text .theta { color: var(--accent-angle); }\r\n\r\n .params-bar {\r\n position: fixed;\r\n bottom: 24px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: var(--bg-panel);\r\n border: 1px solid var(--border-color);\r\n border-radius: 10px;\r\n padding: 12px 24px;\r\n z-index: 100;\r\n display: flex;\r\n gap: 32px;\r\n backdrop-filter: blur(12px);\r\n }\r\n\r\n .param-item {\r\n text-align: center;\r\n }\r\n\r\n .param-label {\r\n font-size: 0.65rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n color: var(--text-muted);\r\n margin-bottom: 3px;\r\n }\r\n\r\n .param-value {\r\n font-size: 1rem;\r\n font-weight: 700;\r\n font-family: 'SF Mono', 'Consolas', monospace;\r\n }\r\n\r\n .param-value.field-val { color: var(--accent-field); }\r\n .param-value.area-val { color: var(--accent-normal); }\r\n .param-value.angle-val { color: var(--accent-angle); }\r\n .param-value.cos-val { color: var(--text-muted); }\r\n\r\n .instructions {\r\n position: fixed;\r\n top: 24px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: var(--bg-panel);\r\n border: 1px solid var(--border-color);\r\n border-radius: 8px;\r\n padding: 8px 16px;\r\n font-size: 0.75rem;\r\n color: var(--text-muted);\r\n z-index: 100;\r\n backdrop-filter: blur(12px);\r\n }\r\n\r\n .note-box {\r\n margin-top: 12px;\r\n padding: 10px;\r\n background: rgba(56, 176, 0, 0.1);\r\n border: 1px solid rgba(56, 176, 0, 0.3);\r\n border-radius: 8px;\r\n font-size: 0.72rem;\r\n color: var(--text-muted);\r\n line-height: 1.4;\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .left-panel {\r\n width: calc(100% - 48px);\r\n max-width: 260px;\r\n }\r\n \r\n .right-panel {\r\n width: calc(100% - 48px);\r\n max-width: 200px;\r\n }\r\n \r\n .params-bar {\r\n flex-wrap: wrap;\r\n width: calc(100% - 48px);\r\n justify-content: center;\r\n gap: 16px;\r\n }\r\n \r\n .instructions {\r\n display: none;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"scene-container\"><\/div>\r\n\r\n <div class=\"instructions\">\r\n Arrastra para rotar vista | Scroll para zoom\r\n <\/div>\r\n\r\n <div class=\"left-panel\">\r\n \r\n \r\n \r\n \r\n \r\n <!-- Encabezado Institucional Agregado -->\r\n <div class=\"branding-header\">\r\n <a href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/FISAR_SIM\/\" target=\"_blank\">\r\n <img decoding=\"async\" src=\"FISAR_SIM_1\" alt=\"Logo FLUXAR\" class=\"branding-logo-small\"><\/a>\r\n\r\n <div class=\"branding-text-box\">\r\n <span class=\"branding-inst\">FICA - UNSL<\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n <div class=\"panel-header\">\r\n <h1 class=\"panel-title\">Flujo Electrico<\/h1>\r\n <p class=\"panel-desc\">Simulacion interactiva 3D<\/p>\r\n <\/div>\r\n\r\n <div class=\"control-section\">\r\n <div class=\"control-label\">\r\n <span class=\"label-text\">Angulo entre E y n (\u03b8)<\/span>\r\n <span class=\"label-value angle\" id=\"angleDisplay\">0\u00b0<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"angleSlider\" min=\"0\" max=\"180\" value=\"0\" step=\"1\">\r\n <\/div>\r\n\r\n <div class=\"control-section\">\r\n <div class=\"control-label\">\r\n <span class=\"label-text\">Campo E<\/span>\r\n <span class=\"label-value field\" id=\"fieldDisplay\">100 N\/C<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"fieldSlider\" min=\"10\" max=\"200\" value=\"100\" step=\"5\">\r\n <\/div>\r\n\r\n <div class=\"control-section\">\r\n <div class=\"control-label\">\r\n <span class=\"label-text\">Area A<\/span>\r\n <span class=\"label-value area\" id=\"areaDisplay\">4.0 m\u00b2<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"areaSlider\" min=\"1\" max=\"9\" value=\"4\" step=\"0.5\">\r\n <\/div>\r\n\r\n <div class=\"legend\">\r\n <div class=\"legend-title\">Leyenda<\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-marker field\"><\/div>\r\n <span>Campo electrico E (fijo)<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-marker normal\"><\/div>\r\n <span>Vector normal n<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-marker surface\"><\/div>\r\n <span>Superficie area A<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-marker angle-arc\"><\/div>\r\n <span>Angulo \u03b8 entre E y n<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"note-box\">\r\n <strong>\u03b8 = 0\u00b0:<\/strong> n paralelo a E \u2192 Flujo maximo<br>\r\n <strong>\u03b8 = 90\u00b0:<\/strong> n perpendicular a E \u2192 Flujo cero<br>\r\n <strong>\u03b8 = 180\u00b0:<\/strong> n opuesto a E \u2192 Flujo negativo\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"right-panel\">\r\n <div class=\"flux-header\">\r\n <div class=\"flux-label\">Flujo Electrico<\/div>\r\n <\/div>\r\n <div class=\"flux-value flux-positive\" id=\"fluxValue\">400.0<\/div>\r\n <div class=\"flux-unit\">N\u00b7m\u00b2\/C<\/div>\r\n\r\n <div class=\"formula-display\">\r\n <div class=\"formula-text\">\r\n <span class=\"phi\">\u03a6<\/span> = <span class=\"E\">E<\/span><span class=\"A\">A<\/span>cos<span class=\"theta\">\u03b8<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"params-bar\">\r\n <div class=\"param-item\">\r\n <div class=\"param-label\">E<\/div>\r\n <div class=\"param-value field-val\" id=\"paramE\">100 N\/C<\/div>\r\n <\/div>\r\n <div class=\"param-item\">\r\n <div class=\"param-label\">A<\/div>\r\n <div class=\"param-value area-val\" id=\"paramA\">4.0 m\u00b2<\/div>\r\n <\/div>\r\n <div class=\"param-item\">\r\n <div class=\"param-label\">\u03b8<\/div>\r\n <div class=\"param-value angle-val\" id=\"paramTheta\">0\u00b0<\/div>\r\n <\/div>\r\n <div class=\"param-item\">\r\n <div class=\"param-label\">cos(\u03b8)<\/div>\r\n <div class=\"param-value cos-val\" id=\"paramCos\">1.000<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script type=\"importmap\">\r\n {\r\n \"imports\": {\r\n \"three\": \"https:\/\/unpkg.com\/three@0.160.0\/build\/three.module.js\",\r\n \"three\/addons\/\": \"https:\/\/unpkg.com\/three@0.160.0\/examples\/jsm\/\"\r\n }\r\n }\r\n <\/script>\r\n\r\n <script type=\"module\">\r\n import * as THREE from 'three';\r\n import { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\r\n\r\n const container = document.getElementById('scene-container');\r\n \r\n let angleBetweenVectors = 0;\r\n let fieldMagnitude = 100;\r\n let surfaceArea = 4;\r\n \r\n const FIELD_DIRECTION = new THREE.Vector3(0, 0, 1).normalize();\r\n \r\n const scene = new THREE.Scene();\r\n scene.background = new THREE.Color(0x0a0d10);\r\n\r\n const camera = new THREE.PerspectiveCamera(50, window.innerWidth \/ window.innerHeight, 0.1, 500);\r\n camera.position.set(8, 5, 10);\r\n\r\n const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n container.appendChild(renderer.domElement);\r\n\r\n const controls = new OrbitControls(camera, renderer.domElement);\r\n controls.enableDamping = true;\r\n controls.dampingFactor = 0.05;\r\n controls.minDistance = 5;\r\n controls.maxDistance = 25;\r\n controls.target.set(0, 0, 0);\r\n\r\n \/\/ --- INICIO: IMPLEMENTACI\u00d3N ZOOM GRADUAL MANUAL ---\r\n \/\/ 1. Desactivamos el zoom por defecto de OrbitControls\r\n controls.enableZoom = false;\r\n\r\n \/\/ 2. A\u00f1adimos nuestro propio listener para la rueda del mouse\r\n renderer.domElement.addEventListener('wheel', (event) => {\r\n event.preventDefault(); \/\/ Previene el scroll de la p\u00e1gina\r\n\r\n \/\/ Velocidad del zoom (negativo para invertir direcci\u00f3n natural de la rueda)\r\n const zoomSpeed = 0.002;\r\n const delta = event.deltaY * zoomSpeed;\r\n\r\n \/\/ Obtenemos la direcci\u00f3n en la que mira la c\u00e1mara\r\n const direction = new THREE.Vector3();\r\n camera.getWorldDirection(direction);\r\n\r\n \/\/ Movemos la c\u00e1mara.\r\n \/\/ La cantidad de movimiento es proporcional a la distancia actual,\r\n \/\/ lo que da una sensaci\u00f3n de zoom \"lineal\" o \"dolly\".\r\n camera.position.addScaledVector(direction, -delta * camera.position.length());\r\n\r\n }, { passive: false }); \/\/ passive: false es necesario para poder hacer preventDefault\r\n \/\/ --- FIN: IMPLEMENTACI\u00d3N ZOOM GRADUAL MANUAL ---\r\n\r\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);\r\n scene.add(ambientLight);\r\n\r\n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\r\n directionalLight.position.set(10, 15, 10);\r\n scene.add(directionalLight);\r\n\r\n const fieldGroup = new THREE.Group();\r\n const surfaceGroup = new THREE.Group();\r\n scene.add(fieldGroup);\r\n scene.add(surfaceGroup);\r\n\r\n const gridHelper = new THREE.GridHelper(20, 20, 0x2a3540, 0x1a2028);\r\n gridHelper.position.y = -3;\r\n scene.add(gridHelper);\r\n\r\n const axesHelper = new THREE.AxesHelper(2);\r\n axesHelper.position.set(-8, -3, -8);\r\n scene.add(axesHelper);\r\n\r\n function createElectricField() {\r\n fieldGroup.clear();\r\n \r\n const lineLength = 14;\r\n const spacing = 2.5;\r\n const gridSize = 2;\r\n \r\n for (let i = -gridSize; i <= gridSize; i++) {\r\n for (let j = -gridSize; j <= gridSize; j++) {\r\n const x = i * spacing;\r\n const y = j * spacing;\r\n \r\n const start = new THREE.Vector3(x, y, -lineLength\/2);\r\n const end = new THREE.Vector3(x, y, lineLength\/2);\r\n \r\n const points = [start, end];\r\n const geometry = new THREE.BufferGeometry().setFromPoints(points);\r\n \r\n const material = new THREE.LineBasicMaterial({\r\n color: 0xe85d04,\r\n transparent: true,\r\n opacity: 0.5\r\n });\r\n \r\n const line = new THREE.Line(geometry, material);\r\n fieldGroup.add(line);\r\n }\r\n }\r\n \r\n const arrowLength = 4;\r\n const arrowPosition = new THREE.Vector3(0, 0, -5);\r\n \r\n const EArrow = new THREE.ArrowHelper(FIELD_DIRECTION, arrowPosition, arrowLength, 0xe85d04, 0.6, 0.3);\r\n fieldGroup.add(EArrow);\r\n \r\n const eLabelSprite = createTextSprite('E', '#e85d04');\r\n eLabelSprite.position.set(0.5, 0, -5 + arrowLength + 0.3);\r\n eLabelSprite.scale.set(0.8, 0.8, 0.8);\r\n fieldGroup.add(eLabelSprite);\r\n \r\n const EArrow2 = new THREE.ArrowHelper(FIELD_DIRECTION, new THREE.Vector3(0, 3, -5), arrowLength * 0.8, 0xe85d04, 0.5, 0.25);\r\n fieldGroup.add(EArrow2);\r\n }\r\n\r\n let surfaceMesh = null;\r\n let normalArrow = null;\r\n let angleArcGroup = null;\r\n\r\n function createSurface() {\r\n surfaceGroup.clear();\r\n \r\n const sideLength = Math.sqrt(surfaceArea);\r\n \r\n const surfaceGeometry = new THREE.PlaneGeometry(sideLength, sideLength);\r\n const surfaceMaterial = new THREE.MeshPhongMaterial({\r\n color: 0x00b4d8,\r\n transparent: true,\r\n opacity: 0.35,\r\n side: THREE.DoubleSide,\r\n depthWrite: false\r\n });\r\n \r\n surfaceMesh = new THREE.Mesh(surfaceGeometry, surfaceMaterial);\r\n surfaceGroup.add(surfaceMesh);\r\n \r\n const borderGeometry = new THREE.EdgesGeometry(surfaceGeometry);\r\n const borderMaterial = new THREE.LineBasicMaterial({ color: 0x00b4d8, linewidth: 2 });\r\n const border = new THREE.LineSegments(borderGeometry, borderMaterial);\r\n surfaceGroup.add(border);\r\n \r\n const normalLength = 3;\r\n const normalDirection = new THREE.Vector3(0, 0, 1);\r\n \r\n normalArrow = new THREE.ArrowHelper(normalDirection, new THREE.Vector3(0, 0, 0), normalLength, 0x00b4d8, 0.5, 0.25);\r\n surfaceGroup.add(normalArrow);\r\n \r\n const nLabelSprite = createTextSprite('n', '#00b4d8');\r\n nLabelSprite.position.set(0.3, 0.2, normalLength + 0.2);\r\n nLabelSprite.scale.set(0.6, 0.6, 0.6);\r\n surfaceGroup.add(nLabelSprite);\r\n \r\n updateSurfaceRotation();\r\n }\r\n\r\n function createAngleArc() {\r\n if (angleArcGroup) {\r\n scene.remove(angleArcGroup);\r\n }\r\n \r\n angleArcGroup = new THREE.Group();\r\n \r\n const angleRad = (angleBetweenVectors * Math.PI) \/ 180;\r\n const arcRadius = 1.5;\r\n \r\n if (angleBetweenVectors > 2 && angleBetweenVectors < 178) {\r\n const arcPoints = [];\r\n const segments = 40;\r\n \r\n for (let i = 0; i <= segments; i++) {\r\n const t = i \/ segments;\r\n const a = t * angleRad;\r\n \r\n arcPoints.push(new THREE.Vector3(\r\n Math.sin(a) * arcRadius,\r\n 0,\r\n Math.cos(a) * arcRadius\r\n ));\r\n }\r\n \r\n const arcGeometry = new THREE.BufferGeometry().setFromPoints(arcPoints);\r\n const arcMaterial = new THREE.LineDashedMaterial({\r\n color: 0xffbe0b,\r\n dashSize: 0.15,\r\n gapSize: 0.08,\r\n transparent: true,\r\n opacity: 0.9\r\n });\r\n \r\n const arc = new THREE.Line(arcGeometry, arcMaterial);\r\n arc.computeLineDistances();\r\n angleArcGroup.add(arc);\r\n \r\n const midAngle = angleRad \/ 2;\r\n const thetaLabel = createTextSprite('\u03b8', '#ffbe0b');\r\n thetaLabel.position.set(\r\n Math.sin(midAngle) * (arcRadius + 0.5),\r\n 0.3,\r\n Math.cos(midAngle) * (arcRadius + 0.5)\r\n );\r\n thetaLabel.scale.set(0.5, 0.5, 0.5);\r\n angleArcGroup.add(thetaLabel);\r\n }\r\n \r\n scene.add(angleArcGroup);\r\n }\r\n\r\n function createTextSprite(text, color) {\r\n const canvas = document.createElement('canvas');\r\n const ctx = canvas.getContext('2d');\r\n canvas.width = 128;\r\n canvas.height = 128;\r\n \r\n ctx.fillStyle = 'transparent';\r\n ctx.fillRect(0, 0, 128, 128);\r\n \r\n ctx.font = 'bold 80px Arial';\r\n ctx.fillStyle = color;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText(text, 64, 64);\r\n \r\n const texture = new THREE.CanvasTexture(canvas);\r\n const material = new THREE.SpriteMaterial({ map: texture, transparent: true });\r\n const sprite = new THREE.Sprite(material);\r\n \r\n return sprite;\r\n }\r\n\r\n function updateSurfaceRotation() {\r\n const angleRad = (angleBetweenVectors * Math.PI) \/ 180;\r\n surfaceGroup.rotation.y = angleRad;\r\n }\r\n\r\n function calculateFlux() {\r\n const angleRad = (angleBetweenVectors * Math.PI) \/ 180;\r\n const cosTheta = Math.cos(angleRad);\r\n const flux = fieldMagnitude * surfaceArea * cosTheta;\r\n \r\n return { flux, cosTheta };\r\n }\r\n\r\n function updateUI() {\r\n const { flux, cosTheta } = calculateFlux();\r\n \r\n document.getElementById('angleDisplay').textContent = `${angleBetweenVectors}\u00b0`;\r\n document.getElementById('fieldDisplay').textContent = `${fieldMagnitude} N\/C`;\r\n document.getElementById('areaDisplay').textContent = `${surfaceArea.toFixed(1)} m\u00b2`;\r\n \r\n const fluxElement = document.getElementById('fluxValue');\r\n fluxElement.textContent = flux.toFixed(1);\r\n fluxElement.className = 'flux-value';\r\n \r\n if (flux > 0.1) {\r\n fluxElement.classList.add('flux-positive');\r\n } else if (flux < -0.1) {\r\n fluxElement.classList.add('flux-negative');\r\n } else {\r\n fluxElement.classList.add('flux-zero');\r\n }\r\n \r\n document.getElementById('paramE').textContent = `${fieldMagnitude} N\/C`;\r\n document.getElementById('paramA').textContent = `${surfaceArea.toFixed(1)} m\u00b2`;\r\n document.getElementById('paramTheta').textContent = `${angleBetweenVectors}\u00b0`;\r\n document.getElementById('paramCos').textContent = cosTheta.toFixed(3);\r\n }\r\n\r\n document.getElementById('angleSlider').addEventListener('input', (e) => {\r\n angleBetweenVectors = parseFloat(e.target.value);\r\n updateSurfaceRotation();\r\n createAngleArc();\r\n updateUI();\r\n });\r\n\r\n document.getElementById('fieldSlider').addEventListener('input', (e) => {\r\n fieldMagnitude = parseFloat(e.target.value);\r\n updateUI();\r\n });\r\n\r\n document.getElementById('areaSlider').addEventListener('input', (e) => {\r\n surfaceArea = parseFloat(e.target.value);\r\n createSurface();\r\n updateUI();\r\n });\r\n\r\n window.addEventListener('resize', () => {\r\n camera.aspect = window.innerWidth \/ window.innerHeight;\r\n camera.updateProjectionMatrix();\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n });\r\n\r\n createElectricField();\r\n createSurface();\r\n createAngleArc();\r\n updateUI();\r\n\r\n function animate() {\r\n requestAnimationFrame(animate);\r\n controls.update();\r\n renderer.render(scene, camera);\r\n }\r\n\r\n animate();\r\n <\/script>\r\n<\/body>\r\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>Simulador de Flujo Electrico – Fisica 2 Arrastra para rotar vista | Scroll para zoom FICA – UNSL Flujo Electrico Simulacion interactiva 3D Angulo entre…<\/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-5585","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>flujo_electrico - 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\/flujo_electrico\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"flujo_electrico - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"Simulador de Flujo Electrico – Fisica 2 Arrastra para rotar vista | Scroll para zoom FICA - UNSL Flujo Electrico Simulacion interactiva 3D Angulo entre…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/flujo_electrico\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-19T17:43:29+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=\"1 minuto\" \/>\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\/flujo_electrico\/\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/flujo_electrico\/\",\"name\":\"flujo_electrico - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#website\"},\"datePublished\":\"2026-03-05T13:37:08+00:00\",\"dateModified\":\"2026-03-19T17:43:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/flujo_electrico\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/flujo_electrico\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/flujo_electrico\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/fisica2.fica.unsl.edu.ar\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"flujo_electrico\"}]},{\"@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 SEO plugin. -->","yoast_head_json":{"title":"flujo_electrico - 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\/flujo_electrico\/","og_locale":"es_ES","og_type":"article","og_title":"flujo_electrico - F\u00edsica 2","og_description":"Simulador de Flujo Electrico – Fisica 2 Arrastra para rotar vista | Scroll para zoom FICA - UNSL Flujo Electrico Simulacion interactiva 3D Angulo entre…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/flujo_electrico\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-03-19T17:43:29+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/flujo_electrico\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/flujo_electrico\/","name":"flujo_electrico - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-03-05T13:37:08+00:00","dateModified":"2026-03-19T17:43:29+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/flujo_electrico\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/flujo_electrico\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/flujo_electrico\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"flujo_electrico"}]},{"@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\/5585","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=5585"}],"version-history":[{"count":23,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5585\/revisions"}],"predecessor-version":[{"id":6682,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/5585\/revisions\/6682"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=5585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}