{"id":6099,"date":"2026-03-12T11:44:26","date_gmt":"2026-03-12T14:44:26","guid":{"rendered":"https:\/\/fisica2.fica.unsl.edu.ar\/?page_id=6099"},"modified":"2026-03-19T14:51:43","modified_gmt":"2026-03-19T17:51:43","slug":"ley_de_ohm_experiencia_res_lamp","status":"publish","type":"page","link":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_experiencia_res_lamp\/","title":{"rendered":"ley_de_ohm_experiencia_Res_Lamp"},"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 - Laboratorio Virtual<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=JetBrains+Mono:wght@400;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --bg-primary: #0a0e14;\r\n --bg-secondary: #111820;\r\n --bg-card: #151c25;\r\n --accent-cyan: #00d4aa;\r\n --accent-orange: #ff6b35;\r\n --accent-yellow: #ffd93d;\r\n --accent-blue: #4dabf7;\r\n --text-primary: #e8eaed;\r\n --text-secondary: #8b95a5;\r\n --border-color: #2a3544;\r\n --glow-cyan: rgba(0, 212, 170, 0.3);\r\n --glow-orange: rgba(255, 107, 53, 0.4);\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 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 overflow-x: hidden;\r\n }\r\n\r\n .bg-pattern {\r\n position: fixed;\r\n inset: 0;\r\n background: \r\n radial-gradient(ellipse 80% 50% at 20% 20%, rgba(0, 212, 170, 0.08) 0%, transparent 50%),\r\n radial-gradient(ellipse 60% 40% at 80% 80%, rgba(255, 107, 53, 0.06) 0%, transparent 50%),\r\n linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);\r\n pointer-events: none;\r\n z-index: -1;\r\n }\r\n\r\n .grid-overlay {\r\n position: fixed;\r\n inset: 0;\r\n background-image: \r\n linear-gradient(rgba(42, 53, 68, 0.3) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(42, 53, 68, 0.3) 1px, transparent 1px);\r\n background-size: 40px 40px;\r\n pointer-events: none;\r\n z-index: -1;\r\n opacity: 0.4;\r\n }\r\n\r\n header {\r\n padding: 2rem;\r\n text-align: center;\r\n border-bottom: 1px solid var(--border-color);\r\n background: linear-gradient(180deg, rgba(21, 28, 37, 0.8) 0%, transparent 100%);\r\n }\r\n\r\n header h1 {\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: clamp(1.5rem, 4vw, 2.5rem);\r\n font-weight: 700;\r\n background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n margin-bottom: 0.5rem;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n header p {\r\n color: var(--text-secondary);\r\n font-size: 0.95rem;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n main {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 2rem;\r\n }\r\n\r\n .section {\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .section-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n margin-bottom: 1.5rem;\r\n padding-bottom: 1rem;\r\n border-bottom: 1px solid var(--border-color);\r\n }\r\n\r\n .section-badge {\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n padding: 0.35rem 0.75rem;\r\n border-radius: 4px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n\r\n .section-badge.ohmic {\r\n background: rgba(0, 212, 170, 0.15);\r\n color: var(--accent-cyan);\r\n border: 1px solid rgba(0, 212, 170, 0.3);\r\n }\r\n\r\n .section-badge.non-ohmic {\r\n background: rgba(255, 107, 53, 0.15);\r\n color: var(--accent-orange);\r\n border: 1px solid rgba(255, 107, 53, 0.3);\r\n }\r\n\r\n .section-title {\r\n font-size: 1.5rem;\r\n font-weight: 600;\r\n }\r\n\r\n .simulation-grid {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 1.5rem;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .simulation-grid {\r\n grid-template-columns: 1fr 380px;\r\n }\r\n }\r\n\r\n .circuit-panel {\r\n background: var(--bg-card);\r\n border-radius: 12px;\r\n border: 1px solid var(--border-color);\r\n padding: 1.5rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .circuit-panel::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));\r\n }\r\n\r\n .circuit-panel.lamp::before {\r\n background: linear-gradient(90deg, var(--accent-orange), var(--accent-yellow));\r\n }\r\n\r\n .circuit-canvas {\r\n width: 100%;\r\n height: 320px;\r\n background: linear-gradient(145deg, rgba(10, 14, 20, 0.9), rgba(17, 24, 32, 0.9));\r\n border-radius: 8px;\r\n border: 1px solid var(--border-color);\r\n }\r\n\r\n .controls-panel {\r\n background: var(--bg-card);\r\n border-radius: 12px;\r\n border: 1px solid var(--border-color);\r\n padding: 1.5rem;\r\n }\r\n\r\n .control-group {\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .control-group:last-child {\r\n margin-bottom: 0;\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: 0.75rem;\r\n }\r\n\r\n .control-label span:first-child {\r\n font-size: 0.85rem;\r\n color: var(--text-secondary);\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n\r\n .control-value {\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n color: var(--accent-cyan);\r\n }\r\n\r\n .lamp .control-value {\r\n color: var(--accent-orange);\r\n }\r\n\r\n input[type=\"range\"] {\r\n -webkit-appearance: none;\r\n width: 100%;\r\n height: 8px;\r\n background: var(--bg-secondary);\r\n border-radius: 4px;\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 width: 20px;\r\n height: 20px;\r\n background: var(--accent-cyan);\r\n border-radius: 50%;\r\n cursor: pointer;\r\n box-shadow: 0 0 10px var(--glow-cyan);\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n }\r\n\r\n input[type=\"range\"]::-webkit-slider-thumb:hover {\r\n transform: scale(1.15);\r\n box-shadow: 0 0 15px var(--glow-cyan);\r\n }\r\n\r\n .lamp input[type=\"range\"]::-webkit-slider-thumb {\r\n background: var(--accent-orange);\r\n box-shadow: 0 0 10px var(--glow-orange);\r\n }\r\n\r\n .lamp input[type=\"range\"]::-webkit-slider-thumb:hover {\r\n box-shadow: 0 0 15px var(--glow-orange);\r\n }\r\n\r\n input[type=\"range\"]::-moz-range-thumb {\r\n width: 20px;\r\n height: 20px;\r\n background: var(--accent-cyan);\r\n border-radius: 50%;\r\n cursor: pointer;\r\n border: none;\r\n box-shadow: 0 0 10px var(--glow-cyan);\r\n }\r\n\r\n .meters-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 1rem;\r\n margin-top: 1rem;\r\n }\r\n\r\n .meter {\r\n background: var(--bg-secondary);\r\n border-radius: 8px;\r\n padding: 1rem;\r\n text-align: center;\r\n border: 1px solid var(--border-color);\r\n }\r\n\r\n .meter-label {\r\n font-size: 0.7rem;\r\n color: var(--text-secondary);\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .meter-value {\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n }\r\n\r\n .meter-unit {\r\n font-size: 0.85rem;\r\n color: var(--text-secondary);\r\n margin-left: 0.25rem;\r\n }\r\n\r\n .meter.voltmeter .meter-value {\r\n color: var(--accent-yellow);\r\n }\r\n\r\n .meter.ammeter .meter-value {\r\n color: var(--accent-cyan);\r\n }\r\n\r\n .lamp .meter.ammeter .meter-value {\r\n color: var(--accent-orange);\r\n }\r\n\r\n .graph-section {\r\n background: var(--bg-card);\r\n border-radius: 12px;\r\n border: 1px solid var(--border-color);\r\n padding: 1.5rem;\r\n margin-top: 1.5rem;\r\n }\r\n\r\n .graph-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .graph-title {\r\n font-size: 1rem;\r\n font-weight: 600;\r\n }\r\n\r\n .graph-canvas {\r\n width: 100%;\r\n height: 200px;\r\n background: var(--bg-secondary);\r\n border-radius: 8px;\r\n border: 1px solid var(--border-color);\r\n }\r\n\r\n .btn {\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n padding: 0.6rem 1rem;\r\n border-radius: 6px;\r\n border: none;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n\r\n .btn-clear {\r\n background: transparent;\r\n color: var(--text-secondary);\r\n border: 1px solid var(--border-color);\r\n }\r\n\r\n .btn-clear:hover {\r\n background: var(--bg-secondary);\r\n color: var(--text-primary);\r\n border-color: var(--accent-cyan);\r\n }\r\n\r\n .btn-reset {\r\n background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));\r\n color: var(--bg-primary);\r\n width: 100%;\r\n margin-top: 1rem;\r\n padding: 0.8rem 1rem;\r\n }\r\n\r\n .btn-reset:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 20px var(--glow-cyan);\r\n }\r\n\r\n .btn-reset.lamp-reset {\r\n background: linear-gradient(135deg, var(--accent-orange), var(--accent-yellow));\r\n }\r\n\r\n .btn-reset.lamp-reset:hover {\r\n box-shadow: 0 4px 20px var(--glow-orange);\r\n }\r\n\r\n .info-box {\r\n background: linear-gradient(135deg, rgba(0, 212, 170, 0.1), rgba(77, 171, 247, 0.05));\r\n border-left: 3px solid var(--accent-cyan);\r\n padding: 1rem 1.25rem;\r\n border-radius: 0 8px 8px 0;\r\n margin-top: 1.5rem;\r\n }\r\n\r\n .info-box.lamp-info {\r\n background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 217, 61, 0.05));\r\n border-left-color: var(--accent-orange);\r\n }\r\n\r\n .info-box h4 {\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n margin-bottom: 0.5rem;\r\n color: var(--accent-cyan);\r\n }\r\n\r\n .info-box.lamp-info h4 {\r\n color: var(--accent-orange);\r\n }\r\n\r\n .info-box p {\r\n font-size: 0.85rem;\r\n color: var(--text-secondary);\r\n line-height: 1.6;\r\n }\r\n\r\n .info-box code {\r\n font-family: 'JetBrains Mono', monospace;\r\n background: rgba(255, 255, 255, 0.1);\r\n padding: 0.15rem 0.4rem;\r\n border-radius: 4px;\r\n font-size: 0.8rem;\r\n color: var(--accent-yellow);\r\n }\r\n\r\n .resistance-display {\r\n background: var(--bg-secondary);\r\n border-radius: 8px;\r\n padding: 1rem;\r\n text-align: center;\r\n border: 1px solid var(--border-color);\r\n margin-top: 1rem;\r\n }\r\n\r\n .resistance-display .label {\r\n font-size: 0.7rem;\r\n color: var(--text-secondary);\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n }\r\n\r\n .resistance-display .value {\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 1.25rem;\r\n font-weight: 700;\r\n color: var(--accent-yellow);\r\n margin-top: 0.25rem;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n main {\r\n padding: 1rem;\r\n }\r\n \r\n .circuit-canvas {\r\n height: 260px;\r\n }\r\n \r\n .meters-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n * {\r\n animation: none !important;\r\n transition: none !important;\r\n }\r\n }\r\n \r\n \r\n \r\n .header-logo {\r\n height: 18px !important; \/* Prueba con un valor bien peque\u00f1o para ver el cambio *\/\r\n width: auto !important; \/* Mantiene la proporci\u00f3n *\/\r\n max-height: 18px !important;\r\n display: block;\r\n}\r\n \r\n \r\n .header-logo-container {\r\n display: inline-flex; \/* Cambiado a inline-flex para que solo ocupe su contenido *\/\r\n flex-direction: row; \/* Fuerza la direcci\u00f3n horizontal *\/\r\n align-items: center; \/* Centra verticalmente logo y texto *\/\r\n background-color: #1a1a1b;\r\n padding: 5px 12px;\r\n border-radius: 4px;\r\n color: white;\r\n}\r\n\r\n.header-logo {\r\n \/* AJUSTA EL TAMA\u00d1O AQU\u00cd *\/\r\n height: 22px !important; \r\n width: auto !important;\r\n display: block;\r\n}\r\n\r\n.header-divider {\r\n width: 1px;\r\n height: 25px;\r\n background-color: #555;\r\n margin: 0 10px; \/* Espacio a los lados de la l\u00ednea *\/\r\n}\r\n\r\n.header-logo-text {\r\n display: flex;\r\n flex-direction: column; \/* El texto interno s\u00ed va uno sobre otro *\/\r\n justify-content: center;\r\n white-space: nowrap; \/* Evita que el texto salte de l\u00ednea *\/\r\n}\r\n\r\n.title-top {\r\n font-size: 13px;\r\n font-weight: bold;\r\n line-height: 1;\r\n display: block;\r\n}\r\n\r\n.subtitle-bottom {\r\n font-size: 9px;\r\n color: #aaa;\r\n line-height: 1.2;\r\n display: block;\r\n}\r\n \r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"bg-pattern\"><\/div>\r\n <div class=\"grid-overlay\"><\/div>\r\n \r\n <header>\r\n <h1>Ley de Ohm - Laboratorio Virtual<\/h1>\r\n <p>Explora la relacion entre voltaje, corriente y resistencia en conductores ohmicos y no ohmicos<\/p>\r\n <\/header>\r\n\r\n <main>\r\n <!-- PARTE 1: Conductor Ohmico -->\r\n <section class=\"section\" id=\"ohmic-section\">\r\n <div class=\"section-header\">\r\n <div class=\"header-left\">\r\n <span class=\"section-badge ohmic\">Parte 1<\/span>\r\n <h2 class=\"section-title\">Conductor Ohmico (Resistencia)<\/h2>\r\n <\/div>\r\n \r\n <div class=\"header-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=\"header-logo\"><\/a>\r\n <div class=\"header-divider\"><\/div>\r\n <div class=\"header-logo-text\">\r\n <span class=\"title-top\">FICA UNSL<\/span>\r\n <span class=\"subtitle-bottom\">Simulaciones Interactivas<\/span>\r\n <\/div>\r\n<\/div>\r\n <\/div>\r\n<\/div>\r\n \r\n <div class=\"simulation-grid\">\r\n <div class=\"circuit-panel\">\r\n <canvas id=\"circuit-ohmic\" class=\"circuit-canvas\"><\/canvas>\r\n \r\n <div class=\"info-box\">\r\n <h4>Comportamiento Ohmico<\/h4>\r\n <p>La resistencia es constante. La relacion entre voltaje y corriente es lineal: <code>V = R x I<\/code>. El grafico V-I muestra una linea recta que pasa por el origen.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"controls-panel\">\r\n <div class=\"control-group\">\r\n <div class=\"control-label\">\r\n <span>Tension de la fuente<\/span>\r\n <span class=\"control-value\" id=\"voltage-value-ohmic\">0.0 V<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"voltage-slider-ohmic\" min=\"0\" max=\"20\" step=\"0.5\" value=\"0\">\r\n <\/div>\r\n \r\n <div class=\"control-group\">\r\n <div class=\"control-label\">\r\n <span>Resistencia<\/span>\r\n <span class=\"control-value\" id=\"resistance-value-ohmic\">10.0 Ohm<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"resistance-slider-ohmic\" min=\"1\" max=\"100\" step=\"1\" value=\"10\">\r\n <\/div>\r\n \r\n <div class=\"meters-grid\">\r\n <div class=\"meter voltmeter\">\r\n <div class=\"meter-label\">Voltimetro<\/div>\r\n <div class=\"meter-value\"><span id=\"voltmeter-ohmic\">0.00<\/span><span class=\"meter-unit\">V<\/span><\/div>\r\n <\/div>\r\n <div class=\"meter ammeter\">\r\n <div class=\"meter-label\">Amperimetro<\/div>\r\n <div class=\"meter-value\"><span id=\"ammeter-ohmic\">0.00<\/span><span class=\"meter-unit\">A<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"graph-section\">\r\n <div class=\"graph-header\">\r\n <span class=\"graph-title\">Grafico V vs I<\/span>\r\n <button class=\"btn btn-clear\" id=\"clear-graph-ohmic\">Limpiar<\/button>\r\n <\/div>\r\n <canvas id=\"graph-ohmic\" class=\"graph-canvas\"><\/canvas>\r\n <\/div>\r\n \r\n <button class=\"btn btn-reset\" id=\"reset-ohmic\">Resetear Ensayo<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- PARTE 2: Lampara Incandescente -->\r\n <section class=\"section\" id=\"lamp-section\">\r\n <div class=\"section-header\">\r\n <span class=\"section-badge non-ohmic\">Parte 2<\/span>\r\n <h2 class=\"section-title\">Lampara Incandescente (No Ohmica)<\/h2>\r\n <\/div>\r\n \r\n <div class=\"simulation-grid\">\r\n <div class=\"circuit-panel lamp\">\r\n <canvas id=\"circuit-lamp\" class=\"circuit-canvas\"><\/canvas>\r\n \r\n <div class=\"info-box lamp-info\">\r\n <h4>Comportamiento No Ohmico<\/h4>\r\n <p>La resistencia aumenta con la temperatura del filamento. A mayor corriente, mas calor y mayor resistencia efectiva. El grafico V-I muestra una curva caracteristica no lineal.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"controls-panel lamp\">\r\n <div class=\"control-group\">\r\n <div class=\"control-label\">\r\n <span>Tension de la fuente<\/span>\r\n <span class=\"control-value\" id=\"voltage-value-lamp\">0.0 V<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"voltage-slider-lamp\" min=\"0\" max=\"20\" step=\"0.5\" value=\"0\">\r\n <\/div>\r\n \r\n <div class=\"meters-grid\">\r\n <div class=\"meter voltmeter\">\r\n <div class=\"meter-label\">Voltimetro<\/div>\r\n <div class=\"meter-value\"><span id=\"voltmeter-lamp\">0.00<\/span><span class=\"meter-unit\">V<\/span><\/div>\r\n <\/div>\r\n <div class=\"meter ammeter\">\r\n <div class=\"meter-label\">Amperimetro<\/div>\r\n <div class=\"meter-value\"><span id=\"ammeter-lamp\">0.00<\/span><span class=\"meter-unit\">A<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"resistance-display\">\r\n <div class=\"label\">Resistencia efectiva del filamento<\/div>\r\n <div class=\"value\"><span id=\"effective-resistance\">10.0<\/span> Ohm<\/div>\r\n <\/div>\r\n \r\n <div class=\"graph-section\">\r\n <div class=\"graph-header\">\r\n <span class=\"graph-title\">Grafico V vs I (No Lineal)<\/span>\r\n <button class=\"btn btn-clear\" id=\"clear-graph-lamp\">Limpiar<\/button>\r\n <\/div>\r\n <canvas id=\"graph-lamp\" class=\"graph-canvas\"><\/canvas>\r\n <\/div>\r\n \r\n <button class=\"btn btn-reset lamp-reset\" id=\"reset-lamp\">Resetear Ensayo<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n <script>\r\n \/\/ =============================================\r\n \/\/ CONFIGURACION Y VARIABLES GLOBALES\r\n \/\/ =============================================\r\n \r\n \/\/ Constantes fisicas\r\n const LAMP_R0 = 10; \/\/ Resistencia en frio fija\r\n const LAMP_HEATING_CONSTANT = 2.0; \/\/ k: constante de calentamiento\r\n \r\n \/\/ Colores\r\n const COLORS = {\r\n ohmic: '#00d4aa',\r\n nonOhmic: '#ff6b35',\r\n grid: '#2a3544',\r\n axis: '#4dabf7',\r\n wire: '#ffd93d'\r\n };\r\n \r\n \/\/ Datos de graficos\r\n const graphDataOhmic = [];\r\n const graphDataLamp = [];\r\n \r\n \/\/ Variables de estado\r\n let reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n \r\n \/\/ Electrones animados\r\n let electronsOhmic = [];\r\n let electronsLamp = [];\r\n let animationFrameId = null;\r\n \r\n \/\/ =============================================\r\n \/\/ INICIALIZACION DE CANVAS\r\n \/\/ =============================================\r\n \r\n function setupCanvas(canvas) {\r\n const rect = canvas.getBoundingClientRect();\r\n const dpr = window.devicePixelRatio || 1;\r\n canvas.width = rect.width * dpr;\r\n canvas.height = rect.height * dpr;\r\n const ctx = canvas.getContext('2d');\r\n ctx.scale(dpr, dpr);\r\n return { ctx, width: rect.width, height: rect.height };\r\n }\r\n \r\n \/\/ =============================================\r\n \/\/ FUNCIONES DE CALCULO FISICO\r\n \/\/ =============================================\r\n \r\n function calculateOhmicCurrent(voltage, resistance) {\r\n if (resistance <= 0) return 0;\r\n return voltage \/ resistance;\r\n }\r\n \r\n function calculateLampCurrent(voltage, R0, k) {\r\n if (voltage === 0) return { current: 0, resistance: R0 };\r\n \r\n let I = voltage \/ R0;\r\n \r\n for (let i = 0; i < 30; i++) {\r\n const f = k * I * I * I + R0 * I - voltage;\r\n const fPrime = 3 * k * I * I + R0;\r\n if (Math.abs(fPrime) < 0.0001) break;\r\n \r\n const deltaI = f \/ fPrime;\r\n I = I - deltaI;\r\n \r\n if (Math.abs(deltaI) < 0.00001) break;\r\n }\r\n \r\n I = Math.max(0, I);\r\n const effectiveR = R0 + k * I * I;\r\n \r\n return { current: I, resistance: effectiveR };\r\n }\r\n \r\n \/\/ =============================================\r\n \/\/ DIBUJO DE COMPONENTES\r\n \/\/ =============================================\r\n \r\n function drawBattery(ctx, x, y, voltage) {\r\n \/\/ ROTADO 90 grados en sentido horario\r\n \/\/ Linea larga horizontal arriba (positivo +)\r\n ctx.strokeStyle = '#ff6b35';\r\n ctx.lineWidth = 4;\r\n ctx.beginPath();\r\n ctx.moveTo(x - 25, y - 8);\r\n ctx.lineTo(x + 25, y - 8);\r\n ctx.stroke();\r\n \r\n \/\/ Linea corta horizontal abajo (negativo -)\r\n ctx.lineWidth = 4;\r\n ctx.beginPath();\r\n ctx.moveTo(x - 12, y + 8);\r\n ctx.lineTo(x + 12, y + 8);\r\n ctx.stroke();\r\n \r\n \/\/ Simbolos + y -\r\n ctx.fillStyle = '#ff6b35';\r\n ctx.font = 'bold 16px \"JetBrains Mono\", monospace';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText('+', x + 40, y - 8);\r\n ctx.fillText('-', x + 40, y + 8);\r\n \r\n \/\/ Valor de voltaje\r\n ctx.fillStyle = '#ffd93d';\r\n ctx.font = '13px \"JetBrains Mono\", monospace';\r\n ctx.fillText(voltage.toFixed(1) + ' V', x, y + 35);\r\n }\r\n \r\n function drawResistor(ctx, x, y, current) {\r\n ctx.strokeStyle = '#00d4aa';\r\n ctx.lineWidth = 3;\r\n ctx.beginPath();\r\n \r\n const zigzagWidth = 60;\r\n const zigzagHeight = 12;\r\n const segments = 6;\r\n const segmentWidth = zigzagWidth \/ segments;\r\n \r\n ctx.moveTo(x - zigzagWidth\/2, y);\r\n \r\n for (let i = 0; i < segments; i++) {\r\n const startX = x - zigzagWidth\/2 + i * segmentWidth;\r\n const midX = startX + segmentWidth\/2;\r\n const endX = startX + segmentWidth;\r\n const peakY = (i % 2 === 0) ? y - zigzagHeight : y + zigzagHeight;\r\n \r\n ctx.lineTo(midX, peakY);\r\n ctx.lineTo(endX, y);\r\n }\r\n \r\n ctx.stroke();\r\n \r\n if (current > 0.1) {\r\n const glowIntensity = Math.min(current \/ 2, 1);\r\n ctx.shadowColor = 'rgba(0, 212, 170, ' + (glowIntensity * 0.6) + ')';\r\n ctx.shadowBlur = 15 * glowIntensity;\r\n ctx.stroke();\r\n ctx.shadowBlur = 0;\r\n }\r\n \r\n ctx.fillStyle = '#8b95a5';\r\n ctx.font = '11px \"JetBrains Mono\", monospace';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('Resistencia', x, y + 30);\r\n }\r\n \r\n function drawLamp(ctx, x, y, brightness) {\r\n const radius = 22;\r\n \r\n const r = Math.floor(50 + brightness * 205);\r\n const g = Math.floor(50 + brightness * 167);\r\n const b = Math.floor(50 - brightness * 20);\r\n \r\n if (brightness > 0.1) {\r\n const glowRadius = radius + 25 + brightness * 15;\r\n const gradient = ctx.createRadialGradient(x, y, radius * 0.5, x, y, glowRadius);\r\n gradient.addColorStop(0, 'rgba(255, 200, 80, ' + (brightness * 0.7) + ')');\r\n gradient.addColorStop(0.5, 'rgba(255, 120, 40, ' + (brightness * 0.4) + ')');\r\n gradient.addColorStop(1, 'rgba(255, 80, 20, 0)');\r\n \r\n ctx.fillStyle = gradient;\r\n ctx.beginPath();\r\n ctx.arc(x, y, glowRadius, 0, Math.PI * 2);\r\n ctx.fill();\r\n }\r\n \r\n \/\/ Bombilla\r\n ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';\r\n ctx.beginPath();\r\n ctx.arc(x, y, radius, 0, Math.PI * 2);\r\n ctx.fill();\r\n \r\n ctx.strokeStyle = '#666';\r\n ctx.lineWidth = 2;\r\n ctx.beginPath();\r\n ctx.arc(x, y, radius, 0, Math.PI * 2);\r\n ctx.stroke();\r\n \r\n \/\/ Filamento\r\n if (brightness > 0.2) {\r\n ctx.strokeStyle = 'rgba(255, 255, 200, ' + (0.5 + brightness * 0.5) + ')';\r\n ctx.lineWidth = 2;\r\n } else {\r\n ctx.strokeStyle = '#888';\r\n ctx.lineWidth = 1.5;\r\n }\r\n ctx.beginPath();\r\n ctx.moveTo(x - 10, y + 10);\r\n ctx.quadraticCurveTo(x, y - 12, x + 10, y + 10);\r\n ctx.stroke();\r\n \r\n \/\/ Base\r\n ctx.fillStyle = '#3a4555';\r\n ctx.fillRect(x - 10, y + radius - 2, 20, 12);\r\n ctx.fillStyle = '#2a3544';\r\n ctx.fillRect(x - 6, y + radius + 10, 12, 6);\r\n \r\n ctx.fillStyle = '#8b95a5';\r\n ctx.font = '11px \"JetBrains Mono\", monospace';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('Lampara', x, y + 50);\r\n }\r\n \r\n function drawAmmeter(ctx, x, y, current, color) {\r\n ctx.strokeStyle = color;\r\n ctx.lineWidth = 2;\r\n ctx.beginPath();\r\n ctx.arc(x, y, 16, 0, Math.PI * 2);\r\n ctx.stroke();\r\n \r\n ctx.fillStyle = color;\r\n ctx.font = 'bold 14px \"JetBrains Mono\", monospace';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText('A', x, y);\r\n \r\n ctx.fillStyle = '#e8eaed';\r\n ctx.font = '11px \"JetBrains Mono\", monospace';\r\n ctx.fillText(current.toFixed(2) + ' A', x, y + 28);\r\n }\r\n \r\n function drawVoltmeter(ctx, x, y, voltage, color) {\r\n ctx.strokeStyle = color;\r\n ctx.lineWidth = 2;\r\n ctx.beginPath();\r\n ctx.arc(x, y, 16, 0, Math.PI * 2);\r\n ctx.stroke();\r\n \r\n ctx.fillStyle = color;\r\n ctx.font = 'bold 14px \"JetBrains Mono\", monospace';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText('V', x, y);\r\n \r\n ctx.fillStyle = '#e8eaed';\r\n ctx.font = '11px \"JetBrains Mono\", monospace';\r\n ctx.fillText(voltage.toFixed(1) + ' V', x, y + 28);\r\n }\r\n \r\n function drawNode(ctx, x, y) {\r\n ctx.fillStyle = '#4dabf7';\r\n ctx.beginPath();\r\n ctx.arc(x, y, 4, 0, Math.PI * 2);\r\n ctx.fill();\r\n }\r\n \r\n \/\/ =============================================\r\n \/\/ DIBUJO DEL CIRCUITO OHMICO\r\n \/\/ =============================================\r\n \r\n function drawOhmicCircuit(ctx, width, height, voltage, resistance, current) {\r\n ctx.clearRect(0, 0, width, height);\r\n \r\n const centerX = width \/ 2;\r\n const centerY = height \/ 2;\r\n const circuitW = Math.min(width * 0.72, 420);\r\n const circuitH = Math.min(height * 0.58, 175);\r\n \r\n const left = centerX - circuitW \/ 2;\r\n const right = centerX + circuitW \/ 2;\r\n const top = centerY - circuitH \/ 2;\r\n const bottom = centerY + circuitH \/ 2;\r\n \r\n ctx.strokeStyle = COLORS.wire;\r\n ctx.lineWidth = 4;\r\n ctx.lineCap = 'round';\r\n ctx.lineJoin = 'round';\r\n \r\n \/\/ Cables del circuito\r\n \/\/ Superior izquierdo (bateria a resistencia)\r\n ctx.beginPath();\r\n ctx.moveTo(left + 25, top);\r\n ctx.lineTo(centerX - 35, top);\r\n ctx.stroke();\r\n \r\n \/\/ Superior derecho (resistencia a esquina)\r\n ctx.beginPath();\r\n ctx.moveTo(centerX + 35, top);\r\n ctx.lineTo(right, top);\r\n ctx.stroke();\r\n \r\n \/\/ Lado derecho\r\n ctx.beginPath();\r\n ctx.moveTo(right, top);\r\n ctx.lineTo(right, bottom);\r\n ctx.stroke();\r\n \r\n \/\/ Inferior derecho a amperimetro\r\n ctx.beginPath();\r\n ctx.moveTo(right, bottom);\r\n ctx.lineTo(centerX + 20, bottom);\r\n ctx.stroke();\r\n \r\n \/\/ Inferior amperimetro a izquierda\r\n ctx.beginPath();\r\n ctx.moveTo(centerX - 20, bottom);\r\n ctx.lineTo(left + 25, bottom);\r\n ctx.stroke();\r\n \r\n \/\/ Lado izquierdo (inferior a bateria)\r\n ctx.beginPath();\r\n ctx.moveTo(left + 25, bottom);\r\n ctx.lineTo(left + 25, centerY + 35);\r\n ctx.stroke();\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(left + 25, centerY - 35);\r\n ctx.lineTo(left + 25, top);\r\n ctx.stroke();\r\n \r\n \/\/ Componentes\r\n drawBattery(ctx, left + 25, centerY, voltage);\r\n drawResistor(ctx, centerX, top, current);\r\n drawAmmeter(ctx, centerX, bottom, current, COLORS.ohmic);\r\n drawVoltmeter(ctx, centerX, centerY + 15, voltage, COLORS.ohmic);\r\n \r\n \/\/ Conexiones del voltimetro (lineas punteadas)\r\n ctx.strokeStyle = '#4dabf7';\r\n ctx.lineWidth = 1.5;\r\n ctx.setLineDash([5, 4]);\r\n ctx.beginPath();\r\n ctx.moveTo(centerX - 25, top);\r\n ctx.lineTo(centerX - 25, centerY + 15);\r\n ctx.stroke();\r\n ctx.beginPath();\r\n ctx.moveTo(centerX + 25, top);\r\n ctx.lineTo(centerX + 25, centerY + 15);\r\n ctx.stroke();\r\n ctx.setLineDash([]);\r\n \r\n \/\/ Nodos\r\n drawNode(ctx, left + 25, top);\r\n drawNode(ctx, left + 25, bottom);\r\n drawNode(ctx, right, top);\r\n drawNode(ctx, right, bottom);\r\n }\r\n \r\n \/\/ =============================================\r\n \/\/ DIBUJO DEL CIRCUITO LAMPARA\r\n \/\/ =============================================\r\n \r\n function drawLampCircuit(ctx, width, height, voltage, current, brightness) {\r\n ctx.clearRect(0, 0, width, height);\r\n \r\n const centerX = width \/ 2;\r\n const centerY = height \/ 2;\r\n const circuitW = Math.min(width * 0.72, 420);\r\n const circuitH = Math.min(height * 0.58, 175);\r\n \r\n const left = centerX - circuitW \/ 2;\r\n const right = centerX + circuitW \/ 2;\r\n const top = centerY - circuitH \/ 2;\r\n const bottom = centerY + circuitH \/ 2;\r\n \r\n ctx.strokeStyle = COLORS.wire;\r\n ctx.lineWidth = 4;\r\n ctx.lineCap = 'round';\r\n ctx.lineJoin = 'round';\r\n \r\n \/\/ Mismos cables que el circuito ohmico\r\n ctx.beginPath();\r\n ctx.moveTo(left + 25, top);\r\n ctx.lineTo(centerX - 35, top);\r\n ctx.stroke();\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(centerX + 35, top);\r\n ctx.lineTo(right, top);\r\n ctx.stroke();\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(right, top);\r\n ctx.lineTo(right, bottom);\r\n ctx.stroke();\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(right, bottom);\r\n ctx.lineTo(centerX + 20, bottom);\r\n ctx.stroke();\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(centerX - 20, bottom);\r\n ctx.lineTo(left + 25, bottom);\r\n ctx.stroke();\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(left + 25, bottom);\r\n ctx.lineTo(left + 25, centerY + 35);\r\n ctx.stroke();\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(left + 25, centerY - 35);\r\n ctx.lineTo(left + 25, top);\r\n ctx.stroke();\r\n \r\n \/\/ Componentes\r\n drawBattery(ctx, left + 25, centerY, voltage);\r\n drawLamp(ctx, centerX, top, brightness);\r\n drawAmmeter(ctx, centerX, bottom, current, COLORS.nonOhmic);\r\n drawVoltmeter(ctx, centerX, centerY + 15, voltage, COLORS.nonOhmic);\r\n \r\n \/\/ Conexiones voltimetro\r\n ctx.strokeStyle = '#4dabf7';\r\n ctx.lineWidth = 1.5;\r\n ctx.setLineDash([5, 4]);\r\n ctx.beginPath();\r\n ctx.moveTo(centerX - 25, top);\r\n ctx.lineTo(centerX - 25, centerY + 15);\r\n ctx.stroke();\r\n ctx.beginPath();\r\n ctx.moveTo(centerX + 25, top);\r\n ctx.lineTo(centerX + 25, centerY + 15);\r\n ctx.stroke();\r\n ctx.setLineDash([]);\r\n \r\n \/\/ Nodos\r\n drawNode(ctx, left + 25, top);\r\n drawNode(ctx, left + 25, bottom);\r\n drawNode(ctx, right, top);\r\n drawNode(ctx, right, bottom);\r\n }\r\n \r\n \/\/ =============================================\r\n \/\/ ANIMACION DE ELECTRONES (SENTIDO ANTIHORARIO)\r\n \/\/ =============================================\r\n \r\n function initElectrons(count) {\r\n const electrons = [];\r\n for (let i = 0; i < count; i++) {\r\n electrons.push({\r\n progress: Math.random(),\r\n offset: (Math.random() - 0.5) * 6\r\n });\r\n }\r\n return electrons;\r\n }\r\n \r\n function drawElectronsOhmic(ctx, width, height, electrons, speed, color) {\r\n if (speed < 0.01) return;\r\n \r\n const centerX = width \/ 2;\r\n const centerY = height \/ 2;\r\n const circuitW = Math.min(width * 0.72, 420);\r\n const circuitH = Math.min(height * 0.58, 175);\r\n \r\n const left = centerX - circuitW \/ 2;\r\n const right = centerX + circuitW \/ 2;\r\n const top = centerY - circuitH \/ 2;\r\n const bottom = centerY + circuitH \/ 2;\r\n \r\n \/\/ Puntos de referencia del circuito\r\n const p1 = { x: left + 25, y: top }; \/\/ Esquina sup izq\r\n const p2 = { x: right, y: top }; \/\/ Esquina sup der\r\n const p3 = { x: right, y: bottom }; \/\/ Esquina inf der\r\n const p4 = { x: left + 25, y: bottom }; \/\/ Esquina inf izq\r\n \r\n \/\/ Calcular longitudes de cada segmento\r\n const seg1 = p2.x - p1.x; \/\/ Arriba\r\n const seg2 = p3.y - p2.y; \/\/ Derecha\r\n const seg3 = p3.x - p4.x; \/\/ Abajo\r\n const seg4 = p4.y - p1.y; \/\/ Izquierda\r\n const perimeter = seg1 + seg2 + seg3 + seg4;\r\n \r\n electrons.forEach(electron => {\r\n if (!reducedMotion) {\r\n electron.progress += speed * 0.004;\r\n if (electron.progress > 1) electron.progress -= 1;\r\n }\r\n \r\n let dist = electron.progress * perimeter;\r\n let x = 0;\r\n let y = 0;\r\n \r\n \/\/ Sentido antihorario: p1 -> p4 -> p3 -> p2 -> p1\r\n if (dist < seg4) {\r\n \/\/ Lado izquierdo (bajando)\r\n x = p1.x + electron.offset;\r\n y = p1.y + dist;\r\n } else if (dist < seg4 + seg3) {\r\n \/\/ Lado inferior (izquierda a derecha)\r\n x = p4.x + (dist - seg4);\r\n y = p4.y + electron.offset;\r\n } else if (dist < seg4 + seg3 + seg2) {\r\n \/\/ Lado derecho (subiendo)\r\n x = p3.x + electron.offset;\r\n y = p3.y - (dist - seg4 - seg3);\r\n } else {\r\n \/\/ Lado superior (derecha a izquierda)\r\n x = p2.x - (dist - seg4 - seg3 - seg2);\r\n y = p2.y + electron.offset;\r\n }\r\n \r\n ctx.fillStyle = color;\r\n ctx.shadowColor = color;\r\n ctx.shadowBlur = reducedMotion ? 0 : 10;\r\n ctx.beginPath();\r\n ctx.arc(x, y, 3, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.shadowBlur = 0;\r\n });\r\n }\r\n \r\n function drawElectronsLamp(ctx, width, height, electrons, speed, color) {\r\n if (speed < 0.01) return;\r\n \r\n const centerX = width \/ 2;\r\n const centerY = height \/ 2;\r\n const circuitW = Math.min(width * 0.72, 420);\r\n const circuitH = Math.min(height * 0.58, 175);\r\n \r\n const left = centerX - circuitW \/ 2;\r\n const right = centerX + circuitW \/ 2;\r\n const top = centerY - circuitH \/ 2;\r\n const bottom = centerY + circuitH \/ 2;\r\n \r\n const p1 = { x: left + 25, y: top };\r\n const p2 = { x: right, y: top };\r\n const p3 = { x: right, y: bottom };\r\n const p4 = { x: left + 25, y: bottom };\r\n \r\n const seg1 = p2.x - p1.x;\r\n const seg2 = p3.y - p2.y;\r\n const seg3 = p3.x - p4.x;\r\n const seg4 = p4.y - p1.y;\r\n const perimeter = seg1 + seg2 + seg3 + seg4;\r\n \r\n electrons.forEach(electron => {\r\n if (!reducedMotion) {\r\n electron.progress += speed * 0.004;\r\n if (electron.progress > 1) electron.progress -= 1;\r\n }\r\n \r\n let dist = electron.progress * perimeter;\r\n let x = 0;\r\n let y = 0;\r\n \r\n if (dist < seg4) {\r\n x = p1.x + electron.offset;\r\n y = p1.y + dist;\r\n } else if (dist < seg4 + seg3) {\r\n x = p4.x + (dist - seg4);\r\n y = p4.y + electron.offset;\r\n } else if (dist < seg4 + seg3 + seg2) {\r\n x = p3.x + electron.offset;\r\n y = p3.y - (dist - seg4 - seg3);\r\n } else {\r\n x = p2.x - (dist - seg4 - seg3 - seg2);\r\n y = p2.y + electron.offset;\r\n }\r\n \r\n ctx.fillStyle = color;\r\n ctx.shadowColor = color;\r\n ctx.shadowBlur = reducedMotion ? 0 : 10;\r\n ctx.beginPath();\r\n ctx.arc(x, y, 3, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.shadowBlur = 0;\r\n });\r\n }\r\n \r\n \/\/ =============================================\r\n \/\/ DIBUJO DE GRAFICOS\r\n \/\/ =============================================\r\n \r\n function drawGraph(canvas, data, color, maxV, maxI) {\r\n const { ctx, width, height } = setupCanvas(canvas);\r\n \r\n const padding = { top: 20, right: 20, bottom: 35, left: 45 };\r\n const graphWidth = width - padding.left - padding.right;\r\n const graphHeight = height - padding.top - padding.bottom;\r\n \r\n ctx.fillStyle = '#111820';\r\n ctx.fillRect(0, 0, width, height);\r\n \r\n ctx.strokeStyle = COLORS.grid;\r\n ctx.lineWidth = 0.5;\r\n \r\n for (let i = 0; i <= 5; i++) {\r\n const x = padding.left + (graphWidth \/ 5) * i;\r\n ctx.beginPath();\r\n ctx.moveTo(x, padding.top);\r\n ctx.lineTo(x, height - padding.bottom);\r\n ctx.stroke();\r\n }\r\n \r\n for (let i = 0; i <= 4; i++) {\r\n const y = padding.top + (graphHeight \/ 4) * i;\r\n ctx.beginPath();\r\n ctx.moveTo(padding.left, y);\r\n ctx.lineTo(width - padding.right, y);\r\n ctx.stroke();\r\n }\r\n \r\n ctx.strokeStyle = COLORS.axis;\r\n ctx.lineWidth = 2;\r\n ctx.beginPath();\r\n ctx.moveTo(padding.left, padding.top);\r\n ctx.lineTo(padding.left, height - padding.bottom);\r\n ctx.stroke();\r\n ctx.beginPath();\r\n ctx.moveTo(padding.left, height - padding.bottom);\r\n ctx.lineTo(width - padding.right, height - padding.bottom);\r\n ctx.stroke();\r\n \r\n ctx.fillStyle = '#8b95a5';\r\n ctx.font = '10px \"JetBrains Mono\", monospace';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('I (A)', width \/ 2, height - 5);\r\n \r\n ctx.save();\r\n ctx.translate(12, height \/ 2);\r\n ctx.rotate(-Math.PI \/ 2);\r\n ctx.fillText('V (V)', 0, 0);\r\n ctx.restore();\r\n \r\n ctx.textAlign = 'right';\r\n for (let i = 0; i <= 4; i++) {\r\n const v = (maxV \/ 4) * (4 - i);\r\n const y = padding.top + (graphHeight \/ 4) * i;\r\n ctx.fillText(v.toFixed(0), padding.left - 5, y + 3);\r\n }\r\n \r\n ctx.textAlign = 'center';\r\n for (let i = 0; i <= 5; i++) {\r\n const i_val = (maxI \/ 5) * i;\r\n const x = padding.left + (graphWidth \/ 5) * i;\r\n ctx.fillText(i_val.toFixed(1), x, height - padding.bottom + 15);\r\n }\r\n \r\n if (data.length > 0) {\r\n ctx.fillStyle = color;\r\n \r\n data.forEach(point => {\r\n const x = padding.left + (point.i \/ maxI) * graphWidth;\r\n const y = height - padding.bottom - (point.v \/ maxV) * graphHeight;\r\n \r\n if (x >= padding.left && x <= width - padding.right &&\r\n y >= padding.top && y <= height - padding.bottom) {\r\n ctx.beginPath();\r\n ctx.arc(x, y, 4, 0, Math.PI * 2);\r\n ctx.fill();\r\n }\r\n });\r\n }\r\n }\r\n \r\n \/\/ =============================================\r\n \/\/ ACTUALIZACION DE SIMULACIONES\r\n \/\/ =============================================\r\n \r\n function updateOhmicSimulation() {\r\n const voltageSlider = document.getElementById('voltage-slider-ohmic');\r\n const resistanceSlider = document.getElementById('resistance-slider-ohmic');\r\n \r\n const voltage = parseFloat(voltageSlider.value);\r\n const resistance = parseFloat(resistanceSlider.value);\r\n const current = calculateOhmicCurrent(voltage, resistance);\r\n \r\n document.getElementById('voltage-value-ohmic').textContent = voltage.toFixed(1) + ' V';\r\n document.getElementById('resistance-value-ohmic').textContent = resistance.toFixed(1) + ' Ohm';\r\n document.getElementById('voltmeter-ohmic').textContent = voltage.toFixed(2);\r\n document.getElementById('ammeter-ohmic').textContent = current.toFixed(2);\r\n \r\n const canvasOhmic = document.getElementById('circuit-ohmic');\r\n const { ctx, width, height } = setupCanvas(canvasOhmic);\r\n drawOhmicCircuit(ctx, width, height, voltage, resistance, current);\r\n drawElectronsOhmic(ctx, width, height, electronsOhmic, current, COLORS.ohmic);\r\n \r\n const graphCanvas = document.getElementById('graph-ohmic');\r\n drawGraph(graphCanvas, graphDataOhmic, COLORS.ohmic, 20, 5);\r\n }\r\n \r\n function updateLampSimulation() {\r\n const voltageSlider = document.getElementById('voltage-slider-lamp');\r\n \r\n const voltage = parseFloat(voltageSlider.value);\r\n const { current, resistance: effectiveR } = calculateLampCurrent(voltage, LAMP_R0, LAMP_HEATING_CONSTANT);\r\n const brightness = Math.min(current \/ 1.5, 1);\r\n \r\n document.getElementById('voltage-value-lamp').textContent = voltage.toFixed(1) + ' V';\r\n document.getElementById('voltmeter-lamp').textContent = voltage.toFixed(2);\r\n document.getElementById('ammeter-lamp').textContent = current.toFixed(2);\r\n document.getElementById('effective-resistance').textContent = effectiveR.toFixed(1);\r\n \r\n const canvasLamp = document.getElementById('circuit-lamp');\r\n const { ctx, width, height } = setupCanvas(canvasLamp);\r\n drawLampCircuit(ctx, width, height, voltage, current, brightness);\r\n drawElectronsLamp(ctx, width, height, electronsLamp, current, COLORS.nonOhmic);\r\n \r\n const graphCanvas = document.getElementById('graph-lamp');\r\n drawGraph(graphCanvas, graphDataLamp, COLORS.nonOhmic, 20, 5);\r\n }\r\n \r\n \/\/ =============================================\r\n \/\/ FUNCIONES DE CONTROL\r\n \/\/ =============================================\r\n \r\n function addPointToGraph(data, v, i) {\r\n const exists = data.some(p => Math.abs(p.v - v) < 0.3 && Math.abs(p.i - i) < 0.05);\r\n if (!exists) {\r\n data.push({ v, i });\r\n if (data.length > 150) {\r\n data.shift();\r\n }\r\n }\r\n }\r\n \r\n function resetOhmicSimulation() {\r\n \/\/ Resetear sliders a CERO\r\n document.getElementById('voltage-slider-ohmic').value = 0;\r\n document.getElementById('resistance-slider-ohmic').value = 10; \/\/ Valor por defecto\r\n \r\n \/\/ Limpiar grafico\r\n graphDataOhmic.length = 0;\r\n \r\n updateOhmicSimulation();\r\n }\r\n \r\n function resetLampSimulation() {\r\n \/\/ Resetear slider de voltaje a CERO\r\n document.getElementById('voltage-slider-lamp').value = 0;\r\n \r\n \/\/ Limpiar grafico\r\n graphDataLamp.length = 0;\r\n \r\n updateLampSimulation();\r\n }\r\n \r\n \/\/ =============================================\r\n \/\/ LOOP DE ANIMACION\r\n \/\/ =============================================\r\n \r\n function animate() {\r\n updateOhmicSimulation();\r\n updateLampSimulation();\r\n animationFrameId = requestAnimationFrame(animate);\r\n }\r\n \r\n \/\/ =============================================\r\n \/\/ EVENT LISTENERS\r\n \/\/ =============================================\r\n \r\n function setupEventListeners() {\r\n \/\/ Sliders ohmicos\r\n document.getElementById('voltage-slider-ohmic').addEventListener('input', function() {\r\n const voltage = parseFloat(this.value);\r\n const resistance = parseFloat(document.getElementById('resistance-slider-ohmic').value);\r\n const current = calculateOhmicCurrent(voltage, resistance);\r\n addPointToGraph(graphDataOhmic, voltage, current);\r\n });\r\n \r\n document.getElementById('resistance-slider-ohmic').addEventListener('input', function() {\r\n const voltage = parseFloat(document.getElementById('voltage-slider-ohmic').value);\r\n const resistance = parseFloat(this.value);\r\n const current = calculateOhmicCurrent(voltage, resistance);\r\n addPointToGraph(graphDataOhmic, voltage, current);\r\n });\r\n \r\n \/\/ Slider lampara\r\n document.getElementById('voltage-slider-lamp').addEventListener('input', function() {\r\n const voltage = parseFloat(this.value);\r\n const { current } = calculateLampCurrent(voltage, LAMP_R0, LAMP_HEATING_CONSTANT);\r\n addPointToGraph(graphDataLamp, voltage, current);\r\n });\r\n \r\n \/\/ Botones limpiar graficos\r\n document.getElementById('clear-graph-ohmic').addEventListener('click', function() {\r\n graphDataOhmic.length = 0;\r\n });\r\n \r\n document.getElementById('clear-graph-lamp').addEventListener('click', function() {\r\n graphDataLamp.length = 0;\r\n });\r\n \r\n \/\/ Botones reset\r\n document.getElementById('reset-ohmic').addEventListener('click', resetOhmicSimulation);\r\n document.getElementById('reset-lamp').addEventListener('click', resetLampSimulation);\r\n \r\n \/\/ Resize\r\n window.addEventListener('resize', function() {\r\n updateOhmicSimulation();\r\n updateLampSimulation();\r\n });\r\n }\r\n \r\n \/\/ =============================================\r\n \/\/ INICIALIZACION\r\n \/\/ =============================================\r\n \r\n function init() {\r\n electronsOhmic = initElectrons(18);\r\n electronsLamp = initElectrons(18);\r\n \r\n setupEventListeners();\r\n \r\n \/\/ NO agregar puntos iniciales - graficos vacios al inicio\r\n \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 – Laboratorio Virtual Ley de Ohm – Laboratorio Virtual Explora la relacion entre voltaje, corriente y resistencia en conductores ohmicos y…<\/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-6099","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_experiencia_Res_Lamp - 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_experiencia_res_lamp\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ley_de_ohm_experiencia_Res_Lamp - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"Simulaci\u00f3n Ley de Ohm – Laboratorio Virtual Ley de Ohm – Laboratorio Virtual Explora la relacion entre voltaje, corriente y resistencia en conductores ohmicos y…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_experiencia_res_lamp\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-19T17:51:43+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_experiencia_res_lamp\/\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_experiencia_res_lamp\/\",\"name\":\"ley_de_ohm_experiencia_Res_Lamp - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#website\"},\"datePublished\":\"2026-03-12T14:44:26+00:00\",\"dateModified\":\"2026-03-19T17:51:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_experiencia_res_lamp\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_experiencia_res_lamp\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_experiencia_res_lamp\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/fisica2.fica.unsl.edu.ar\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ley_de_ohm_experiencia_Res_Lamp\"}]},{\"@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_experiencia_Res_Lamp - 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_experiencia_res_lamp\/","og_locale":"es_ES","og_type":"article","og_title":"ley_de_ohm_experiencia_Res_Lamp - F\u00edsica 2","og_description":"Simulaci\u00f3n Ley de Ohm – Laboratorio Virtual Ley de Ohm – Laboratorio Virtual Explora la relacion entre voltaje, corriente y resistencia en conductores ohmicos y…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_experiencia_res_lamp\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-03-19T17:51:43+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_experiencia_res_lamp\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_experiencia_res_lamp\/","name":"ley_de_ohm_experiencia_Res_Lamp - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-03-12T14:44:26+00:00","dateModified":"2026-03-19T17:51:43+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_experiencia_res_lamp\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_experiencia_res_lamp\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_ohm_experiencia_res_lamp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"ley_de_ohm_experiencia_Res_Lamp"}]},{"@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\/6099","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=6099"}],"version-history":[{"count":13,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6099\/revisions"}],"predecessor-version":[{"id":6694,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6099\/revisions\/6694"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=6099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}