{"id":6080,"date":"2026-03-11T10:56:44","date_gmt":"2026-03-11T13:56:44","guid":{"rendered":"https:\/\/fisica2.fica.unsl.edu.ar\/?page_id=6080"},"modified":"2026-03-19T14:53:32","modified_gmt":"2026-03-19T17:53:32","slug":"ley_de_ohm_laboratorio","status":"publish","type":"page","link":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_laboratorio\/","title":{"rendered":"ley_de_ohm_laboratorio"},"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 Simulaci\u00f3n Ley de Ohm - Circuito Mixto<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* ============================================\r\n VARIABLES CSS Y CONFIGURACI\u00d3N BASE\r\n ============================================ *\/\r\n :root {\r\n --bg-primary: #f0ebe3;\r\n --bg-secondary: #e8e2d9;\r\n --bg-card: #fffefa;\r\n --text-primary: #1a1a1a;\r\n --text-secondary: #4a4a4a;\r\n --text-muted: #6b6b6b;\r\n --accent-blue: #2563eb;\r\n --accent-blue-light: #3b82f6;\r\n --accent-red: #dc2626;\r\n --accent-red-light: #ef4444;\r\n --accent-green: #16a34a;\r\n --accent-orange: #ea580c;\r\n --accent-purple: #7c3aed;\r\n --border-color: #d1ccc4;\r\n --shadow-soft: 0 4px 20px rgba(0,0,0,0.08);\r\n --shadow-medium: 0 8px 30px rgba(0,0,0,0.12);\r\n --radius-sm: 6px;\r\n --radius-md: 12px;\r\n --radius-lg: 20px;\r\n }\r\n\r\n \/* ============================================\r\n RESET Y ESTILOS BASE\r\n ============================================ *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n html {\r\n font-size: 16px;\r\n }\r\n\r\n body {\r\n font-family: 'Space Grotesk', sans-serif;\r\n background: var(--bg-primary);\r\n color: var(--text-primary);\r\n min-height: 100vh;\r\n line-height: 1.5;\r\n }\r\n\r\n body::before {\r\n content: '';\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: \r\n radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.05) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 70%, rgba(220, 38, 38, 0.05) 0%, transparent 50%);\r\n pointer-events: none;\r\n z-index: -1;\r\n }\r\n\r\n \/* ============================================\r\n HEADER\r\n ============================================ *\/\r\n .header {\r\n background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);\r\n color: white;\r\n padding: 2rem 1.5rem;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .header::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: \r\n repeating-linear-gradient(\r\n 90deg,\r\n transparent,\r\n transparent 50px,\r\n rgba(255,255,255,0.02) 50px,\r\n rgba(255,255,255,0.02) 51px\r\n );\r\n pointer-events: none;\r\n }\r\n\r\n .header h1 {\r\n font-size: clamp(1.5rem, 4vw, 2.5rem);\r\n font-weight: 700;\r\n letter-spacing: -0.02em;\r\n margin-bottom: 0.5rem;\r\n position: relative;\r\n }\r\n\r\n .header .subtitle {\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: clamp(0.85rem, 2vw, 1rem);\r\n color: rgba(255,255,255,0.7);\r\n position: relative;\r\n }\r\n\r\n .equation-badge {\r\n display: inline-block;\r\n background: var(--accent-orange);\r\n color: white;\r\n padding: 0.5rem 1.5rem;\r\n border-radius: 50px;\r\n font-family: 'JetBrains Mono', monospace;\r\n font-weight: 500;\r\n font-size: 1.1rem;\r\n margin-top: 1rem;\r\n position: relative;\r\n box-shadow: 0 4px 15px rgba(234, 88, 12, 0.3);\r\n }\r\n\r\n \/* ============================================\r\n LAYOUT PRINCIPAL\r\n ============================================ *\/\r\n .main-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 1.5rem;\r\n display: grid;\r\n gap: 1.5rem;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .main-container {\r\n grid-template-columns: 1fr 380px;\r\n padding: 2rem;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n SECCI\u00d3N DEL CIRCUITO\r\n ============================================ *\/\r\n .circuit-section {\r\n background: var(--bg-card);\r\n border-radius: var(--radius-lg);\r\n box-shadow: var(--shadow-medium);\r\n border: 1px solid var(--border-color);\r\n overflow: hidden;\r\n }\r\n\r\n .circuit-header {\r\n background: var(--bg-secondary);\r\n padding: 1rem 1.5rem;\r\n border-bottom: 1px solid var(--border-color);\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n }\r\n\r\n .circuit-header-icon {\r\n width: 32px;\r\n height: 32px;\r\n background: var(--accent-blue);\r\n border-radius: var(--radius-sm);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .circuit-header-icon svg {\r\n width: 18px;\r\n height: 18px;\r\n color: white;\r\n }\r\n\r\n .circuit-header h2 {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n }\r\n\r\n .circuit-canvas-container {\r\n padding: 1rem;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n #circuitCanvas {\r\n max-width: 100%;\r\n height: auto;\r\n border-radius: var(--radius-md);\r\n background: linear-gradient(180deg, #fafaf8 0%, #f5f5f0 100%);\r\n }\r\n\r\n \/* ============================================\r\n PANELES DE INSTRUMENTOS\r\n ============================================ *\/\r\n .instruments-panel {\r\n display: grid;\r\n gap: 1rem;\r\n }\r\n\r\n .instrument-group {\r\n background: var(--bg-card);\r\n border-radius: var(--radius-md);\r\n box-shadow: var(--shadow-soft);\r\n border: 1px solid var(--border-color);\r\n overflow: hidden;\r\n }\r\n\r\n .instrument-group-header {\r\n padding: 0.75rem 1rem;\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .instrument-group-header.volts {\r\n background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);\r\n border-bottom: 2px solid var(--accent-blue);\r\n }\r\n\r\n .instrument-group-header.amps {\r\n background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);\r\n border-bottom: 2px solid var(--accent-red);\r\n }\r\n\r\n .instrument-group-header.results {\r\n background: linear-gradient(135deg, rgba(22, 163, 74, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);\r\n border-bottom: 2px solid var(--accent-green);\r\n }\r\n\r\n .instrument-grid {\r\n display: grid;\r\n gap: 0.75rem;\r\n padding: 1rem;\r\n }\r\n\r\n @media (min-width: 640px) {\r\n .instrument-grid {\r\n grid-template-columns: repeat(3, 1fr);\r\n }\r\n }\r\n\r\n .instrument-card {\r\n background: var(--bg-secondary);\r\n border-radius: var(--radius-sm);\r\n padding: 0.75rem;\r\n text-align: center;\r\n border: 1px solid rgba(0,0,0,0.05);\r\n }\r\n\r\n .instrument-label {\r\n font-size: 0.75rem;\r\n color: var(--text-muted);\r\n margin-bottom: 0.25rem;\r\n font-weight: 500;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n\r\n .instrument-value {\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 1.25rem;\r\n font-weight: 500;\r\n }\r\n\r\n .instrument-value.volt {\r\n color: var(--accent-blue);\r\n }\r\n\r\n .instrument-value.amp {\r\n color: var(--accent-red);\r\n }\r\n\r\n .instrument-value.result {\r\n color: var(--accent-green);\r\n }\r\n\r\n .instrument-unit {\r\n font-size: 0.7rem;\r\n color: var(--text-muted);\r\n margin-left: 0.25rem;\r\n }\r\n\r\n \/* ============================================\r\n CONTROLES DESLIZANTES\r\n ============================================ *\/\r\n .controls-section {\r\n background: var(--bg-card);\r\n border-radius: var(--radius-lg);\r\n box-shadow: var(--shadow-medium);\r\n border: 1px solid var(--border-color);\r\n overflow: hidden;\r\n }\r\n\r\n .controls-header {\r\n background: var(--bg-secondary);\r\n padding: 1rem 1.5rem;\r\n border-bottom: 1px solid var(--border-color);\r\n font-weight: 600;\r\n font-size: 1.1rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n }\r\n\r\n .controls-header-icon {\r\n width: 32px;\r\n height: 32px;\r\n background: var(--accent-purple);\r\n border-radius: var(--radius-sm);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .controls-header-icon svg {\r\n width: 18px;\r\n height: 18px;\r\n color: white;\r\n }\r\n\r\n .controls-list {\r\n padding: 1.25rem;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.25rem;\r\n }\r\n\r\n .control-item {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\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 }\r\n\r\n .control-label span:first-child {\r\n font-weight: 500;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .control-value {\r\n font-family: 'JetBrains Mono', monospace;\r\n background: var(--bg-secondary);\r\n padding: 0.25rem 0.75rem;\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n min-width: 80px;\r\n text-align: center;\r\n }\r\n\r\n .control-value.voltage {\r\n background: linear-gradient(135deg, rgba(234, 88, 12, 0.15) 0%, rgba(249, 115, 22, 0.1) 100%);\r\n color: var(--accent-orange);\r\n }\r\n\r\n .control-value.resistance {\r\n background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);\r\n color: var(--accent-purple);\r\n }\r\n\r\n \/* Slider personalizado *\/\r\n input[type=\"range\"] {\r\n width: 100%;\r\n height: 8px;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n background: var(--bg-secondary);\r\n border-radius: 50px;\r\n outline: none;\r\n cursor: pointer;\r\n }\r\n\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 22px;\r\n height: 22px;\r\n border-radius: 50%;\r\n background: white;\r\n border: 3px solid var(--accent-purple);\r\n cursor: pointer;\r\n box-shadow: 0 2px 8px rgba(0,0,0,0.15);\r\n transition: transform 0.15s ease, box-shadow 0.15s ease;\r\n }\r\n\r\n input[type=\"range\"]::-webkit-slider-thumb:hover {\r\n transform: scale(1.1);\r\n box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);\r\n }\r\n\r\n input[type=\"range\"]::-moz-range-thumb {\r\n width: 22px;\r\n height: 22px;\r\n border-radius: 50%;\r\n background: white;\r\n border: 3px solid var(--accent-purple);\r\n cursor: pointer;\r\n box-shadow: 0 2px 8px rgba(0,0,0,0.15);\r\n }\r\n\r\n input[type=\"range\"].voltage-slider::-webkit-slider-thumb {\r\n border-color: var(--accent-orange);\r\n }\r\n\r\n input[type=\"range\"].voltage-slider::-moz-range-thumb {\r\n border-color: var(--accent-orange);\r\n }\r\n\r\n \/* ============================================\r\n BOTONES DE ACCI\u00d3N\r\n ============================================ *\/\r\n .action-buttons {\r\n display: flex;\r\n gap: 1rem;\r\n padding: 0 1.25rem 1.25rem;\r\n }\r\n\r\n .btn {\r\n flex: 1;\r\n padding: 0.875rem 1rem;\r\n border: none;\r\n border-radius: var(--radius-sm);\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .btn svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n\r\n .btn-primary {\r\n background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-light) 100%);\r\n color: white;\r\n box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);\r\n }\r\n\r\n .btn-primary:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);\r\n }\r\n\r\n .btn-secondary {\r\n background: var(--bg-secondary);\r\n color: var(--text-primary);\r\n border: 1px solid var(--border-color);\r\n }\r\n\r\n .btn-secondary:hover {\r\n background: #e0dbd3;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .btn:active {\r\n transform: translateY(0) !important;\r\n }\r\n\r\n \/* ============================================\r\n PANEL DE F\u00d3RMULAS\r\n ============================================ *\/\r\n .formula-panel {\r\n background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);\r\n border-radius: var(--radius-md);\r\n padding: 1.25rem;\r\n margin: 0 1.25rem 1.25rem;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n }\r\n\r\n .formula-title {\r\n color: rgba(255,255,255,0.6);\r\n font-size: 0.75rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n margin-bottom: 0.75rem;\r\n }\r\n\r\n .formula-grid {\r\n display: grid;\r\n gap: 0.75rem;\r\n }\r\n\r\n .formula-item {\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 0.85rem;\r\n color: rgba(255,255,255,0.9);\r\n background: rgba(255,255,255,0.05);\r\n padding: 0.5rem 0.75rem;\r\n border-radius: var(--radius-sm);\r\n border-left: 3px solid var(--accent-orange);\r\n }\r\n\r\n \/* ============================================\r\n LEYENDA DE COLORES\r\n ============================================ *\/\r\n .legend {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 1rem;\r\n padding: 1rem 1.25rem;\r\n background: var(--bg-secondary);\r\n border-top: 1px solid var(--border-color);\r\n }\r\n\r\n .legend-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n font-size: 0.8rem;\r\n color: var(--text-secondary);\r\n }\r\n\r\n .legend-dot {\r\n width: 12px;\r\n height: 12px;\r\n border-radius: 50%;\r\n }\r\n\r\n .legend-dot.voltage {\r\n background: var(--accent-blue);\r\n }\r\n\r\n .legend-dot.current {\r\n background: var(--accent-red);\r\n }\r\n\r\n .legend-dot.resistance {\r\n background: var(--accent-purple);\r\n }\r\n\r\n .legend-dot.flow {\r\n background: linear-gradient(135deg, #f59e0b, #fbbf24);\r\n }\r\n\r\n \/* ============================================\r\n ANIMACIONES\r\n ============================================ *\/\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .animate-in {\r\n animation: fadeInUp 0.5s ease-out forwards;\r\n }\r\n\r\n .delay-1 { animation-delay: 0.1s; opacity: 0; }\r\n .delay-2 { animation-delay: 0.2s; opacity: 0; }\r\n .delay-3 { animation-delay: 0.3s; opacity: 0; }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n *, *::before, *::after {\r\n animation-duration: 0.01ms !important;\r\n animation-iteration-count: 1 !important;\r\n transition-duration: 0.01ms !important;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE ADICIONAL\r\n ============================================ *\/\r\n @media (max-width: 639px) {\r\n .header {\r\n padding: 1.5rem 1rem;\r\n }\r\n \r\n .main-container {\r\n padding: 1rem;\r\n }\r\n \r\n .instrument-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .action-buttons {\r\n flex-direction: column;\r\n }\r\n }\r\n \r\n \r\n \r\n .footer-logo {\r\n height: 30px !important; \/* Prueba con un valor peque\u00f1o como 20px o 25px *\/\r\n width: auto !important; \/* Esto asegura que no se deforme *\/\r\n}\r\n \r\n \r\n .footer-logo-container {\r\n display: flex;\r\n align-items: center; \/* Alinea verticalmente al centro *\/\r\n justify-content: center; \/* Centra el bloque entero horizontalmente *\/\r\n background-color: #1a1a1a; \/* El fondo oscuro de tu imagen *\/\r\n padding: 10px 20px;\r\n margin-top: 20px;\r\n border-radius: 4px;\r\n color: white;\r\n font-family: sans-serif;\r\n}\r\n\r\n.footer-logo {\r\n height: 30px; \/* Ajusta seg\u00fan el tama\u00f1o de tu imagen *\/\r\n margin-right: 15px;\r\n}\r\n\r\n.footer-divider {\r\n width: 1px;\r\n height: 30px;\r\n background-color: #555; \/* Color de la l\u00ednea vertical *\/\r\n margin-right: 15px;\r\n}\r\n\r\n.footer-text {\r\n line-height: 1.2;\r\n text-align: left;\r\n}\r\n\r\n.footer-text strong {\r\n font-size: 14px;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.footer-text span {\r\n font-size: 11px;\r\n color: #ccc;\r\n}\r\n \r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header class=\"header\">\r\n <h1>Simulacion Interactiva: Ley de Ohm<\/h1>\r\n <p class=\"subtitle\">Circuito Mixto Serie-Paralelo con Instrumentos Virtuales<\/p>\r\n <div class=\"equation-badge\">V = I \u00b7 R<\/div>\r\n <\/header>\r\n\r\n <main class=\"main-container\">\r\n <div class=\"circuit-column\">\r\n <section class=\"circuit-section animate-in delay-1\">\r\n <div class=\"circuit-header\">\r\n <div class=\"circuit-header-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\r\n <path d=\"M12 6v6l4 2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h2>Diagrama del Circuito<\/h2>\r\n <\/div>\r\n <div class=\"circuit-canvas-container\">\r\n <canvas id=\"circuitCanvas\" width=\"700\" height=\"500\"><\/canvas>\r\n <\/div>\r\n <div class=\"legend\">\r\n <div class=\"legend-item\">\r\n <span class=\"legend-dot voltage\"><\/span>\r\n <span>Voltimetros<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <span class=\"legend-dot current\"><\/span>\r\n <span>Amperimetros<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <span class=\"legend-dot resistance\"><\/span>\r\n <span>Resistencias<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <span class=\"legend-dot flow\"><\/span>\r\n <span>Flujo de corriente<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"instruments-panel animate-in delay-2\">\r\n <div class=\"instrument-group\">\r\n <div class=\"instrument-group-header volts\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/>\r\n <\/svg>\r\n Voltimetros (V)\r\n <\/div>\r\n <div class=\"instrument-grid\">\r\n <div class=\"instrument-card\">\r\n <div class=\"instrument-label\">V1 (R1)<\/div>\r\n <div class=\"instrument-value volt\" id=\"v1Display\">0.00<span class=\"instrument-unit\">V<\/span><\/div>\r\n <\/div>\r\n <div class=\"instrument-card\">\r\n <div class=\"instrument-label\">V2 (R2)<\/div>\r\n <div class=\"instrument-value volt\" id=\"v2Display\">0.00<span class=\"instrument-unit\">V<\/span><\/div>\r\n <\/div>\r\n <div class=\"instrument-card\">\r\n <div class=\"instrument-label\">V3 (R3)<\/div>\r\n <div class=\"instrument-value volt\" id=\"v3Display\">0.00<span class=\"instrument-unit\">V<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"instrument-group\">\r\n <div class=\"instrument-group-header amps\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\r\n <path d=\"M12 6v6l4 2\"\/>\r\n <\/svg>\r\n Amperimetros (A)\r\n <\/div>\r\n <div class=\"instrument-grid\">\r\n <div class=\"instrument-card\">\r\n <div class=\"instrument-label\">I total<\/div>\r\n <div class=\"instrument-value amp\" id=\"iTotalDisplay\">0.00<span class=\"instrument-unit\">A<\/span><\/div>\r\n <\/div>\r\n <div class=\"instrument-card\">\r\n <div class=\"instrument-label\">I2 (R2)<\/div>\r\n <div class=\"instrument-value amp\" id=\"i2Display\">0.00<span class=\"instrument-unit\">A<\/span><\/div>\r\n <\/div>\r\n <div class=\"instrument-card\">\r\n <div class=\"instrument-label\">I3 (R3)<\/div>\r\n <div class=\"instrument-value amp\" id=\"i3Display\">0.00<span class=\"instrument-unit\">A<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"instrument-group\">\r\n <div class=\"instrument-group-header results\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\r\n <path d=\"M9 9h6M9 12h6M9 15h4\"\/>\r\n <\/svg>\r\n Calculos del Circuito\r\n <\/div>\r\n <div class=\"instrument-grid\">\r\n <div class=\"instrument-card\">\r\n <div class=\"instrument-label\">R paralelo<\/div>\r\n <div class=\"instrument-value result\" id=\"rParallelDisplay\">0.00<span class=\"instrument-unit\">\u03a9<\/span><\/div>\r\n <\/div>\r\n <div class=\"instrument-card\">\r\n <div class=\"instrument-label\">R total<\/div>\r\n <div class=\"instrument-value result\" id=\"rTotalDisplay\">0.00<span class=\"instrument-unit\">\u03a9<\/span><\/div>\r\n <\/div>\r\n <div class=\"instrument-card\">\r\n <div class=\"instrument-label\">V paralelo<\/div>\r\n <div class=\"instrument-value result\" id=\"vParallelDisplay\">0.00<span class=\"instrument-unit\">V<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <aside class=\"controls-section animate-in delay-3\">\r\n <div class=\"controls-header\">\r\n <div class=\"controls-header-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"\/>\r\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span>Panel de Control<\/span>\r\n <\/div>\r\n\r\n <div class=\"controls-list\">\r\n <div class=\"control-item\">\r\n <div class=\"control-label\">\r\n <span>Tension de Bateria (V)<\/span>\r\n <span class=\"control-value voltage\" id=\"voltageValue\">12 V<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"voltageSlider\" class=\"voltage-slider\" min=\"1\" max=\"50\" value=\"12\" step=\"0.5\">\r\n <\/div>\r\n\r\n <div class=\"control-item\">\r\n <div class=\"control-label\">\r\n <span>Resistencia R1 (\u03a9)<\/span>\r\n <span class=\"control-value resistance\" id=\"r1Value\">10 \u03a9<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"r1Slider\" min=\"1\" max=\"100\" value=\"10\" step=\"1\">\r\n <\/div>\r\n\r\n <div class=\"control-item\">\r\n <div class=\"control-label\">\r\n <span>Resistencia R2 (\u03a9)<\/span>\r\n <span class=\"control-value resistance\" id=\"r2Value\">20 \u03a9<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"r2Slider\" min=\"1\" max=\"100\" value=\"20\" step=\"1\">\r\n <\/div>\r\n\r\n <div class=\"control-item\">\r\n <div class=\"control-label\">\r\n <span>Resistencia R3 (\u03a9)<\/span>\r\n <span class=\"control-value resistance\" id=\"r3Value\">20 \u03a9<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"r3Slider\" min=\"1\" max=\"100\" value=\"20\" step=\"1\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"action-buttons\">\r\n <button class=\"btn btn-secondary\" id=\"resetBtn\" aria-label=\"Restablecer valores\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"\/>\r\n <path d=\"M3 3v5h5\"\/>\r\n <\/svg>\r\n Restablecer\r\n <\/button>\r\n <button class=\"btn btn-primary\" id=\"exampleBtn\" aria-label=\"Cargar ejemplo t\u00edpico\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <polygon points=\"5 3 19 12 5 21 5 3\"\/>\r\n <\/svg>\r\n Ejemplo Tipico\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"formula-panel\">\r\n <div class=\"formula-title\">Formulas Aplicadas<\/div>\r\n <div class=\"formula-grid\">\r\n <div class=\"formula-item\">R_paralelo = (R2 \u00b7 R3) \/ (R2 + R3)<\/div>\r\n <div class=\"formula-item\">R_total = R1 + R_paralelo<\/div>\r\n <div class=\"formula-item\">I_total = V \/ R_total<\/div>\r\n <div class=\"formula-item\">V1 = I_total \u00b7 R1<\/div>\r\n <div class=\"formula-item\">V_paralelo = V - V1<\/div>\r\n <div class=\"formula-item\">I2 = V_paralelo \/ R2<\/div>\r\n <div class=\"formula-item\">I3 = V_paralelo \/ R3<\/div>\r\n <\/div>\r\n \r\n <br>\r\n \r\n<div class=\"footer-logo-container\">\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=\"Fluxar Logo\" class=\"footer-logo\"><\/a>\r\n <div class=\"footer-divider\"><\/div>\r\n <div class=\"footer-text\">\r\n <strong>FICA UNSL<\/strong><br>\r\n <span>Simulaciones Interactivas<\/span>\r\n <\/div>\r\n<\/div>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n <\/div>\r\n <\/aside>\r\n <\/main>\r\n\r\n <script>\r\n \/\/ ============================================\r\n \/\/ CONFIGURACI\u00d3N Y ESTADO GLOBAL\r\n \/\/ ============================================\r\n \r\n const circuitState = {\r\n voltage: 12,\r\n r1: 10,\r\n r2: 20,\r\n r3: 20,\r\n rParallel: 0,\r\n rTotal: 0,\r\n iTotal: 0,\r\n v1: 0,\r\n vParallel: 0,\r\n i2: 0,\r\n i3: 0\r\n };\r\n\r\n let currentParticles = [];\r\n let animationTime = 0;\r\n let animationRunning = true;\r\n\r\n const canvas = document.getElementById('circuitCanvas');\r\n const ctx = canvas.getContext('2d');\r\n\r\n \/\/ ============================================\r\n \/\/ COLORES DEL DIAGRAMA\r\n \/\/ ============================================\r\n const COLORS = {\r\n wire: '#1a1a1a',\r\n resistor: '#7c3aed',\r\n battery: '#ea580c',\r\n voltmeter: '#2563eb',\r\n ammeter: '#dc2626',\r\n particle: '#f59e0b',\r\n node: '#16a34a',\r\n background: '#fafaf8',\r\n text: '#1a1a1a',\r\n textMuted: '#6b6b6b'\r\n };\r\n\r\n \/\/ ============================================\r\n \/\/ COORDENADAS DEL CIRCUITO\r\n \/\/ ============================================\r\n const LAYOUT = {\r\n battery: { x: 80, y: 250, width: 40, height: 80 },\r\n r1: { x: 250, y: 100, width: 100, height: 40 },\r\n nodeTop: { x: 400, y: 100 },\r\n nodeBottom: { x: 400, y: 400 },\r\n \/\/ Ajuste de posici\u00f3n R2 para evitar superposiciones\r\n r2: { x: 530, y: 100, width: 100, height: 40 }, \r\n r3: { x: 500, y: 340, width: 100, height: 40 },\r\n v1Point: { x: 250, y: 140 },\r\n v2Point: { x: 500, y: 200 },\r\n v3Point: { x: 500, y: 380 },\r\n aTotal: { x: 160, y: 170 },\r\n a2: { x: 450, y: 130 },\r\n a3: { x: 450, y: 370 }\r\n };\r\n\r\n \/\/ ============================================\r\n \/\/ ELEMENTOS DEL DOM\r\n \/\/ ============================================\r\n const elements = {\r\n voltageSlider: document.getElementById('voltageSlider'),\r\n r1Slider: document.getElementById('r1Slider'),\r\n r2Slider: document.getElementById('r2Slider'),\r\n r3Slider: document.getElementById('r3Slider'),\r\n voltageValue: document.getElementById('voltageValue'),\r\n r1Value: document.getElementById('r1Value'),\r\n r2Value: document.getElementById('r2Value'),\r\n r3Value: document.getElementById('r3Value'),\r\n v1Display: document.getElementById('v1Display'),\r\n v2Display: document.getElementById('v2Display'),\r\n v3Display: document.getElementById('v3Display'),\r\n iTotalDisplay: document.getElementById('iTotalDisplay'),\r\n i2Display: document.getElementById('i2Display'),\r\n i3Display: document.getElementById('i3Display'),\r\n rParallelDisplay: document.getElementById('rParallelDisplay'),\r\n rTotalDisplay: document.getElementById('rTotalDisplay'),\r\n vParallelDisplay: document.getElementById('vParallelDisplay'),\r\n resetBtn: document.getElementById('resetBtn'),\r\n exampleBtn: document.getElementById('exampleBtn')\r\n };\r\n\r\n \/\/ ============================================\r\n \/\/ FUNCIONES DE C\u00c1LCULO EL\u00c9CTRICO\r\n \/\/ ============================================\r\n \r\n function calculateCircuit() {\r\n const V = circuitState.voltage;\r\n const R1 = circuitState.r1;\r\n const R2 = circuitState.r2;\r\n const R3 = circuitState.r3;\r\n \r\n circuitState.rParallel = (R2 * R3) \/ (R2 + R3);\r\n circuitState.rTotal = R1 + circuitState.rParallel;\r\n circuitState.iTotal = V \/ circuitState.rTotal;\r\n circuitState.v1 = circuitState.iTotal * R1;\r\n circuitState.vParallel = V - circuitState.v1;\r\n circuitState.i2 = circuitState.vParallel \/ R2;\r\n circuitState.i3 = circuitState.vParallel \/ R3;\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ FUNCIONES DE ACTUALIZACI\u00d3N DE UI\r\n \/\/ ============================================\r\n \r\n function updateDisplays() {\r\n elements.voltageValue.textContent = `${circuitState.voltage.toFixed(1)} V`;\r\n elements.r1Value.textContent = `${circuitState.r1} \u03a9`;\r\n elements.r2Value.textContent = `${circuitState.r2} \u03a9`;\r\n elements.r3Value.textContent = `${circuitState.r3} \u03a9`;\r\n \r\n elements.v1Display.innerHTML = `${circuitState.v1.toFixed(2)}<span class=\"instrument-unit\">V<\/span>`;\r\n elements.v2Display.innerHTML = `${circuitState.vParallel.toFixed(2)}<span class=\"instrument-unit\">V<\/span>`;\r\n elements.v3Display.innerHTML = `${circuitState.vParallel.toFixed(2)}<span class=\"instrument-unit\">V<\/span>`;\r\n \r\n elements.iTotalDisplay.innerHTML = `${circuitState.iTotal.toFixed(3)}<span class=\"instrument-unit\">A<\/span>`;\r\n elements.i2Display.innerHTML = `${circuitState.i2.toFixed(3)}<span class=\"instrument-unit\">A<\/span>`;\r\n elements.i3Display.innerHTML = `${circuitState.i3.toFixed(3)}<span class=\"instrument-unit\">A<\/span>`;\r\n \r\n elements.rParallelDisplay.innerHTML = `${circuitState.rParallel.toFixed(2)}<span class=\"instrument-unit\">\u03a9<\/span>`;\r\n elements.rTotalDisplay.innerHTML = `${circuitState.rTotal.toFixed(2)}<span class=\"instrument-unit\">\u03a9<\/span>`;\r\n elements.vParallelDisplay.innerHTML = `${circuitState.vParallel.toFixed(2)}<span class=\"instrument-unit\">V<\/span>`;\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ FUNCIONES DE DIBUJO DEL CIRCUITO\r\n \/\/ ============================================\r\n \r\n function clearCanvas() {\r\n ctx.fillStyle = COLORS.background;\r\n ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n \r\n ctx.strokeStyle = 'rgba(0,0,0,0.03)';\r\n ctx.lineWidth = 1;\r\n for (let x = 0; x < canvas.width; x += 20) {\r\n ctx.beginPath();\r\n ctx.moveTo(x, 0);\r\n ctx.lineTo(x, canvas.height);\r\n ctx.stroke();\r\n }\r\n for (let y = 0; y < canvas.height; y += 20) {\r\n ctx.beginPath();\r\n ctx.moveTo(0, y);\r\n ctx.lineTo(canvas.width, y);\r\n ctx.stroke();\r\n }\r\n }\r\n\r\n function drawResistor(x, y, width, label, value) {\r\n const zigzags = 6;\r\n const amplitude = 12;\r\n const segmentWidth = width \/ zigzags;\r\n \r\n ctx.beginPath();\r\n ctx.strokeStyle = COLORS.resistor;\r\n ctx.lineWidth = 2.5;\r\n ctx.lineCap = 'round';\r\n ctx.lineJoin = 'round';\r\n \r\n ctx.moveTo(x, y);\r\n ctx.lineTo(x + 10, y);\r\n \r\n let currentX = x + 10;\r\n for (let i = 0; i < zigzags; i++) {\r\n const direction = (i % 2 === 0) ? -1 : 1;\r\n ctx.lineTo(currentX + segmentWidth \/ 2, y + direction * amplitude);\r\n ctx.lineTo(currentX + segmentWidth, y);\r\n currentX += segmentWidth;\r\n }\r\n \r\n ctx.lineTo(x + width + 10, y);\r\n ctx.stroke();\r\n \r\n ctx.fillStyle = COLORS.text;\r\n ctx.font = 'bold 14px \"Space Grotesk\", sans-serif';\r\n ctx.textAlign = 'center';\r\n ctx.fillText(label, x + width \/ 2, y - 25);\r\n \r\n ctx.fillStyle = COLORS.resistor;\r\n ctx.font = '13px \"JetBrains Mono\", monospace';\r\n ctx.fillText(`${value} \u03a9`, x + width \/ 2, y + 30);\r\n }\r\n\r\n function drawBattery(x, y) {\r\n ctx.strokeStyle = COLORS.battery;\r\n ctx.lineWidth = 2.5;\r\n ctx.lineCap = 'round';\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(x, y - 40);\r\n ctx.lineTo(x, y - 15);\r\n ctx.stroke();\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(x, y + 15);\r\n ctx.lineTo(x, y + 40);\r\n ctx.stroke();\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(x - 20, y - 15);\r\n ctx.lineTo(x + 20, y - 15);\r\n ctx.stroke();\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(x - 10, y + 15);\r\n ctx.lineTo(x + 10, y + 15);\r\n ctx.stroke();\r\n \r\n ctx.fillStyle = COLORS.battery;\r\n ctx.font = 'bold 16px \"Space Grotesk\", sans-serif';\r\n ctx.textAlign = 'left';\r\n ctx.fillText('+', x + 25, y - 10);\r\n ctx.fillText('\u2212', x + 25, y + 20);\r\n \r\n ctx.fillStyle = COLORS.text;\r\n ctx.font = 'bold 14px \"Space Grotesk\", sans-serif';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('Bater\u00eda', x, y - 55);\r\n \r\n ctx.fillStyle = COLORS.battery;\r\n ctx.font = '13px \"JetBrains Mono\", monospace';\r\n ctx.fillText(`${circuitState.voltage.toFixed(1)} V`, x, y + 60);\r\n }\r\n\r\n function drawNode(x, y, label) {\r\n ctx.beginPath();\r\n ctx.arc(x, y, 6, 0, Math.PI * 2);\r\n ctx.fillStyle = COLORS.node;\r\n ctx.fill();\r\n \r\n ctx.strokeStyle = '#0f7a35';\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n \r\n if (label) {\r\n ctx.fillStyle = COLORS.node;\r\n ctx.font = '11px \"Space Grotesk\", sans-serif';\r\n ctx.textAlign = 'center';\r\n ctx.fillText(label, x, y - 15);\r\n }\r\n }\r\n\r\n function drawWire(x1, y1, x2, y2) {\r\n ctx.beginPath();\r\n ctx.moveTo(x1, y1);\r\n ctx.lineTo(x2, y2);\r\n ctx.strokeStyle = COLORS.wire;\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n }\r\n\r\n function drawVoltmeter(x, y, label) {\r\n const radius = 22;\r\n \r\n ctx.beginPath();\r\n ctx.arc(x, y, radius, 0, Math.PI * 2);\r\n ctx.fillStyle = 'white';\r\n ctx.fill();\r\n ctx.strokeStyle = COLORS.voltmeter;\r\n ctx.lineWidth = 2.5;\r\n ctx.stroke();\r\n \r\n ctx.fillStyle = COLORS.voltmeter;\r\n ctx.font = 'bold 16px \"Space Grotesk\", sans-serif';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText('V', x, y);\r\n \r\n ctx.fillStyle = COLORS.voltmeter;\r\n ctx.font = '11px \"Space Grotesk\", sans-serif';\r\n ctx.textBaseline = 'alphabetic';\r\n ctx.fillText(label, x, y - radius - 5);\r\n }\r\n\r\n function drawAmmeter(x, y, label) {\r\n const radius = 22;\r\n \r\n ctx.beginPath();\r\n ctx.arc(x, y, radius, 0, Math.PI * 2);\r\n ctx.fillStyle = 'white';\r\n ctx.fill();\r\n ctx.strokeStyle = COLORS.ammeter;\r\n ctx.lineWidth = 2.5;\r\n ctx.stroke();\r\n \r\n ctx.fillStyle = COLORS.ammeter;\r\n ctx.font = 'bold 16px \"Space Grotesk\", sans-serif';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText('A', x, y);\r\n \r\n ctx.fillStyle = COLORS.ammeter;\r\n ctx.font = '11px \"Space Grotesk\", sans-serif';\r\n ctx.textBaseline = 'alphabetic';\r\n ctx.fillText(label, x, y - radius - 5);\r\n }\r\n\r\n \/**\r\n * Dibuja el circuito completo.\r\n * CORRECCI\u00d3N: Rama R2 conectada correctamente por debajo del bus principal.\r\n *\/\r\n function drawCircuit() {\r\n clearCanvas();\r\n \r\n \/\/ ============================================\r\n \/\/ CABLES DEL CIRCUITO\r\n \/\/ ============================================\r\n \r\n \/\/ 1. Bater\u00eda a R1 (Bus principal)\r\n drawWire(80, 170, 80, 100);\r\n drawWire(80, 100, 250, 100);\r\n \r\n \/\/ 2. R1 a Nodo A\r\n drawWire(360, 100, 400, 100);\r\n \r\n \/\/ 3. Nodo A a Nodo B (Bus vertical)\r\n drawWire(400, 100, 400, 250);\r\n \r\n \/\/ 4. RAMA 2 (Corregida: conexi\u00f3n por debajo)\r\n \/\/ Del bus principal bajamos\r\n drawWire(400, 100, 400, 130); \r\n \/\/ Curva hacia la derecha pasando por A2\r\n drawWire(400, 130, 428, 130); \/\/ A2 est\u00e1 en x=450\r\n drawAmmeter(450, 130, 'I2');\r\n drawWire(472, 130, 530, 130); \/\/ Salimos de A2 hacia R2\r\n \r\n \/\/ Subimos hacia R2 (Entrada inferior de R2)\r\n \/\/ R2 est\u00e1 en y=100. Dibujamos el cable vertical de conexi\u00f3n\r\n drawWire(530, 130, 530, 100); \/\/ Conecta con la entrada de R2\r\n \r\n \/\/ Dibujamos R2 (En el bus superior visualmente, pero conectada desde abajo)\r\n drawResistor(530, 100, 100, 'R2', circuitState.r2);\r\n \r\n \/\/ Salida de R2 hacia retorno\r\n drawWire(640, 100, 650, 100); \/\/ Salida R2\r\n drawWire(650, 100, 650, 250); \/\/ Bajamos al bus de retorno\r\n \r\n \/\/ 5. RAMA 3\r\n drawWire(400, 250, 400, 360);\r\n \/\/ Amper\u00edmetro A3\r\n drawAmmeter(400, 305, 'I3');\r\n \r\n drawWire(400, 360, 500, 360); \/\/ Entrada R3\r\n \r\n \/\/ Dibujamos R3\r\n drawResistor(500, 360, 100, 'R3', circuitState.r3);\r\n \r\n drawWire(610, 360, 650, 360); \/\/ Salida R3\r\n drawWire(650, 360, 650, 400); \/\/ Conexi\u00f3n al retorno\r\n\r\n \/\/ 6. RETORNO\r\n drawWire(650, 250, 650, 400); \/\/ Unimos retorno R2 con R3\r\n drawWire(650, 400, 80, 400);\r\n drawWire(80, 400, 80, 330);\r\n \r\n \/\/ ============================================\r\n \/\/ COMPONENTES RESTANTES\r\n \/\/ ============================================\r\n \r\n \/\/ Bater\u00eda\r\n drawBattery(80, 250);\r\n \r\n \/\/ R1 (Ya dibujada con cables)\r\n drawResistor(250, 100, 100, 'R1', circuitState.r1);\r\n \r\n \/\/ Nodos\r\n drawNode(400, 100, 'Nodo A');\r\n drawNode(400, 250, 'Nodo B');\r\n drawNode(650, 250, ''); \/\/ Nodo retorno R2\r\n drawNode(650, 400, ''); \/\/ Nodo retorno final\r\n \r\n \/\/ ============================================\r\n \/\/ INSTRUMENTOS DE MEDICI\u00d3N\r\n \/\/ ============================================\r\n \r\n \/\/ Volt\u00edmetro V1\r\n drawVoltmeter(305, 180, 'V1');\r\n drawWire(270, 140, 270, 158);\r\n drawWire(340, 140, 340, 158);\r\n \r\n \/\/ Volt\u00edmetro V2 (Conexi\u00f3n ajustada a R2)\r\n \/\/ R2 est\u00e1 en y=100, dibujamos V2 debajo\r\n drawVoltmeter(580, 190, 'V2');\r\n drawWire(550, 130, 550, 168); \/\/ Desde el cable inferior\r\n drawWire(610, 130, 610, 168); \/\/ Desde el otro lado (cable inferior imaginario o desde R2)\r\n \/\/ Correcci\u00f3n visual: conectamos a los pies de R2\r\n drawWire(550, 100, 550, 168); \/\/ Patita izquierda R2\r\n drawWire(610, 100, 610, 168); \/\/ Patita derecha R2\r\n\r\n \/\/ Volt\u00edmetro V3\r\n drawVoltmeter(555, 440, 'V3');\r\n drawWire(520, 400, 520, 418);\r\n drawWire(590, 400, 590, 418);\r\n \r\n \/\/ Amper\u00edmetro A_total\r\n drawAmmeter(80, 135, 'I total'); \/\/ En el cable de bater\u00eda\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ ANIMACI\u00d3N DE PART\u00cdCULAS DE CORRIENTE\r\n \/\/ ============================================\r\n \r\n const currentPaths = {\r\n main: [\r\n { x: 80, y: 400 },\r\n { x: 80, y: 330 },\r\n { x: 80, y: 170 },\r\n { x: 80, y: 100 },\r\n { x: 175, y: 100 },\r\n { x: 250, y: 100 },\r\n { x: 360, y: 100 },\r\n { x: 400, y: 100 },\r\n ],\r\n \/\/ Rama 2: Pasa por debajo hacia R2\r\n branch2: [\r\n { x: 400, y: 100 }, \/\/ Nodo A\r\n { x: 400, y: 130 }, \/\/ Baja\r\n { x: 450, y: 130 }, \/\/ Pasa por A2\r\n { x: 530, y: 130 }, \/\/ Va hacia R2\r\n { x: 530, y: 100 }, \/\/ Sube a R2\r\n { x: 640, y: 100 }, \/\/ Sale de R2\r\n { x: 650, y: 100 }, \r\n { x: 650, y: 250 }, \/\/ Baja al retorno\r\n ],\r\n branch3: [\r\n { x: 400, y: 100 },\r\n { x: 400, y: 250 }, \/\/ Nodo B\r\n { x: 400, y: 305 }, \/\/ A3\r\n { x: 400, y: 360 }, \/\/ Entrada R3\r\n { x: 500, y: 360 },\r\n { x: 610, y: 360 }, \/\/ Salida R3\r\n { x: 650, y: 360 },\r\n { x: 650, y: 400 },\r\n ],\r\n return: [\r\n { x: 650, y: 250 },\r\n { x: 650, y: 400 },\r\n { x: 80, y: 400 },\r\n ]\r\n };\r\n\r\n function initParticles() {\r\n currentParticles = [];\r\n \r\n const maxCurrent = circuitState.voltage \/ 1;\r\n const speedMultiplier = Math.min(circuitState.iTotal \/ maxCurrent, 1) * 3 + 0.5;\r\n \r\n for (let i = 0; i < 8; i++) {\r\n currentParticles.push({\r\n path: 'main',\r\n progress: i \/ 8,\r\n speed: speedMultiplier * (0.8 + Math.random() * 0.4),\r\n size: 4 + Math.random() * 2\r\n });\r\n }\r\n \r\n const i2Ratio = circuitState.i2 \/ circuitState.iTotal;\r\n const particlesBranch2 = Math.max(2, Math.floor(6 * i2Ratio));\r\n for (let i = 0; i < particlesBranch2; i++) {\r\n currentParticles.push({\r\n path: 'branch2',\r\n progress: i \/ particlesBranch2,\r\n speed: speedMultiplier * i2Ratio * (0.8 + Math.random() * 0.4),\r\n size: 3 + Math.random() * 2\r\n });\r\n }\r\n \r\n const i3Ratio = circuitState.i3 \/ circuitState.iTotal;\r\n const particlesBranch3 = Math.max(2, Math.floor(6 * i3Ratio));\r\n for (let i = 0; i < particlesBranch3; i++) {\r\n currentParticles.push({\r\n path: 'branch3',\r\n progress: i \/ particlesBranch3,\r\n speed: speedMultiplier * i3Ratio * (0.8 + Math.random() * 0.4),\r\n size: 3 + Math.random() * 2\r\n });\r\n }\r\n \r\n for (let i = 0; i < 6; i++) {\r\n currentParticles.push({\r\n path: 'return',\r\n progress: i \/ 6,\r\n speed: speedMultiplier * (0.8 + Math.random() * 0.4),\r\n size: 4 + Math.random() * 2\r\n });\r\n }\r\n }\r\n\r\n function getPositionOnPath(pathName, progress) {\r\n const path = currentPaths[pathName];\r\n if (!path || path.length < 2) return { x: 0, y: 0 };\r\n \r\n let totalLength = 0;\r\n for (let i = 1; i < path.length; i++) {\r\n const dx = path[i].x - path[i-1].x;\r\n const dy = path[i].y - path[i-1].y;\r\n totalLength += Math.sqrt(dx * dx + dy * dy);\r\n }\r\n \r\n let targetDistance = progress * totalLength;\r\n let currentDistance = 0;\r\n \r\n for (let i = 1; i < path.length; i++) {\r\n const dx = path[i].x - path[i-1].x;\r\n const dy = path[i].y - path[i-1].y;\r\n const segmentLength = Math.sqrt(dx * dx + dy * dy);\r\n \r\n if (currentDistance + segmentLength >= targetDistance) {\r\n const segmentProgress = (targetDistance - currentDistance) \/ segmentLength;\r\n return {\r\n x: path[i-1].x + dx * segmentProgress,\r\n y: path[i-1].y + dy * segmentProgress\r\n };\r\n }\r\n \r\n currentDistance += segmentLength;\r\n }\r\n \r\n return { x: path[path.length-1].x, y: path[path.length-1].y };\r\n }\r\n\r\n function drawCurrentParticles() {\r\n currentParticles.forEach(particle => {\r\n const pos = getPositionOnPath(particle.path, particle.progress);\r\n \r\n const gradient = ctx.createRadialGradient(\r\n pos.x, pos.y, 0,\r\n pos.x, pos.y, particle.size\r\n );\r\n gradient.addColorStop(0, 'rgba(251, 191, 36, 1)');\r\n gradient.addColorStop(0.5, 'rgba(245, 158, 11, 0.8)');\r\n gradient.addColorStop(1, 'rgba(245, 158, 11, 0)');\r\n \r\n ctx.beginPath();\r\n ctx.arc(pos.x, pos.y, particle.size, 0, Math.PI * 2);\r\n ctx.fillStyle = gradient;\r\n ctx.fill();\r\n \r\n ctx.beginPath();\r\n ctx.arc(pos.x, pos.y, particle.size * 0.4, 0, Math.PI * 2);\r\n ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';\r\n ctx.fill();\r\n });\r\n }\r\n\r\n function updateParticles() {\r\n currentParticles.forEach(particle => {\r\n particle.progress += particle.speed * 0.002;\r\n if (particle.progress >= 1) {\r\n particle.progress = 0;\r\n }\r\n });\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ LOOP DE ANIMACI\u00d3N PRINCIPAL\r\n \/\/ ============================================\r\n \r\n function animate() {\r\n if (!animationRunning) return;\r\n \r\n const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n \r\n drawCircuit();\r\n \r\n if (!prefersReducedMotion) {\r\n updateParticles();\r\n drawCurrentParticles();\r\n }\r\n \r\n requestAnimationFrame(animate);\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ MANEJADORES DE EVENTOS\r\n \/\/ ============================================\r\n \r\n function setupEventListeners() {\r\n elements.voltageSlider.addEventListener('input', (e) => {\r\n circuitState.voltage = parseFloat(e.target.value);\r\n updateCircuit();\r\n });\r\n \r\n elements.r1Slider.addEventListener('input', (e) => {\r\n circuitState.r1 = parseInt(e.target.value);\r\n updateCircuit();\r\n });\r\n \r\n elements.r2Slider.addEventListener('input', (e) => {\r\n circuitState.r2 = parseInt(e.target.value);\r\n updateCircuit();\r\n });\r\n \r\n elements.r3Slider.addEventListener('input', (e) => {\r\n circuitState.r3 = parseInt(e.target.value);\r\n updateCircuit();\r\n });\r\n \r\n elements.resetBtn.addEventListener('click', () => {\r\n circuitState.voltage = 12;\r\n circuitState.r1 = 10;\r\n circuitState.r2 = 20;\r\n circuitState.r3 = 20;\r\n \r\n elements.voltageSlider.value = 12;\r\n elements.r1Slider.value = 10;\r\n elements.r2Slider.value = 20;\r\n elements.r3Slider.value = 20;\r\n \r\n updateCircuit();\r\n \r\n elements.resetBtn.style.transform = 'scale(0.95)';\r\n setTimeout(() => {\r\n elements.resetBtn.style.transform = '';\r\n }, 150);\r\n });\r\n \r\n elements.exampleBtn.addEventListener('click', () => {\r\n circuitState.voltage = 12;\r\n circuitState.r1 = 10;\r\n circuitState.r2 = 20;\r\n circuitState.r3 = 20;\r\n \r\n elements.voltageSlider.value = 12;\r\n elements.r1Slider.value = 10;\r\n elements.r2Slider.value = 20;\r\n elements.r3Slider.value = 20;\r\n \r\n updateCircuit();\r\n \r\n elements.exampleBtn.style.transform = 'scale(0.95)';\r\n setTimeout(() => {\r\n elements.exampleBtn.style.transform = '';\r\n }, 150);\r\n });\r\n \r\n window.addEventListener('resize', handleResize);\r\n }\r\n\r\n function updateCircuit() {\r\n calculateCircuit();\r\n updateDisplays();\r\n initParticles();\r\n }\r\n\r\n function handleResize() {\r\n const container = canvas.parentElement;\r\n const containerWidth = container.clientWidth - 32;\r\n \r\n if (containerWidth < 700) {\r\n canvas.style.width = containerWidth + 'px';\r\n canvas.style.height = (containerWidth * 500 \/ 700) + 'px';\r\n } else {\r\n canvas.style.width = '';\r\n canvas.style.height = '';\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ INICIALIZACI\u00d3N\r\n \/\/ ============================================\r\n \r\n function init() {\r\n calculateCircuit();\r\n updateDisplays();\r\n initParticles();\r\n setupEventListeners();\r\n handleResize();\r\n animate();\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', init);\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>Simulaci\u00f3n Ley de Ohm – Circuito Mixto Simulacion Interactiva: Ley de Ohm Circuito Mixto Serie-Paralelo con Instrumentos Virtuales V = I \u00b7 R Diagrama del…<\/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-6080","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>ley_de_ohm_laboratorio - 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_ohm_laboratorio\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ley_de_ohm_laboratorio - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"Simulaci\u00f3n Ley de Ohm – Circuito Mixto Simulacion Interactiva: Ley de Ohm Circuito Mixto Serie-Paralelo con Instrumentos Virtuales V = I \u00b7 R Diagrama del…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_laboratorio\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-19T17:53:32+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\/ley_de_ohm_laboratorio\/\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_laboratorio\/\",\"name\":\"ley_de_ohm_laboratorio - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#website\"},\"datePublished\":\"2026-03-11T13:56:44+00:00\",\"dateModified\":\"2026-03-19T17:53:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_laboratorio\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_laboratorio\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_laboratorio\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/fisica2.fica.unsl.edu.ar\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ley_de_ohm_laboratorio\"}]},{\"@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":"ley_de_ohm_laboratorio - 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_ohm_laboratorio\/","og_locale":"es_ES","og_type":"article","og_title":"ley_de_ohm_laboratorio - F\u00edsica 2","og_description":"Simulaci\u00f3n Ley de Ohm – Circuito Mixto Simulacion Interactiva: Ley de Ohm Circuito Mixto Serie-Paralelo con Instrumentos Virtuales V = I \u00b7 R Diagrama del…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_laboratorio\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-03-19T17:53:32+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\/ley_de_ohm_laboratorio\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_laboratorio\/","name":"ley_de_ohm_laboratorio - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-03-11T13:56:44+00:00","dateModified":"2026-03-19T17:53:32+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_laboratorio\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_laboratorio\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_laboratorio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"ley_de_ohm_laboratorio"}]},{"@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\/6080","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=6080"}],"version-history":[{"count":19,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6080\/revisions"}],"predecessor-version":[{"id":6697,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6080\/revisions\/6697"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=6080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}