

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simulación de conservación del momento lineal - Simulación interactiva gratuita | Simulaciones científicas</title>
    <meta name="description" content="Explora la conservación del impulso mediante experimentos interactivos de colisiones (HS-PS2-2). Analiza colisiones elásticas e inelásticas con visualización de datos en tiempo real.">
    <meta name="author" content="Nicklaus Cairns">
    
      <meta name="keywords" content="science, simulation, NGSS, education, interactive">
    
    <link rel="canonical" href="https://sims.science/es/simulaciones/ciencias-fisicas/simulacion-conservacion-del-momento/">
    <meta property="og:url" content="https://sims.science/es/simulaciones/ciencias-fisicas/simulacion-conservacion-del-momento/">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Simulación de conservación del momento lineal - Simulación interactiva gratuita | Simulaciones científicas">
    <meta property="og:description" content="Explora la conservación del impulso mediante experimentos interactivos de colisiones (HS-PS2-2). Analiza colisiones elásticas e inelásticas con visualización de datos en tiempo real.">
    <meta property="og:locale" content="es-419">
    <meta property="og:image" content="https://sims.science/assets/images/og_previews/conservation-of-momentum-simulation.webp">
    <meta name="og:image:secure_url" content="https://sims.science/assets/images/og_previews/conservation-of-momentum-simulation.webp">
    <meta property="og:image:type" content="image/webp">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Simulación de conservación del momento lineal - Simulación interactiva gratuita | Simulaciones científicas">
    <meta name="twitter:description" content="Explora la conservación del impulso mediante experimentos interactivos de colisiones (HS-PS2-2). Analiza colisiones elásticas e inelásticas con visualización de datos en tiempo real.">
    <meta name="twitter:image" content="https://sims.science/assets/images/og_previews/conservation-of-momentum-simulation.webp">
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "LearningResource",
        "name": "Simulación de conservación del momento lineal - Simulación interactiva gratuita | Simulaciones científicas",
        "description": "Explora la conservación del impulso mediante experimentos interactivos de colisiones (HS-PS2-2). Analiza colisiones elásticas e inelásticas con visualización de datos en tiempo real.",
        "url": "https://sims.science/es/simulaciones/ciencias-fisicas/simulacion-conservacion-del-momento/",
        "learningResourceType": "Simulación interactiva",
        "inLanguage": "es-419",
        "educationalLevel": "Escuela secundaria",
        "interactivityType": "active",
        "author": {
          "@type": "Person",
          "name": "Nicklaus Cairns",
          "url": "https://sims.science"
        },
        "publisher": {
          "@type": "Person",
          "name": "Simulaciones científicas",
          "url": "https://sims.science"
        },
        "educationalAlignment": {
          "@type": "AlignmentObject",
          "alignmentType": "educational framework",
          "educationalFramework": "Next Generation Science Standards (NGSS)",
          "targetName": "HS-PS2-2",
          "targetUrl": "https://www.nextgenscience.org/pe/hs-ps2-2"
        }
      }
    </script>
    
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Inicio",
            "item": "https://sims.science/es/"
          },
          {
            "@type": "ListItem",
            "position": 2,
            "name": "Ciencias físicas",
            "item": "https://sims.science/es/simulaciones/ciencias-fisicas/"
          },
          {
            "@type": "ListItem",
            "position": 3,
            "name": "Simulación de conservación del momento",
            "item": "https://sims.science/es/simulaciones/ciencias-fisicas/simulacion-conservacion-del-momento/"
          }
        ]
      }
    </script>
    
    <!--
      PERF BUDGET: style.css (~20K) render-blocking with fetchpriority="high".
      shared-layout.css (~20K) non-blocking.
      Total render-blocking CSS target: <30K for sim pages.
    -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!--
      PERF BUDGET: Preload Inter font for sim layout to prevent FOIT (Flash of Invisible Text).
      At ~16K woff2 this is negligible but prevents layout shift.
    -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" as="style" onload="this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"></noscript>
    <link rel="preload" href="/assets/css/style.css?v=860946c8580b63be9471a3affe622ab52c574d69" as="style">
    <link rel="stylesheet" href="/assets/css/style.css?v=860946c8580b63be9471a3affe622ab52c574d69" fetchpriority="high">
    <link rel="stylesheet" href="/assets/css/shared-layout.css?v=860946c8580b63be9471a3affe622ab52c574d69">
    <link rel="stylesheet" href="/assets/css/sim-auth-gate.css?v=860946c8580b63be9471a3affe622ab52c574d69">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- Resource hints for third-party services -->
