Ley de Gauss - Visualizaci\u00f3n del Campo El\u00e9ctrico<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --bg-main: #1f2937;\r\n --bg-card: #374151;\r\n --bg-input: #4b5563;\r\n --text-primary: #f3f4f6;\r\n --text-secondary: #9ca3af;\r\n --accent-yellow: #fbbf24;\r\n --accent-cyan: #22d3ee;\r\n --accent-red: #ef4444;\r\n --formula-color: #fef3c7;\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: 'Roboto', sans-serif;\r\n background: var(--bg-main);\r\n color: var(--text-primary);\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n\r\n .formula-text {\r\n font-family: 'Roboto Mono', monospace;\r\n color: var(--formula-color);\r\n font-weight: 500;\r\n }\r\n\r\n .card {\r\n background: var(--bg-card);\r\n border-radius: 8px;\r\n padding: 16px;\r\n }\r\n\r\n .input-field {\r\n background: var(--bg-input);\r\n border: none;\r\n border-radius: 4px;\r\n padding: 8px 12px;\r\n color: var(--text-primary);\r\n font-family: 'Roboto Mono', monospace;\r\n }\r\n\r\n input[type=\"range\"] {\r\n -webkit-appearance: none;\r\n width: 100%;\r\n height: 6px;\r\n background: var(--bg-input);\r\n border-radius: 3px;\r\n outline: none;\r\n }\r\n\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n width: 18px;\r\n height: 18px;\r\n background: var(--accent-yellow);\r\n border-radius: 50%;\r\n cursor: pointer;\r\n }\r\n\r\n .visualization-box {\r\n background: #111827;\r\n border-radius: 8px;\r\n border: 1px solid #4b5563;\r\n }\r\n\r\n .chart-box {\r\n background: #111827;\r\n border-radius: 8px;\r\n border: 1px solid #4b5563;\r\n padding: 12px;\r\n }\r\n\r\n .logo-box {\r\n \r\n border-radius: 6px;\r\n padding: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 60px;\r\n }\r\n\r\n .logo-box img {\r\n max-height: 30px;\r\n object-fit: contain;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"max-w-6xl mx-auto\">\r\n \r\n <div class=\"mb-6\">\r\n <h1 class=\"text-2xl font-bold mb-2\">VISUALIZACI\u00d3N DEL CAMPO EL\u00c9CTRICO<\/h1>\r\n <p class=\"text-sm\" style=\"color: var(--text-secondary);\">Ley de Gauss de la Electrost\u00e1tica<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid lg:grid-cols-3 gap-4\">\r\n \r\n <div class=\"lg:col-span-2 space-y-4\">\r\n \r\n <div class=\"visualization-box p-4\">\r\n <canvas id=\"mainCanvas\" width=\"600\" height=\"350\"><\/canvas>\r\n \r\n \r\n <div class=\"flex flex-wrap gap-4 mt-3 text-xs\" style=\"color: var(--text-secondary);\">\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"w-3 h-3 rounded-full\" style=\"background: var(--accent-red);\"><\/div>\r\n <span>Carga positiva Q<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"w-3 h-3 rounded-full\" style=\"background: var(--accent-yellow);\"><\/div>\r\n <span>Vector campo el\u00e9ctrico E<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"w-3 h-3 rounded-full border-2\" style=\"border-color: var(--accent-cyan);\"><\/div>\r\n <span>Superficie gaussiana<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"w-3 h-3 rounded-full\" style=\"background: #a78bfa;\"><\/div>\r\n <span>Vector \u00e1rea dA<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid md:grid-cols-2 gap-4\">\r\n \r\n <div class=\"chart-box\">\r\n <h3 class=\"text-sm font-medium mb-3\" style=\"color: var(--text-secondary);\">CAMPO EL\u00c9CTRICO VS RADIO<\/h3>\r\n <canvas id=\"fieldChart\" width=\"280\" height=\"180\"><\/canvas>\r\n <\/div>\r\n\r\n \r\n <div class=\"chart-box\">\r\n <h3 class=\"text-sm font-medium mb-3\" style=\"color: var(--text-secondary);\">FLUJO EL\u00c9CTRICO VS RADIO<\/h3>\r\n <canvas id=\"fluxChart\" width=\"280\" height=\"180\"><\/canvas>\r\n \r\n \r\n <br><br>\r\n \r\n\r\n<div class=\"logo-box\">\r\n <a href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/FISAR_SIM\/\" target=\"_blank\">\r\n <img decoding=\"async\" src=\"FISAR_SIM_1\" alt=\"Logo\" class=\"logo-img\"><\/a>\r\n <div class=\"block text-sm mb-2\" style=\"color: var(--text-secondary);\"<b> Simulaciones Interactivas<\/b> FICA UNSL<\/div>\r\n<\/div>\r\n\r\n \r\n \r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-4\">\r\n \r\n <div class=\"card\">\r\n <label class=\"block text-sm mb-2\" style=\"color: var(--text-secondary);\">Carga el\u00e9ctrica (Q)<\/label>\r\n <input type=\"range\" id=\"chargeSlider\" min=\"0.5\" max=\"10\" step=\"0.01\" value=\"3.18\">\r\n <div class=\"flex justify-between mt-2\">\r\n <span class=\"input-field text-sm\" id=\"chargeDisplay\">3.18 nC<\/span>\r\n <span class=\"text-xs\" style=\"color: var(--text-secondary);\">0.5 - 10 nC<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"card\">\r\n <label class=\"block text-sm mb-2\" style=\"color: var(--text-secondary);\">Radio de la superficie gaussiana (r)<\/label>\r\n <input type=\"range\" id=\"radiusSlider\" min=\"20\" max=\"150\" step=\"1\" value=\"80\">\r\n <div class=\"flex justify-between mt-2\">\r\n <span class=\"input-field text-sm\" id=\"radiusDisplay\">80 cm<\/span>\r\n <span class=\"text-xs\" style=\"color: var(--text-secondary);\">20 - 150 cm<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"card space-y-3\">\r\n <h3 class=\"text-sm font-medium\" style=\"color: var(--text-secondary);\">DATOS CALCULADOS<\/h3>\r\n \r\n <div class=\"flex justify-between items-center py-2 border-b\" style=\"border-color: #4b5563;\">\r\n <span class=\"text-sm\">Campo el\u00e9ctrico (E)<\/span>\r\n <span class=\"input-field text-sm\" id=\"eFieldDisplay\">4.47e+5 N\/C<\/span>\r\n <\/div>\r\n \r\n <div class=\"flex justify-between items-center py-2 border-b\" style=\"border-color: #4b5563;\">\r\n <span class=\"text-sm\">Flujo el\u00e9ctrico (\u03a6)<\/span>\r\n <span class=\"input-field text-sm\" id=\"fluxDisplay\">3.59e+2 N\u00b7m\u00b2\/C<\/span>\r\n <\/div>\r\n \r\n <div class=\"flex justify-between items-center py-2 border-b\" style=\"border-color: #4b5563;\">\r\n <span class=\"text-sm\">\u00c1rea superficie<\/span>\r\n <span class=\"input-field text-sm\" id=\"areaDisplay\">8.04e+4 cm\u00b2<\/span>\r\n <\/div>\r\n \r\n <div class=\"flex justify-between items-center py-2\">\r\n <span class=\"text-sm\">\u00c1ngulo \u03b8<\/span>\r\n <span class=\"input-field text-sm\">0\u00b0<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"card\">\r\n <h3 class=\"text-sm font-medium mb-3\" style=\"color: var(--text-secondary);\">F\u00d3RMULAS<\/h3>\r\n <div class=\"space-y-2 text-sm\">\r\n <p><span class=\"formula-text\">E = Q \/ (4\u03c0\u03b5\u2080r\u00b2)<\/span><\/p>\r\n <p><span class=\"formula-text\">\u03a6 = Q \/ \u03b5\u2080<\/span><\/p>\r\n <p><span class=\"formula-text\">\u222e E\u20d7 \u00b7 dA\u20d7 = Q_enc \/ \u03b5\u2080<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const EPSILON_0 = 8.854e-12;\r\n const K = 8.99e9;\r\n\r\n let charge = 3.18e-9;\r\n let radius = 80;\r\n\r\n const mainCanvas = document.getElementById('mainCanvas');\r\n const mainCtx = mainCanvas.getContext('2d');\r\n const fieldChart = document.getElementById('fieldChart');\r\n const fieldChartCtx = fieldChart.getContext('2d');\r\n const fluxChart = document.getElementById('fluxChart');\r\n const fluxChartCtx = fluxChart.getContext('2d');\r\n\r\n const chargeSlider = document.getElementById('chargeSlider');\r\n const radiusSlider = document.getElementById('radiusSlider');\r\n const chargeDisplay = document.getElementById('chargeDisplay');\r\n const radiusDisplay = document.getElementById('radiusDisplay');\r\n const eFieldDisplay = document.getElementById('eFieldDisplay');\r\n const fluxDisplay = document.getElementById('fluxDisplay');\r\n const areaDisplay = document.getElementById('areaDisplay');\r\n\r\n function calculateEField(Q, r) {\r\n const rMeters = r * 0.01;\r\n return K * Q \/ (rMeters * rMeters);\r\n }\r\n\r\n function calculateFlux(Q) {\r\n return Q \/ EPSILON_0;\r\n }\r\n\r\n function calculateArea(r) {\r\n return 4 * Math.PI * r * r;\r\n }\r\n\r\n function formatExponential(num) {\r\n return num.toExponential(2);\r\n }\r\n\r\n function drawMainVisualization() {\r\n const ctx = mainCtx;\r\n const width = mainCanvas.width;\r\n const height = mainCanvas.height;\r\n const centerX = width \/ 2;\r\n const centerY = height \/ 2;\r\n\r\n ctx.clearRect(0, 0, width, height);\r\n\r\n ctx.fillStyle = '#111827';\r\n ctx.fillRect(0, 0, width, height);\r\n\r\n const surfaceRadius = Math.max(20, Math.min(radius * 1.5, Math.min(width, height) \/ 2 - 40));\r\n\r\n \/\/ Gaussian surface\r\n ctx.beginPath();\r\n ctx.arc(centerX, centerY, surfaceRadius, 0, Math.PI * 2);\r\n ctx.strokeStyle = '#22d3ee';\r\n ctx.lineWidth = 2;\r\n ctx.setLineDash([6, 4]);\r\n ctx.stroke();\r\n ctx.setLineDash([]);\r\n\r\n \/\/ Label\r\n ctx.fillStyle = '#22d3ee';\r\n ctx.font = '12px Roboto';\r\n ctx.fillText('r = ' + radius + ' cm', centerX + surfaceRadius + 8, centerY);\r\n\r\n \/\/ Field lines and vectors\r\n const numLines = 12;\r\n const eField = calculateEField(charge, radius);\r\n const maxE = calculateEField(charge, 20);\r\n const eRatio = Math.sqrt(eField \/ maxE);\r\n const vectorLength = Math.max(8, Math.min(30, eRatio * 30));\r\n\r\n for (let i = 0; i < numLines; i++) {\r\n const angle = (i \/ numLines) * Math.PI * 2;\r\n const lineLength = Math.min(width, height) \/ 2 - 20;\r\n\r\n \/\/ Field line\r\n const startX = centerX + Math.cos(angle) * 18;\r\n const startY = centerY + Math.sin(angle) * 18;\r\n const endX = centerX + Math.cos(angle) * lineLength;\r\n const endY = centerY + Math.sin(angle) * lineLength;\r\n\r\n const grad = ctx.createLinearGradient(startX, startY, endX, endY);\r\n grad.addColorStop(0, 'rgba(251, 191, 36, 0.8)');\r\n grad.addColorStop(1, 'rgba(251, 191, 36, 0.1)');\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(startX, startY);\r\n ctx.lineTo(endX, endY);\r\n ctx.strokeStyle = grad;\r\n ctx.lineWidth = 1.5;\r\n ctx.stroke();\r\n\r\n \/\/ E vector on Gaussian surface\r\n const vecX = centerX + Math.cos(angle) * surfaceRadius;\r\n const vecY = centerY + Math.sin(angle) * surfaceRadius;\r\n\r\n ctx.save();\r\n ctx.translate(vecX, vecY);\r\n ctx.rotate(angle);\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(0, 0);\r\n ctx.lineTo(vectorLength, 0);\r\n ctx.strokeStyle = '#fbbf24';\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(vectorLength, 0);\r\n ctx.lineTo(vectorLength - 6, -4);\r\n ctx.lineTo(vectorLength - 6, 4);\r\n ctx.closePath();\r\n ctx.fillStyle = '#fbbf24';\r\n ctx.fill();\r\n \r\n ctx.restore();\r\n\r\n \/\/ dA vector - AUMENTADO\r\n const daLength = 28;\r\n ctx.beginPath();\r\n ctx.moveTo(vecX, vecY);\r\n ctx.lineTo(vecX + Math.cos(angle) * daLength, vecY + Math.sin(angle) * daLength);\r\n ctx.strokeStyle = '#a78bfa';\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n \r\n \/\/ dA arrow head\r\n const daEndX = vecX + Math.cos(angle) * daLength;\r\n const daEndY = vecY + Math.sin(angle) * daLength;\r\n ctx.save();\r\n ctx.translate(daEndX, daEndY);\r\n ctx.rotate(angle);\r\n ctx.beginPath();\r\n ctx.moveTo(0, 0);\r\n ctx.lineTo(-5, -3);\r\n ctx.lineTo(-5, 3);\r\n ctx.closePath();\r\n ctx.fillStyle = '#a78bfa';\r\n ctx.fill();\r\n ctx.restore();\r\n }\r\n\r\n \/\/ Central charge\r\n const chargeGrad = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 18);\r\n chargeGrad.addColorStop(0, '#ef4444');\r\n chargeGrad.addColorStop(1, '#b91c1c');\r\n ctx.beginPath();\r\n ctx.arc(centerX, centerY, 16, 0, Math.PI * 2);\r\n ctx.fillStyle = chargeGrad;\r\n ctx.fill();\r\n\r\n ctx.fillStyle = '#fff';\r\n ctx.font = 'bold 16px Roboto Mono';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText('+', centerX, centerY);\r\n\r\n \/\/ CAMBIADO: texto de carga m\u00e1s claro\r\n ctx.fillStyle = '#fecaca';\r\n ctx.font = '11px Roboto';\r\n ctx.fillText('Q = ' + (charge * 1e9).toFixed(2) + ' nC', centerX, centerY + 30);\r\n }\r\n\r\n function drawFieldChart() {\r\n const ctx = fieldChartCtx;\r\n const width = fieldChart.width;\r\n const height = fieldChart.height;\r\n const padding = 35;\r\n\r\n ctx.clearRect(0, 0, width, height);\r\n\r\n ctx.fillStyle = '#111827';\r\n ctx.fillRect(0, 0, width, height);\r\n\r\n const chartW = width - padding - 10;\r\n const chartH = height - padding - 15;\r\n\r\n \/\/ Axes\r\n ctx.strokeStyle = '#4b5563';\r\n ctx.lineWidth = 1;\r\n ctx.beginPath();\r\n ctx.moveTo(padding, 10);\r\n ctx.lineTo(padding, height - padding);\r\n ctx.lineTo(width - 10, height - padding);\r\n ctx.stroke();\r\n\r\n \/\/ Labels\r\n ctx.fillStyle = '#9ca3af';\r\n ctx.font = '10px Roboto';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('r (cm)', width \/ 2, height - 3);\r\n ctx.fillText('E', 10, height \/ 2);\r\n\r\n \/\/ Curve E vs r\r\n ctx.beginPath();\r\n for (let r = 20; r <= 150; r++) {\r\n const e = calculateEField(charge, r);\r\n const x = padding + ((r - 20) \/ 130) * chartW;\r\n const maxE = calculateEField(charge, 20);\r\n const y = (height - padding) - (e \/ maxE) * chartH * 0.9;\r\n \r\n if (r === 20) ctx.moveTo(x, y);\r\n else ctx.lineTo(x, y);\r\n }\r\n ctx.strokeStyle = '#fbbf24';\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n\r\n \/\/ Current point\r\n const currentE = calculateEField(charge, radius);\r\n const maxE = calculateEField(charge, 20);\r\n const pointX = padding + ((radius - 20) \/ 130) * chartW;\r\n const pointY = (height - padding) - (currentE \/ maxE) * chartH * 0.9;\r\n\r\n ctx.beginPath();\r\n ctx.arc(pointX, pointY, 5, 0, Math.PI * 2);\r\n ctx.fillStyle = '#fbbf24';\r\n ctx.fill();\r\n\r\n ctx.fillStyle = '#fbbf24';\r\n ctx.font = '10px Roboto Mono';\r\n ctx.fillText('r = ' + radius, pointX + 8, pointY - 5);\r\n }\r\n\r\n function drawFluxChart() {\r\n const ctx = fluxChartCtx;\r\n const width = fluxChart.width;\r\n const height = fluxChart.height;\r\n const padding = 35;\r\n\r\n ctx.clearRect(0, 0, width, height);\r\n\r\n ctx.fillStyle = '#111827';\r\n ctx.fillRect(0, 0, width, height);\r\n\r\n const chartW = width - padding - 10;\r\n const chartH = height - padding - 15;\r\n\r\n \/\/ Axes\r\n ctx.strokeStyle = '#4b5563';\r\n ctx.lineWidth = 1;\r\n ctx.beginPath();\r\n ctx.moveTo(padding, 10);\r\n ctx.lineTo(padding, height - padding);\r\n ctx.lineTo(width - 10, height - padding);\r\n ctx.stroke();\r\n\r\n \/\/ Labels\r\n ctx.fillStyle = '#9ca3af';\r\n ctx.font = '10px Roboto';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('r (cm)', width \/ 2, height - 3);\r\n ctx.fillText('\u03a6', 10, height \/ 2);\r\n\r\n \/\/ Horizontal line (constant flux)\r\n const fluxY = (height - padding + 10) \/ 2;\r\n ctx.beginPath();\r\n ctx.moveTo(padding, fluxY);\r\n ctx.lineTo(width - 10, fluxY);\r\n ctx.strokeStyle = '#22d3ee';\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n\r\n \/\/ Current point\r\n const pointX = padding + ((radius - 20) \/ 130) * chartW;\r\n\r\n ctx.beginPath();\r\n ctx.arc(pointX, fluxY, 5, 0, Math.PI * 2);\r\n ctx.fillStyle = '#22d3ee';\r\n ctx.fill();\r\n\r\n ctx.fillStyle = '#22d3ee';\r\n ctx.font = '10px Roboto Mono';\r\n ctx.fillText('r = ' + radius, pointX + 8, fluxY - 8);\r\n }\r\n\r\n function updateDisplays() {\r\n const eField = calculateEField(charge, radius);\r\n const flux = calculateFlux(charge);\r\n const area = calculateArea(radius);\r\n\r\n eFieldDisplay.textContent = formatExponential(eField) + ' N\/C';\r\n fluxDisplay.textContent = formatExponential(flux) + ' N\u00b7m\u00b2\/C';\r\n areaDisplay.textContent = formatExponential(area) + ' cm\u00b2';\r\n }\r\n\r\n function updateAll() {\r\n updateDisplays();\r\n drawMainVisualization();\r\n drawFieldChart();\r\n drawFluxChart();\r\n }\r\n\r\n chargeSlider.addEventListener('input', function(e) {\r\n charge = parseFloat(e.target.value) * 1e-9;\r\n chargeDisplay.textContent = e.target.value + ' nC';\r\n updateAll();\r\n });\r\n\r\n radiusSlider.addEventListener('input', function(e) {\r\n radius = parseInt(e.target.value);\r\n radiusDisplay.textContent = radius + ' cm';\r\n updateAll();\r\n });\r\n\r\n updateAll();\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>Ley de Gauss – Visualizaci\u00f3n del Campo El\u00e9ctrico VISUALIZACI\u00d3N DEL CAMPO EL\u00c9CTRICO Ley de Gauss de la Electrost\u00e1tica Carga positiva Q Vector campo el\u00e9ctrico E…<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-6030","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>ley_de_gauss_carga_puntual - F\u00edsica 2<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ley_de_gauss_carga_puntual - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"Ley de Gauss – Visualizaci\u00f3n del Campo El\u00e9ctrico VISUALIZACI\u00d3N DEL CAMPO EL\u00c9CTRICO Ley de Gauss de la Electrost\u00e1tica Carga positiva Q Vector campo el\u00e9ctrico E…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-19T17:44:25+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_gauss_carga_puntual\/\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/\",\"name\":\"ley_de_gauss_carga_puntual - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#website\"},\"datePublished\":\"2026-03-10T12:37:44+00:00\",\"dateModified\":\"2026-03-19T17:44:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/fisica2.fica.unsl.edu.ar\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ley_de_gauss_carga_puntual\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#website\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/\",\"name\":\"F\u00edsica 2\",\"description\":\"FICA - UNSL\",\"publisher\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fisica2.fica.unsl.edu.ar\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-AR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#organization\",\"name\":\"SAC- Secretar\u00eda General FICA\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png\",\"contentUrl\":\"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png\",\"width\":4483,\"height\":1231,\"caption\":\"SAC- Secretar\u00eda General FICA\"},\"image\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"ley_de_gauss_carga_puntual - F\u00edsica 2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/","og_locale":"es_ES","og_type":"article","og_title":"ley_de_gauss_carga_puntual - F\u00edsica 2","og_description":"Ley de Gauss – Visualizaci\u00f3n del Campo El\u00e9ctrico VISUALIZACI\u00d3N DEL CAMPO EL\u00c9CTRICO Ley de Gauss de la Electrost\u00e1tica Carga positiva Q Vector campo el\u00e9ctrico E…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-03-19T17:44:25+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_gauss_carga_puntual\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/","name":"ley_de_gauss_carga_puntual - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-03-10T12:37:44+00:00","dateModified":"2026-03-19T17:44:25+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"ley_de_gauss_carga_puntual"}]},{"@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\/6030","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=6030"}],"version-history":[{"count":46,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6030\/revisions"}],"predecessor-version":[{"id":6685,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6030\/revisions\/6685"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=6030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

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

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

