Exploring Momentum and Impulse









Results

Acceleration:

Change in Momentum:

Work Done:

Graph of Momentum Change

``` ```css body { font-family: sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } .container { max-width: 960px; margin: 20px auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .controls { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; font-weight: bold; } input[type="number"] { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background-color: #3e8e41; } .results { margin-top: 20px; border: 1px solid #ddd; padding: 10px; border-radius: 4px; } .graph { margin-top: 20px; border: 1px solid #ddd; padding: 10px; border-radius: 4px; } canvas { border: 1px solid #ddd; padding: 10px; border-radius: 4px; } ``` ```javascript const massInput = document.getElementById('mass'); const velocityInput = document.getElementById('velocity'); const forceInput = document.getElementById('force'); const timeInput = document.getElementById('time'); const accelerationDisplay = document.getElementById('acceleration'); const changeInMomentumDisplay = document.getElementById('changeInMomentum'); const workDoneDisplay = document.getElementById('workDone'); const momentumGraph = document.getElementById('momentumGraph'); const ctx = momentumGraph.getContext('2d'); function calculate() { const mass = parseFloat(massInput.value); const velocity = parseFloat(velocityInput.value); const force = parseFloat(forceInput.value); const time = parseFloat(timeInput.value); if (isNaN(mass) || isNaN(velocity) || isNaN(force) || isNaN(time)) { alert("Please enter valid numbers."); return; } const changeInMomentum = force * time; const workDone = force * velocity * Math.cos(Math.atan2(velocity, force)); // More accurate work calculation accelerationDisplay.textContent = `Acceleration: ${changeInMomentum / mass} m/s²`; changeInMomentumDisplay.textContent = `Change in Momentum: ${changeInMomentum} kg m/s`; workDoneDisplay.textContent = `Work Done: ${workDone} J`; // Clear previous graph ctx.clearRect(0, 0, 600, 400); // Draw momentum change graph const momentumChange = changeInMomentum; const graphHeight = 400 - 100; // Space for labels and title const graphWidth = 600; const graphScale = graphHeight / momentumChange; const graphScaleFactor = graphWidth / momentumChange; const graphHeightValue = graphHeight / momentumChange; ctx.strokeStyle = 'blue'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(100, 400 - graphHeightValue); ctx.lineTo(graphWidth - 100, 400 - graphHeightValue); ctx.stroke(); ctx.font = "16px Arial"; ctx.fillStyle = "black"; ctx.fillText("Momentum Change", 20, 20); } // Add event listeners for input changes massInput.addEventListener('change', calculate); velocityInput.addEventListener('change', calculate); forceInput.addEventListener('change', calculate); timeInput.addEventListener('change', calculate);