<link rel="preconnect" href="https://www.googletagmanager.com">
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link rel="preconnect" href="https://cdn.jsdelivr.net">

<!-- Consent and Analytics Script (loads on all pages) -->
<script src="/assets/js/consent.js" defer></script>

<!--
  PERF BUDGET: AI Feedback Panel scripts load ONLY on simulation pages.
  Total size: ~34K (sim-contexts.js: 11K + ai-feedback-panel.js: 23K).
  These add ~0.4s parse time. If latency budget is exceeded, consider
  lazy-loading the AI feedback module on user interaction with a Feedback button.
-->

<!-- AI Feedback Panel — Styles -->
<link rel="stylesheet" href="/assets/css/ai-feedback.css?v=860946c8580b63be9471a3affe622ab52c574d69">
<!-- AI Feedback Panel — Context config -->
<script src="/assets/js/sim-contexts.js?v=860946c8580b63be9471a3affe622ab52c574d69" defer></script>
<!-- AI Feedback Panel — Main logic -->
<script src="/assets/js/ai-feedback-panel.js?v=860946c8580b63be9471a3affe622ab52c574d69" defer></script>


    <style>
      html {
        height: 100%;
      }

      body.simulation-layout-body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background: #0f172a;
        color: #f8fafc;
        font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      }

      .simulation-layout-body > .site-nav {
        flex-shrink: 0;
        background: rgba(15, 23, 42, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
      }

      .simulation-layout-body .site-nav-brand {
        color: #f8fafc;
      }

      .simulation-layout-body .site-nav-brand:hover {
        color: #38bdf8;
      }

      .simulation-layout-body .site-nav-links a {
        color: #e2e8f0;
      }

      .simulation-layout-body .site-nav-links a:hover,
      .simulation-layout-body .site-nav-links a[aria-current="page"] {
        background: rgba(255, 255, 255, 0.1);
        color: #f8fafc;
      }

      .simulation-layout-body .site-locale-switcher a {
        color: #94a3b8;
      }

      .simulation-layout-body .site-locale-switcher a:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .simulation-layout-body .site-nav-toggle {
        color: #cbd5e1;
        border-color: rgba(148, 163, 184, 0.3);
      }

      /* WCAG 2.4.7: Focus indicators — visible focus ring on all interactive elements */
      a:focus-visible,
      button:focus-visible,
      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible,
      [tabindex]:not([tabindex="-1"]):focus-visible {
        outline: 2px solid #38bdf8;
        outline-offset: 2px;
        border-radius: 2px;
      }

      /* Ensure slider thumbs also have visible focus */
      input[type="range"]:focus-visible::-webkit-slider-thumb {
        outline: 2px solid #38bdf8;
        outline-offset: 3px;
      }
      input[type="range"]:focus-visible::-moz-range-thumb {
        outline: 2px solid #38bdf8;
        outline-offset: 3px;
      }

      .simulation-layout-body .site-nav-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .simulation-layout-main {
        flex: 1 1 auto;
        min-height: 0;
        position: relative;
      }

      .simulation-layout-footer {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 0.75rem 1rem;
        border-top: 1px solid rgba(148, 163, 184, 0.25);
        background: #111827;
        color: #cbd5e1;
        font-size: 0.875rem;
        font-family: 'Inter', system-ui, sans-serif;
      }

      .simulation-layout-footer p {
        margin: 0;
      }

      .simulation-layout-footer a {
        color: #93c5fd;
        text-decoration: underline;
        text-underline-offset: 2px;
      }

      @media (max-width: 640px) {
        .simulation-layout-footer {
          flex-direction: column;
          align-items: flex-start;
        }
      }

      /* ===== EMBED MODE ===== */
      body.embed-mode .site-nav,
      body.embed-mode .simulation-layout-footer,
      body.embed-mode .sr-only,
      body.embed-mode .sim-share-btn {
        display: none !important;
      }

      body.embed-mode {
        background: #0f172a;
      }

      body.embed-mode .simulation-layout-main {
        flex: 1 1 auto;
        min-height: 100vh;
      }

      /* ===== SHARE BUTTON ===== */
      .sim-share-btn {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        z-index: 999;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.5rem 1rem;
        border: 1px solid rgba(148, 163, 184, 0.3);
        border-radius: 0.5rem;
        background: #1e293b;
        color: #cbd5e1;
        font-size: 0.8125rem;
        font-family: 'Inter', system-ui, sans-serif;
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      }

      .sim-share-btn:hover {
        background: #334155;
        color: #f8fafc;
      }

      .sim-share-btn:active {
        background: #475569;
      }

      .sim-share-btn svg {
        width: 1em;
        height: 1em;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .sim-share-btn[data-copied="true"] {
        background: #065f46;
        border-color: #10b981;
        color: #a7f3d0;
      }

      /* ===== HELP TOOLTIPS ===== */
      [data-tooltip] {
        position: relative;
        cursor: help;
      }

      [data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        padding: 0.4rem 0.75rem;
        border-radius: 6px;
        background: #1e293b;
        color: #e2e8f0;
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s ease, transform 0.15s ease;
        transform: translateX(-50%) translateY(4px);
        z-index: 9999;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        border: 1px solid rgba(148, 163, 184, 0.2);
        max-width: 280px;
        white-space: normal;
        text-align: center;
      }

      [data-tooltip]:hover::after,
      [data-tooltip]:focus::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }

      /* Tooltip on the right side for elements near the top */
      [data-tooltip-position="right"]::after {
        bottom: auto;
        top: 50%;
        left: calc(100% + 8px);
        transform: translateY(-50%) translateX(-4px);
      }

      [data-tooltip-position="right"]:hover::after,
      [data-tooltip-position="right"]:focus::after {
        transform: translateY(-50%) translateX(0);
      }

      /* Tooltip on the bottom */
      [data-tooltip-position="bottom"]::after {
        bottom: auto;
        top: calc(100% + 8px);
        transform: translateX(-50%) translateY(-4px);
      }

      [data-tooltip-position="bottom"]:hover::after,
      [data-tooltip-position="bottom"]:focus::after {
        transform: translateX(-50%) translateY(0);
      }

      /* Mobile: cap max-width */
      @media (max-width: 480px) {
        [data-tooltip]::after {
          max-width: 200px;
          font-size: 0.7rem;
          padding: 0.3rem 0.6rem;
        }
        [data-tooltip-position="right"]::after {
          left: auto;
          right: calc(100% + 8px);
        }
      }
    </style>
  </head>
  <body class="simulation-layout-body bg-gray-50 text-gray-800 font-sans p-6">
    
    <script>!function(){var e=location.search;if(e&&(e.indexOf('embed=1')>-1||e.indexOf('embed=true')>-1)){document.documentElement.classList.add('embed-mode');document.body&&document.body.classList.add('embed-mode')}}();</script>
    <a href="#main-content" class="sr-only sr-only-focusable">
      Saltar al contenido principal
    </a>
    

<nav class="site-nav" id="site-nav" aria-label="Main navigation">
  <a href="https://sims.science/es/" class="site-nav-brand">
    sims.science
  </a>

  <button class="site-nav-toggle" id="nav-toggle" aria-label="Alternar navegación" aria-expanded="false" aria-controls="nav-links">
    <svg viewBox="0 0 24 24">
      <line x1="3" y1="12" x2="21" y2="12"></line>
      <line x1="3" y1="6" x2="21" y2="6"></line>
      <line x1="3" y1="18" x2="21" y2="18"></line>
    </svg>
  </button>

  <div class="site-nav-links" id="nav-links">
    
      <a href="https://sims.science/es/simulaciones/" >Todas las simulaciones</a>
      <a href="https://sims.science/es/simulaciones/ciencias-fisicas/" >Ciencias físicas</a>
      <a href="https://sims.science/es/simulaciones/ciencias-de-la-vida/" >Ciencias de la vida</a>
      <a href="https://sims.science/es/simulaciones/ciencias-de-la-tierra-y-el-espacio/" >Tierra y Espacio</a>
      <a href="https://sims.science/es/student/dashboard/" >Mi Progreso</a>
      <a href="https://sims.science/es/teacher/dashboard/" >Panel del Docente</a>
      <a href="https://sims.science/es/#about">Acerca de</a>
    
    
    <div id="locale-switcher" class="site-locale-switcher" role="group" aria-label="Language switcher" data-slug-map-url="/assets/data/navbar-slug-map.json?v=860946c8580b63be9471a3affe622ab52c574d69">
      <!-- Locale links injected by /assets/js/navbar.js -->
    </div>
    
  </div>
</nav>

<script src="/assets/js/navbar.js" defer></script>

    <main id="main-content" class="simulation-layout-main" tabindex="-1">
      <script>
(function() {
  document.title = "Simulaci\u00f3n de conservaci\u00f3n del momento lineal - Simulaci\u00f3n interactiva gratuita | Simulaciones cient\u00edficas";
  document.documentElement.lang = "es";
  document.body.className = "bg-gray-50 text-gray-800 font-sans p-6";
  for (const node of Array.from(document.body.childNodes)) {
    if (node === document.currentScript) break;
    if (node.nodeType === Node.TEXT_NODE) {
      node.remove();
    }
  }
})();
</script>
<link rel="stylesheet" href="../../../../assets/css/simulations.css">
<style>
        /* Custom styles */
        canvas {
            display: block;
            margin: 0 auto;
            background-color: #f3f4f6; /* Tailwind gray-100 */
            border: 1px solid #d1d5db; /* Tailwind gray-300 */
            border-radius: 0.5rem;
        }
    </style>

<div class="max-w-6xl mx-auto"><h1 class="text-3xl font-bold text-center text-blue-700 mb-2"> Simulación de conservación del momento</h1><p class="text-sm text-gray-600 italic mb-4"> Alineado con NGSS Expectativa de rendimiento: HS-PS2-2</p><p class="text-center text-gray-600 mb-6"> Explora las colisiones elásticas e inelásticas unidimensionales. Ajusta las masas y las velocidades para observar la conservación del momento y los cambios en la energía cinética. </p><div class="grid grid-cols-1 lg:grid-cols-3 gap-6"><!-- Left Column: Controls --><div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 col-span-1"><h2 class="text-xl font-semibold mb-4 border-b pb-2"> Controles de simulación </h2><div class="space-y-4"><!-- Object 1 Controls --><div class="bg-blue-50 p-3 rounded border border-blue-200"><h3 class="font-medium text-blue-800 mb-2"> Objeto 1 (Azul)</h3><div class="flex flex-col mb-2"> <label class="text-sm font-medium text-gray-700" for="mass1">Masa (kg): <span id="mass1-val">1,0</span></label> <input class="w-full" id="mass1" max="5.0" min="0.1" step="0.1" type="range" value="1.0"/></div><div class="flex flex-col"> <label class="text-sm font-medium text-gray-700" for="vel1">Velocidad inicial (m/s): <span id="vel1-val">2,0</span></label> <input class="w-full" id="vel1" max="5.0" min="-5.0" step="0.1" type="range" value="2.0"/></div></div><!-- Object 2 Controls --><div class="bg-red-50 p-3 rounded border border-red-200"><h3 class="font-medium text-red-800 mb-2"> Objeto 2 (Rojo)</h3><div class="flex flex-col mb-2"> <label class="text-sm font-medium text-gray-700" for="mass2">Masa (kg): <span id="mass2-val">1,5</span></label> <input class="w-full" id="mass2" max="5.0" min="0.1" step="0.1" type="range" value="1.5"/></div><div class="flex flex-col"> <label class="text-sm font-medium text-gray-700" for="vel2">Velocidad inicial (m/s): <span id="vel2-val">-1,0</span></label> <input class="w-full" id="vel2" max="5.0" min="-5.0" step="0.1" type="range" value="-1.0"/></div></div><!-- Environment Controls --><div class="bg-gray-100 p-3 rounded border border-gray-300"><h3 class="font-medium text-gray-800 mb-2"> Configuración de colisión</h3><div class="flex flex-col"> <label class="text-sm font-medium text-gray-700" for="elasticity">Elasticidad (e): <span id="elasticity-val">1,0</span></label> <input class="w-full" id="elasticity" max="1.0" min="0.0" step="0.1" type="range" value="1.0"/><p class="text-xs text-gray-500 mt-1"> 1,0 = Elástico, 0,0 = Perfectamente inelástico</p></div></div><!-- Action Buttons --><div class="flex space-x-2 pt-2"> <button class="flex-1 bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition" id="start-btn">Iniciar</button> <button class="flex-1 bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition" disabled="" id="pause-btn">Pausa</button> <button class="flex-1 bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded transition" id="reset-btn">Reiniciar</button> </div></div></div><!-- Right Column: Canvas and Live Data --><div class="lg:col-span-2 flex flex-col space-y-6"><!-- Simulation Canvas --><div class="bg-white p-4 rounded-lg shadow-md border border-gray-200 relative"><canvas class="w-full h-auto" height="250" id="sim-canvas" width="800"></canvas></div></div></div><!-- Data Logging Table --><div class="mt-8 bg-white p-6 rounded-lg shadow-md border border-gray-200"><div class="flex justify-between items-center mb-4"><h2 class="text-xl font-semibold"> Registro de datos</h2> <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded text-sm transition flex items-center" id="export-btn"><svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg> Exportar CSV</button> </div><div class="overflow-x-auto"><table class="min-w-full text-sm text-left text-gray-500"><thead class="text-xs text-gray-700 uppercase bg-gray-50"><tr><th class="px-3 py-2 border-b" scope="col"> Ensayo</th><th class="px-3 py-2 border-b" scope="col"> m₁ (kg)</th><th class="px-3 py-2 border-b" scope="col"> m₂ (kg)</th><th class="px-3 py-2 border-b" scope="col"> v₁ᵢ (m/s)</th><th class="px-3 py-2 border-b" scope="col"> v₂ᵢ (m/s)</th><th class="px-3 py-2 border-b" scope="col"> mi</th><th class="px-3 py-2 border-b" scope="col"> v₁f (m/s)</th><th class="px-3 py-2 border-b" scope="col"> v₂f (m/s) </th></tr></thead><tbody id="log-table-body"><!-- Data rows will be added here --></tbody></table><div class="text-center py-4 text-gray-500 italic" id="no-data-msg"> Aún no se han registrado datos. Ejecute una simulación para registrarlos.</div></div></div></div><script>
        // DOM Elements
        const canvas = document.getElementById('sim-canvas');
        const ctx = canvas.getContext('2d');
        const startBtn = document.getElementById('start-btn');
        const pauseBtn = document.getElementById('pause-btn');
        const resetBtn = document.getElementById('reset-btn');
        const exportBtn = document.getElementById('export-btn');
        const logTableBody = document.getElementById('log-table-body');
        const noDataMsg = document.getElementById('no-data-msg');

        // Input Elements and Value Spans
        const inputs = {
            m1: { el: document.getElementById('mass1'), valEl: document.getElementById('mass1-val') },
            m2: { el: document.getElementById('mass2'), valEl: document.getElementById('mass2-val') },
            v1: { el: document.getElementById('vel1'), valEl: document.getElementById('vel1-val') },
            v2: { el: document.getElementById('vel2'), valEl: document.getElementById('vel2-val') },
            e:  { el: document.getElementById('elasticity'), valEl: document.getElementById('elasticity-val') }
        };

        // Simulation State
        let state = {
            running: false,
            paused: false,
            time: 0,
            hasCollided: false,
            trialCount: 0,
            pixelsPerMeter: 40,
            lastTime: 0
        };

        // Physics Entities
        class Cart {
            constructor(id, color, mass, initialVelocity, initialX) {
                this.id = id;
                this.color = color;
                this.mass = mass;
                this.initialVelocity = initialVelocity; // m/s
                this.v = initialVelocity; // current velocity
                this.x = initialX; // meters
                this.width = 1.0; // meters (visual base size)
                this.height = 0.5; // meters
                // Visual size scales slightly with mass for intuition
                this.renderWidth = this.width + (this.mass - 1) * 0.2;
            }

            reset(mass, vel, x) {
                this.mass = mass;
                this.initialVelocity = vel;
                this.v = vel;
                this.x = x;
                this.renderWidth = this.width + (this.mass - 1) * 0.2;
            }

            update(dt) {
                this.x += this.v * dt;
            }

            draw(ctx, ppm, canvasHeight) {
                const px = canvas.width / 2 + this.x * ppm;
                const py = canvasHeight / 2 + 50; // Base track level
                const pWidth = this.renderWidth * ppm;
                const pHeight = this.height * ppm;

                ctx.fillStyle = this.color;
                ctx.fillRect(px - pWidth / 2, py - pHeight, pWidth, pHeight);

                // Draw wheels
                ctx.fillStyle = '#333';
                ctx.beginPath();
                ctx.arc(px - pWidth / 2 + 10, py, 6, 0, Math.PI * 2);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(px + pWidth / 2 - 10, py, 6, 0, Math.PI * 2);
                ctx.fill();

                // Draw mass label
                ctx.fillStyle = '#fff';
                ctx.font = '14px Arial';
                ctx.textAlign = 'center';
                ctx.fillText(`${this.mass.toFixed(1)}kg`, px, py - pHeight / 2 + 5);
            }
        }

        let cart1 = new Cart(1, '#3b82f6', 1.0, 2.0, -5.0); // Blue
        let cart2 = new Cart(2, '#ef4444', 1.5, -1.0, 5.0); // Red
        let elasticity = 1.0;

        // Initialization & Event Listeners
        function init() {
            // Setup input listeners
            for (let key in inputs) {
                inputs[key].el.addEventListener('input', (e) => {
                    inputs[key].valEl.textContent = parseFloat(e.target.value).toFixed(1);
                    if (!state.running && !state.paused) {
                        resetSimulation();
                    }
                });
            }

            startBtn.addEventListener('click', toggleSimulation);
            pauseBtn.addEventListener('click', pauseSimulation);
            resetBtn.addEventListener('click', resetSimulation);

            resetSimulation();
            requestAnimationFrame(loop);
        }

        function readInputs() {
            return {
                m1: parseFloat(inputs.m1.el.value),
                m2: parseFloat(inputs.m2.el.value),
                v1: parseFloat(inputs.v1.el.value),
                v2: parseFloat(inputs.v2.el.value),
                e: parseFloat(inputs.e.el.value)
            };
        }

        function resetSimulation() {
            const vals = readInputs();
            elasticity = vals.e;

            // Initial positions: apart
            cart1.reset(vals.m1, vals.v1, -4.0);
            cart2.reset(vals.m2, vals.v2, 4.0);

            state.running = false;
            state.paused = false;
            state.hasCollided = false;
            state.time = 0;

            startBtn.textContent = 'Start';
            startBtn.disabled = false;
            pauseBtn.disabled = true;

            // Enable inputs
            for(let key in inputs) inputs[key].el.disabled = false;

            draw();
        }

        function toggleSimulation() {
            if (!state.running && !state.paused) {
                // Starting fresh
                state.running = true;
                state.lastTime = performance.now();
                startBtn.disabled = true;
                pauseBtn.disabled = false;

                // Disable inputs during run
                for(let key in inputs) inputs[key].el.disabled = true;
            } else if (state.paused) {
                // Resuming
                state.paused = false;
                state.running = true;
                state.lastTime = performance.now();
                startBtn.disabled = true;
                pauseBtn.disabled = false;
            }
        }

        function pauseSimulation() {
            state.paused = true;
            state.running = false;
            startBtn.disabled = false;
            startBtn.textContent = 'Resume';
            pauseBtn.disabled = true;
        }

        // Data Logging
        let loggedData = [];
        const DISPLAY_PRECISION = { trial: null, m1: 1, m2: 1, u1: 2, u2: 2, e: 2, v1f: 4, v2f: 4 };

        function logTrial(m1, m2, u1, u2, e, v1f, v2f) {
            state.trialCount++;
            noDataMsg.style.display = 'none';

            const trialData = {
                trial: state.trialCount,
                m1,
                m2,
                u1,
                u2,
                e,
                v1f,
                v2f
            };

            loggedData.push(trialData);

            const row = document.createElement('tr');
            row.className = 'bg-white border-b hover:bg-gray-50';

            // Note: For security and per instructions, using textContent via individual cells
            const keys = ['trial', 'm1', 'm2', 'u1', 'u2', 'e', 'v1f', 'v2f'];
            keys.forEach(key => {
                const cell = document.createElement('td');
                cell.className = 'px-3 py-2 font-mono';
                const digits = DISPLAY_PRECISION[key];
                cell.textContent = digits == null ? String(trialData[key]) : trialData[key].toFixed(digits);
                row.appendChild(cell);
            });

            logTableBody.insertBefore(row, logTableBody.firstChild);
        }

        exportBtn.addEventListener('click', () => {
            if (loggedData.length === 0) {
                alert("No data to export!");
                return;
            }

            let csvContent = "data:text/csv;charset=utf-8,";
            // Header
            csvContent += "Trial,m1(kg),m2(kg),v1i(m/s),v2i(m/s),Elasticity,v1f(m/s),v2f(m/s)\n";

            // Rows
            loggedData.forEach(row => {
                const rowStr = `${row.trial},${row.m1},${row.m2},${row.u1},${row.u2},${row.e},${row.v1f},${row.v2f}`;
                csvContent += rowStr + "\n";
            });

            const encodedUri = encodeURI(csvContent);
            const link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "momentum_conservation_data.csv");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });

        function checkCollision() {
            if (state.hasCollided) return;

            // Check if edges overlap
            const cart1Right = cart1.x + cart1.renderWidth / 2;
            const cart2Left = cart2.x - cart2.renderWidth / 2;

            if (cart1Right >= cart2Left) {
                // Collision occurs!
                state.hasCollided = true;

                // Physics calculation
                const m1 = cart1.mass;
                const m2 = cart2.mass;
                const u1 = cart1.v;
                const u2 = cart2.v;
                const e = elasticity;

                // Final velocity equations for 1D collision with coefficient of restitution
                const v1f = ((m1 - e * m2) * u1 + (1 + e) * m2 * u2) / (m1 + m2);
                const v2f = ((m2 - e * m1) * u2 + (1 + e) * m1 * u1) / (m1 + m2);

                cart1.v = v1f;
                cart2.v = v2f;

                // Separate them slightly to avoid sticking inside each other due to dt steps
                const overlap = cart1Right - cart2Left;
                cart1.x -= overlap / 2;
                cart2.x += overlap / 2;

                // Log the trial data
                logTrial(m1, m2, u1, u2, e, v1f, v2f);
            }
        }

        function loop(timestamp) {
            if (state.running) {
                const dt = (timestamp - state.lastTime) / 1000; // seconds
                state.lastTime = timestamp;

                // Cap dt to prevent huge jumps if tab was inactive
                if (dt < 0.1) {
                    cart1.update(dt);
                    cart2.update(dt);
                    checkCollision();
                }

                // Auto-pause if they drift too far away
                if (Math.abs(cart1.x) > 15 && Math.abs(cart2.x) > 15) {
                    pauseSimulation();
                    startBtn.disabled = true; // Force reset
                }
            }

            draw();
            requestAnimationFrame(loop);
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Draw track
            const trackY = canvas.height / 2 + 50;
            ctx.beginPath();
            ctx.moveTo(0, trackY + 6);
            ctx.lineTo(canvas.width, trackY + 6);
            ctx.strokeStyle = '#9ca3af';
            ctx.lineWidth = 4;
            ctx.stroke();

            // Draw center marker
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2, trackY + 10);
            ctx.lineTo(canvas.width / 2, trackY + 20);
            ctx.strokeStyle = '#4b5563';
            ctx.lineWidth = 2;
            ctx.stroke();

            cart1.draw(ctx, state.pixelsPerMeter, canvas.height);
            cart2.draw(ctx, state.pixelsPerMeter, canvas.height);
        }

        // Start everything
        init();
    </script>

    </main>
    
    <button class="sim-share-btn" id="simShareBtn" type="button" aria-label="Compartir simulación"
      data-tooltip="Comparte este enlace con tus estudiantes para que accedan a la simulación"
      data-tooltip-position="left">
      <svg viewBox="0 0 24 24"><line x1="12" y1="3" x2="12" y2="16"></line><polyline points="8 12 12 16 16 12"></polyline><path d="M5 21h14a2 2 0 0 0 2-2v-4"></path><path d="M3 15v4a2 2 0 0 0 2 2h.5"></path></svg>
      <span>Compartir</span>
    </button>
    <footer class="simulation-layout-footer" aria-label="Pie del sitio">
      <p>
        <a href="https://sims.science/es/terminos/" style="text-decoration:underline;text-underline-offset:2px;">Términos</a>
        |
        <a href="https://sims.science/es/privacidad/" style="text-decoration:underline;text-underline-offset:2px;">Privacidad</a>
      </p>
      
    </footer>
    
    <noscript id="seo-fallback">
      <a href="https://sims.science/es/">
        Inicio
      </a>
      
        <a href="https://sims.science/es/simulaciones/ciencias-fisicas/">Ciencias físicas</a>
      
      <a href="https://sims.science/es/simulaciones/ciencias-fisicas/simulacion-conservacion-del-momento/">Simulación de conservación del momento</a>
    </noscript>
    
    <script defer src="/assets/js/share-sim.js?v=860946c8580b63be9471a3affe622ab52c574d69"></script>
    
    
    <script defer src="/assets/js/science-ed-tracker.min.js?v=860946c8580b63be9471a3affe622ab52c574d69"
      data-api-base="https://api.sims.science"
      data-sim-slug="ciencias-fisicas"
      data-batch-interval="5000"
      data-max-batch-size="50"
      data-debug="false"></script>
    
    
    <script defer src="/assets/js/sim-auth-gate.min.js?v=860946c8580b63be9471a3affe622ab52c574d69"
      data-login-url="/en/student/login/"
      data-register-url="/en/student/register/"
      data-api-base="https://api.sims.science"
      data-sim-title="Simulación de conservación del momento"
      data-sim-desc="Explora la conservación del impulso mediante experimentos interactivos de colisiones (HS-PS2-2). Analiza colisiones elásticas e inelásticas con visualización de datos en tiempo real."
      data-sim-category="Ciencias físicas"
      data-debug="false"
      data-skip-sdk-init="true"></script>
    
    
    <script>
      (function(){
        if (localStorage.getItem('sims-sim-tip-dismissed')) return;
        var tip = document.createElement('div');
        tip.id = 'sim-first-tip';
        tip.style.cssText = 'position:fixed;bottom:4.5rem;right:1rem;z-index:9998;background:#1e293b;border:1px solid rgba(148,163,184,0.25);border-radius:12px;padding:1rem 1.25rem;max-width:320px;color:#e2e8f0;font-size:0.85rem;line-height:1.45;font-family:Inter,system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,0.4);display:none;';
        tip.innerHTML = '<div style="font-size:1.1rem;margin-bottom:0.4rem;">💡 Consejo rápido</div><div>Usa los controles interactivos para explorar la simulación. Pasa el cursor sobre los elementos para obtener ayuda. <a href="" style="color:#38bdf8;text-decoration:underline;white-space:nowrap;">Más información →</a></div><button onclick="this.parentElement.style.display=\'none\';try{localStorage.setItem(\'sims-sim-tip-dismissed\',\'true\')}catch(e){}" style="position:absolute;top:0.35rem;right:0.5rem;background:none;border:none;color:#64748b;font-size:1.1rem;cursor:pointer;line-height:1;" aria-label="Cerrar">&times;</button>';
        document.body.appendChild(tip);
        // Show after a short delay
        setTimeout(function(){ tip.style.display = 'block'; }, 1500);
      })();
    </script>
  </body>
</html>