\n\t\t\t

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

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Ley de Gauss - Visualizaci\u00f3n del Campo El\u00e9ctrico<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --bg-main: #1f2937;\r\n --bg-card: #374151;\r\n --bg-input: #4b5563;\r\n --text-primary: #f3f4f6;\r\n --text-secondary: #9ca3af;\r\n --accent-yellow: #fbbf24;\r\n --accent-cyan: #22d3ee;\r\n --accent-red: #ef4444;\r\n --formula-color: #fef3c7;\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: 'Roboto', sans-serif;\r\n background: var(--bg-main);\r\n color: var(--text-primary);\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n\r\n .formula-text {\r\n font-family: 'Roboto Mono', monospace;\r\n color: var(--formula-color);\r\n font-weight: 500;\r\n }\r\n\r\n .card {\r\n background: var(--bg-card);\r\n border-radius: 8px;\r\n padding: 16px;\r\n }\r\n\r\n .input-field {\r\n background: var(--bg-input);\r\n border: none;\r\n border-radius: 4px;\r\n padding: 8px 12px;\r\n color: var(--text-primary);\r\n font-family: 'Roboto Mono', monospace;\r\n }\r\n\r\n input[type=\"range\"] {\r\n -webkit-appearance: none;\r\n width: 100%;\r\n height: 6px;\r\n background: var(--bg-input);\r\n border-radius: 3px;\r\n outline: none;\r\n }\r\n\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n width: 18px;\r\n height: 18px;\r\n background: var(--accent-yellow);\r\n border-radius: 50%;\r\n cursor: pointer;\r\n }\r\n\r\n .visualization-box {\r\n background: #111827;\r\n border-radius: 8px;\r\n border: 1px solid #4b5563;\r\n }\r\n\r\n .chart-box {\r\n background: #111827;\r\n border-radius: 8px;\r\n border: 1px solid #4b5563;\r\n padding: 12px;\r\n }\r\n\r\n .logo-box {\r\n \r\n border-radius: 6px;\r\n padding: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 60px;\r\n }\r\n\r\n .logo-box img {\r\n max-height: 30px;\r\n object-fit: contain;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"max-w-6xl mx-auto\">\r\n \r\n <div class=\"mb-6\">\r\n <h1 class=\"text-2xl font-bold mb-2\">VISUALIZACI\u00d3N DEL CAMPO EL\u00c9CTRICO<\/h1>\r\n <p class=\"text-sm\" style=\"color: var(--text-secondary);\">Ley de Gauss de la Electrost\u00e1tica<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid lg:grid-cols-3 gap-4\">\r\n \r\n <div class=\"lg:col-span-2 space-y-4\">\r\n \r\n <div class=\"visualization-box p-4\">\r\n <canvas id=\"mainCanvas\" width=\"600\" height=\"350\"><\/canvas>\r\n \r\n \r\n <div class=\"flex flex-wrap gap-4 mt-3 text-xs\" style=\"color: var(--text-secondary);\">\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"w-3 h-3 rounded-full\" style=\"background: var(--accent-red);\"><\/div>\r\n <span>Carga positiva Q<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"w-3 h-3 rounded-full\" style=\"background: var(--accent-yellow);\"><\/div>\r\n <span>Vector campo el\u00e9ctrico E<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"w-3 h-3 rounded-full border-2\" style=\"border-color: var(--accent-cyan);\"><\/div>\r\n <span>Superficie gaussiana<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"w-3 h-3 rounded-full\" style=\"background: #a78bfa;\"><\/div>\r\n <span>Vector \u00e1rea dA<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid md:grid-cols-2 gap-4\">\r\n \r\n <div class=\"chart-box\">\r\n <h3 class=\"text-sm font-medium mb-3\" style=\"color: var(--text-secondary);\">CAMPO EL\u00c9CTRICO VS RADIO<\/h3>\r\n <canvas id=\"fieldChart\" width=\"280\" height=\"180\"><\/canvas>\r\n <\/div>\r\n\r\n \r\n <div class=\"chart-box\">\r\n <h3 class=\"text-sm font-medium mb-3\" style=\"color: var(--text-secondary);\">FLUJO EL\u00c9CTRICO VS RADIO<\/h3>\r\n <canvas id=\"fluxChart\" width=\"280\" height=\"180\"><\/canvas>\r\n \r\n \r\n <br><br>\r\n \r\n\r\n<div class=\"logo-box\">\r\n <a href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/FISAR_SIM\/\" target=\"_blank\">\r\n <img decoding=\"async\" src=\"FISAR_SIM_1\" alt=\"Logo\" class=\"logo-img\"><\/a>\r\n <div class=\"block text-sm mb-2\" style=\"color: var(--text-secondary);\"<b> Simulaciones Interactivas<\/b> FICA UNSL<\/div>\r\n<\/div>\r\n\r\n \r\n \r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-4\">\r\n \r\n <div class=\"card\">\r\n <label class=\"block text-sm mb-2\" style=\"color: var(--text-secondary);\">Carga el\u00e9ctrica (Q)<\/label>\r\n <input type=\"range\" id=\"chargeSlider\" min=\"0.5\" max=\"10\" step=\"0.01\" value=\"3.18\">\r\n <div class=\"flex justify-between mt-2\">\r\n <span class=\"input-field text-sm\" id=\"chargeDisplay\">3.18 nC<\/span>\r\n <span class=\"text-xs\" style=\"color: var(--text-secondary);\">0.5 - 10 nC<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"card\">\r\n <label class=\"block text-sm mb-2\" style=\"color: var(--text-secondary);\">Radio de la superficie gaussiana (r)<\/label>\r\n <input type=\"range\" id=\"radiusSlider\" min=\"20\" max=\"150\" step=\"1\" value=\"80\">\r\n <div class=\"flex justify-between mt-2\">\r\n <span class=\"input-field text-sm\" id=\"radiusDisplay\">80 cm<\/span>\r\n <span class=\"text-xs\" style=\"color: var(--text-secondary);\">20 - 150 cm<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"card space-y-3\">\r\n <h3 class=\"text-sm font-medium\" style=\"color: var(--text-secondary);\">DATOS CALCULADOS<\/h3>\r\n \r\n <div class=\"flex justify-between items-center py-2 border-b\" style=\"border-color: #4b5563;\">\r\n <span class=\"text-sm\">Campo el\u00e9ctrico (E)<\/span>\r\n <span class=\"input-field text-sm\" id=\"eFieldDisplay\">4.47e+5 N\/C<\/span>\r\n <\/div>\r\n \r\n <div class=\"flex justify-between items-center py-2 border-b\" style=\"border-color: #4b5563;\">\r\n <span class=\"text-sm\">Flujo el\u00e9ctrico (\u03a6)<\/span>\r\n <span class=\"input-field text-sm\" id=\"fluxDisplay\">3.59e+2 N\u00b7m\u00b2\/C<\/span>\r\n <\/div>\r\n \r\n <div class=\"flex justify-between items-center py-2 border-b\" style=\"border-color: #4b5563;\">\r\n <span class=\"text-sm\">\u00c1rea superficie<\/span>\r\n <span class=\"input-field text-sm\" id=\"areaDisplay\">8.04e+4 cm\u00b2<\/span>\r\n <\/div>\r\n \r\n <div class=\"flex justify-between items-center py-2\">\r\n <span class=\"text-sm\">\u00c1ngulo \u03b8<\/span>\r\n <span class=\"input-field text-sm\">0\u00b0<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"card\">\r\n <h3 class=\"text-sm font-medium mb-3\" style=\"color: var(--text-secondary);\">F\u00d3RMULAS<\/h3>\r\n <div class=\"space-y-2 text-sm\">\r\n <p><span class=\"formula-text\">E = Q \/ (4\u03c0\u03b5\u2080r\u00b2)<\/span><\/p>\r\n <p><span class=\"formula-text\">\u03a6 = Q \/ \u03b5\u2080<\/span><\/p>\r\n <p><span class=\"formula-text\">\u222e E\u20d7 \u00b7 dA\u20d7 = Q_enc \/ \u03b5\u2080<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const EPSILON_0 = 8.854e-12;\r\n const K = 8.99e9;\r\n\r\n let charge = 3.18e-9;\r\n let radius = 80;\r\n\r\n const mainCanvas = document.getElementById('mainCanvas');\r\n const mainCtx = mainCanvas.getContext('2d');\r\n const fieldChart = document.getElementById('fieldChart');\r\n const fieldChartCtx = fieldChart.getContext('2d');\r\n const fluxChart = document.getElementById('fluxChart');\r\n const fluxChartCtx = fluxChart.getContext('2d');\r\n\r\n const chargeSlider = document.getElementById('chargeSlider');\r\n const radiusSlider = document.getElementById('radiusSlider');\r\n const chargeDisplay = document.getElementById('chargeDisplay');\r\n const radiusDisplay = document.getElementById('radiusDisplay');\r\n const eFieldDisplay = document.getElementById('eFieldDisplay');\r\n const fluxDisplay = document.getElementById('fluxDisplay');\r\n const areaDisplay = document.getElementById('areaDisplay');\r\n\r\n function calculateEField(Q, r) {\r\n const rMeters = r * 0.01;\r\n return K * Q \/ (rMeters * rMeters);\r\n }\r\n\r\n function calculateFlux(Q) {\r\n return Q \/ EPSILON_0;\r\n }\r\n\r\n function calculateArea(r) {\r\n return 4 * Math.PI * r * r;\r\n }\r\n\r\n function formatExponential(num) {\r\n return num.toExponential(2);\r\n }\r\n\r\n function drawMainVisualization() {\r\n const ctx = mainCtx;\r\n const width = mainCanvas.width;\r\n const height = mainCanvas.height;\r\n const centerX = width \/ 2;\r\n const centerY = height \/ 2;\r\n\r\n ctx.clearRect(0, 0, width, height);\r\n\r\n ctx.fillStyle = '#111827';\r\n ctx.fillRect(0, 0, width, height);\r\n\r\n const surfaceRadius = Math.max(20, Math.min(radius * 1.5, Math.min(width, height) \/ 2 - 40));\r\n\r\n \/\/ Gaussian surface\r\n ctx.beginPath();\r\n ctx.arc(centerX, centerY, surfaceRadius, 0, Math.PI * 2);\r\n ctx.strokeStyle = '#22d3ee';\r\n ctx.lineWidth = 2;\r\n ctx.setLineDash([6, 4]);\r\n ctx.stroke();\r\n ctx.setLineDash([]);\r\n\r\n \/\/ Label\r\n ctx.fillStyle = '#22d3ee';\r\n ctx.font = '12px Roboto';\r\n ctx.fillText('r = ' + radius + ' cm', centerX + surfaceRadius + 8, centerY);\r\n\r\n \/\/ Field lines and vectors\r\n const numLines = 12;\r\n const eField = calculateEField(charge, radius);\r\n const maxE = calculateEField(charge, 20);\r\n const eRatio = Math.sqrt(eField \/ maxE);\r\n const vectorLength = Math.max(8, Math.min(30, eRatio * 30));\r\n\r\n for (let i = 0; i < numLines; i++) {\r\n const angle = (i \/ numLines) * Math.PI * 2;\r\n const lineLength = Math.min(width, height) \/ 2 - 20;\r\n\r\n \/\/ Field line\r\n const startX = centerX + Math.cos(angle) * 18;\r\n const startY = centerY + Math.sin(angle) * 18;\r\n const endX = centerX + Math.cos(angle) * lineLength;\r\n const endY = centerY + Math.sin(angle) * lineLength;\r\n\r\n const grad = ctx.createLinearGradient(startX, startY, endX, endY);\r\n grad.addColorStop(0, 'rgba(251, 191, 36, 0.8)');\r\n grad.addColorStop(1, 'rgba(251, 191, 36, 0.1)');\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(startX, startY);\r\n ctx.lineTo(endX, endY);\r\n ctx.strokeStyle = grad;\r\n ctx.lineWidth = 1.5;\r\n ctx.stroke();\r\n\r\n \/\/ E vector on Gaussian surface\r\n const vecX = centerX + Math.cos(angle) * surfaceRadius;\r\n const vecY = centerY + Math.sin(angle) * surfaceRadius;\r\n\r\n ctx.save();\r\n ctx.translate(vecX, vecY);\r\n ctx.rotate(angle);\r\n \r\n ctx.beginPath();\r\n ctx.moveTo(0, 0);\r\n ctx.lineTo(vectorLength, 0);\r\n ctx.strokeStyle = '#fbbf24';\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(vectorLength, 0);\r\n ctx.lineTo(vectorLength - 6, -4);\r\n ctx.lineTo(vectorLength - 6, 4);\r\n ctx.closePath();\r\n ctx.fillStyle = '#fbbf24';\r\n ctx.fill();\r\n \r\n ctx.restore();\r\n\r\n \/\/ dA vector - AUMENTADO\r\n const daLength = 28;\r\n ctx.beginPath();\r\n ctx.moveTo(vecX, vecY);\r\n ctx.lineTo(vecX + Math.cos(angle) * daLength, vecY + Math.sin(angle) * daLength);\r\n ctx.strokeStyle = '#a78bfa';\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n \r\n \/\/ dA arrow head\r\n const daEndX = vecX + Math.cos(angle) * daLength;\r\n const daEndY = vecY + Math.sin(angle) * daLength;\r\n ctx.save();\r\n ctx.translate(daEndX, daEndY);\r\n ctx.rotate(angle);\r\n ctx.beginPath();\r\n ctx.moveTo(0, 0);\r\n ctx.lineTo(-5, -3);\r\n ctx.lineTo(-5, 3);\r\n ctx.closePath();\r\n ctx.fillStyle = '#a78bfa';\r\n ctx.fill();\r\n ctx.restore();\r\n }\r\n\r\n \/\/ Central charge\r\n const chargeGrad = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 18);\r\n chargeGrad.addColorStop(0, '#ef4444');\r\n chargeGrad.addColorStop(1, '#b91c1c');\r\n ctx.beginPath();\r\n ctx.arc(centerX, centerY, 16, 0, Math.PI * 2);\r\n ctx.fillStyle = chargeGrad;\r\n ctx.fill();\r\n\r\n ctx.fillStyle = '#fff';\r\n ctx.font = 'bold 16px Roboto Mono';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText('+', centerX, centerY);\r\n\r\n \/\/ CAMBIADO: texto de carga m\u00e1s claro\r\n ctx.fillStyle = '#fecaca';\r\n ctx.font = '11px Roboto';\r\n ctx.fillText('Q = ' + (charge * 1e9).toFixed(2) + ' nC', centerX, centerY + 30);\r\n }\r\n\r\n function drawFieldChart() {\r\n const ctx = fieldChartCtx;\r\n const width = fieldChart.width;\r\n const height = fieldChart.height;\r\n const padding = 35;\r\n\r\n ctx.clearRect(0, 0, width, height);\r\n\r\n ctx.fillStyle = '#111827';\r\n ctx.fillRect(0, 0, width, height);\r\n\r\n const chartW = width - padding - 10;\r\n const chartH = height - padding - 15;\r\n\r\n \/\/ Axes\r\n ctx.strokeStyle = '#4b5563';\r\n ctx.lineWidth = 1;\r\n ctx.beginPath();\r\n ctx.moveTo(padding, 10);\r\n ctx.lineTo(padding, height - padding);\r\n ctx.lineTo(width - 10, height - padding);\r\n ctx.stroke();\r\n\r\n \/\/ Labels\r\n ctx.fillStyle = '#9ca3af';\r\n ctx.font = '10px Roboto';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('r (cm)', width \/ 2, height - 3);\r\n ctx.fillText('E', 10, height \/ 2);\r\n\r\n \/\/ Curve E vs r\r\n ctx.beginPath();\r\n for (let r = 20; r <= 150; r++) {\r\n const e = calculateEField(charge, r);\r\n const x = padding + ((r - 20) \/ 130) * chartW;\r\n const maxE = calculateEField(charge, 20);\r\n const y = (height - padding) - (e \/ maxE) * chartH * 0.9;\r\n \r\n if (r === 20) ctx.moveTo(x, y);\r\n else ctx.lineTo(x, y);\r\n }\r\n ctx.strokeStyle = '#fbbf24';\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n\r\n \/\/ Current point\r\n const currentE = calculateEField(charge, radius);\r\n const maxE = calculateEField(charge, 20);\r\n const pointX = padding + ((radius - 20) \/ 130) * chartW;\r\n const pointY = (height - padding) - (currentE \/ maxE) * chartH * 0.9;\r\n\r\n ctx.beginPath();\r\n ctx.arc(pointX, pointY, 5, 0, Math.PI * 2);\r\n ctx.fillStyle = '#fbbf24';\r\n ctx.fill();\r\n\r\n ctx.fillStyle = '#fbbf24';\r\n ctx.font = '10px Roboto Mono';\r\n ctx.fillText('r = ' + radius, pointX + 8, pointY - 5);\r\n }\r\n\r\n function drawFluxChart() {\r\n const ctx = fluxChartCtx;\r\n const width = fluxChart.width;\r\n const height = fluxChart.height;\r\n const padding = 35;\r\n\r\n ctx.clearRect(0, 0, width, height);\r\n\r\n ctx.fillStyle = '#111827';\r\n ctx.fillRect(0, 0, width, height);\r\n\r\n const chartW = width - padding - 10;\r\n const chartH = height - padding - 15;\r\n\r\n \/\/ Axes\r\n ctx.strokeStyle = '#4b5563';\r\n ctx.lineWidth = 1;\r\n ctx.beginPath();\r\n ctx.moveTo(padding, 10);\r\n ctx.lineTo(padding, height - padding);\r\n ctx.lineTo(width - 10, height - padding);\r\n ctx.stroke();\r\n\r\n \/\/ Labels\r\n ctx.fillStyle = '#9ca3af';\r\n ctx.font = '10px Roboto';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('r (cm)', width \/ 2, height - 3);\r\n ctx.fillText('\u03a6', 10, height \/ 2);\r\n\r\n \/\/ Horizontal line (constant flux)\r\n const fluxY = (height - padding + 10) \/ 2;\r\n ctx.beginPath();\r\n ctx.moveTo(padding, fluxY);\r\n ctx.lineTo(width - 10, fluxY);\r\n ctx.strokeStyle = '#22d3ee';\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n\r\n \/\/ Current point\r\n const pointX = padding + ((radius - 20) \/ 130) * chartW;\r\n\r\n ctx.beginPath();\r\n ctx.arc(pointX, fluxY, 5, 0, Math.PI * 2);\r\n ctx.fillStyle = '#22d3ee';\r\n ctx.fill();\r\n\r\n ctx.fillStyle = '#22d3ee';\r\n ctx.font = '10px Roboto Mono';\r\n ctx.fillText('r = ' + radius, pointX + 8, fluxY - 8);\r\n }\r\n\r\n function updateDisplays() {\r\n const eField = calculateEField(charge, radius);\r\n const flux = calculateFlux(charge);\r\n const area = calculateArea(radius);\r\n\r\n eFieldDisplay.textContent = formatExponential(eField) + ' N\/C';\r\n fluxDisplay.textContent = formatExponential(flux) + ' N\u00b7m\u00b2\/C';\r\n areaDisplay.textContent = formatExponential(area) + ' cm\u00b2';\r\n }\r\n\r\n function updateAll() {\r\n updateDisplays();\r\n drawMainVisualization();\r\n drawFieldChart();\r\n drawFluxChart();\r\n }\r\n\r\n chargeSlider.addEventListener('input', function(e) {\r\n charge = parseFloat(e.target.value) * 1e-9;\r\n chargeDisplay.textContent = e.target.value + ' nC';\r\n updateAll();\r\n });\r\n\r\n radiusSlider.addEventListener('input', function(e) {\r\n radius = parseInt(e.target.value);\r\n radiusDisplay.textContent = radius + ' cm';\r\n updateAll();\r\n });\r\n\r\n updateAll();\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>Ley de Gauss – Visualizaci\u00f3n del Campo El\u00e9ctrico VISUALIZACI\u00d3N DEL CAMPO EL\u00c9CTRICO Ley de Gauss de la Electrost\u00e1tica Carga positiva Q Vector campo el\u00e9ctrico E…<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-6030","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>ley_de_gauss_carga_puntual - F\u00edsica 2<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ley_de_gauss_carga_puntual - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"Ley de Gauss – Visualizaci\u00f3n del Campo El\u00e9ctrico VISUALIZACI\u00d3N DEL CAMPO EL\u00c9CTRICO Ley de Gauss de la Electrost\u00e1tica Carga positiva Q Vector campo el\u00e9ctrico E…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-19T17:44:25+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_gauss_carga_puntual\/\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/\",\"name\":\"ley_de_gauss_carga_puntual - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#website\"},\"datePublished\":\"2026-03-10T12:37:44+00:00\",\"dateModified\":\"2026-03-19T17:44:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/fisica2.fica.unsl.edu.ar\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ley_de_gauss_carga_puntual\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#website\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/\",\"name\":\"F\u00edsica 2\",\"description\":\"FICA - UNSL\",\"publisher\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fisica2.fica.unsl.edu.ar\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-AR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#organization\",\"name\":\"SAC- Secretar\u00eda General FICA\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png\",\"contentUrl\":\"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png\",\"width\":4483,\"height\":1231,\"caption\":\"SAC- Secretar\u00eda General FICA\"},\"image\":{\"@id\":\"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"ley_de_gauss_carga_puntual - F\u00edsica 2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/","og_locale":"es_ES","og_type":"article","og_title":"ley_de_gauss_carga_puntual - F\u00edsica 2","og_description":"Ley de Gauss – Visualizaci\u00f3n del Campo El\u00e9ctrico VISUALIZACI\u00d3N DEL CAMPO EL\u00c9CTRICO Ley de Gauss de la Electrost\u00e1tica Carga positiva Q Vector campo el\u00e9ctrico E…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-03-19T17:44:25+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_gauss_carga_puntual\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/","name":"ley_de_gauss_carga_puntual - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-03-10T12:37:44+00:00","dateModified":"2026-03-19T17:44:25+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/ley_de_gauss_carga_puntual\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"ley_de_gauss_carga_puntual"}]},{"@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\/6030","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=6030"}],"version-history":[{"count":46,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6030\/revisions"}],"predecessor-version":[{"id":6685,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/6030\/revisions\/6685"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=6030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}