Mass on a Spring

Below is an animation of the motion of a mass hanging on a spring. As it moves up and down the total energy of the system expresses itself as changing amounts of kinetic energy, potential energy due to gravity, and potential energy of a spring.

Message

Click this button to examine the computer code that runs this animation.

Here's the code that runs the above animation.

You can change the code, if you like, and then click the following 'Reevaluate code' button. The program will then work as per your changes. Of course, your changes, especially random changes, can introduce errors, miscalculations, and browser crashes. If you need to get things back to their original condition, just reload this page using your browser's reload button.

The intention here is to conveniently show the inner workings of this program so that you understand how the diagram is drawn.

Click the 'Code' button again to close this section.

// mass on a spring

// required library: jQuery
// required custom object: XYGraph

var loopWait = 50; // ms.

var x;
var y;

var yBottomMin;
var yBottomMax;

var yMiddleMin;
var yMiddleMax;

var yTopMin;
var yTopMax;

var t;
var dt;
var period;

var numCoils = 10;

var topHTML;
var middleHTML;
var bottomHTML;

var messageDiv;

var isPaused;

var pauseResumeButton;


setup = function()
{
	xyGraph = new XYGraph(document.getElementById('screenCanvasId'));
	
	xyGraph.setWorldBounds(0, 20, 0, 40);
	xyGraph.setRatios();
	
	pauseResumeButton = jQuery('#pauseResumeButtonId');
	pauseResumeButton.bind('click', onClickPauseResumeButton);
	
	messageDiv = jQuery('#messageDivId');
	
	topHTML = '';

	topHTML += '<h3>Top</h3>';
	topHTML += '<span>Spring potential energy at a minimum.<br><br>';
	topHTML += 'Gravitational potential energy at a maximum.<br><br>';
	topHTML += 'Kinetic energy equals zero at the very top.</span>';

	middleHTML = '';

	middleHTML += '<h3>Middle</h3>';
	middleHTML += '<span>Kinetic energy at a maximum.</span>';

	bottomHTML = '';
	
	bottomHTML += '<h3>Bottom</h3>';
	bottomHTML += '<span>Spring potential energy at a maximum.<br><br>';
	bottomHTML += 'Gravitational potential energy at a minimum.<br><br>';
	bottomHTML += 'Kinetic energy equals zero at the very bottom.</span>';

	period = Math.PI * 2.0;
	
	dt = 0.01;
	t  = 0.0;
	
	isPaused = false;
};


loop = function()
{
	update();
	
	render();
	
	loopTimeout = setTimeout(loop, loopWait);
};


update = function()
{
	// find new position
	x = 11;
	y = 22 + (11 * Math.sin(t));

	if(!isPaused)
	{
		// update time
		t += dt;
		if(t >= period) t -= period;
	}
};


render = function()
{
	// clear screen
	xyGraph.clear();
	
	// draw base
	xyGraph.setLineThickness(3);
	xyGraph.setLineColor('black');
	xyGraph.setLineJoin('round');
	xyGraph.drawLineSegment(2.0, 2.0, 2.0, 4.0);
	xyGraph.drawLineSegment(2.0, 4.0, 18.0, 4.0);
	xyGraph.drawLineSegment(18.0, 4.0, 18.0, 2.0);

	// draw support
	xyGraph.drawLineSegment(4.0, 4.0, 4.0, 38.0);
	xyGraph.drawLineSegment(4.0, 38.0, 13.0, 38.0);
	xyGraph.drawLineSegment(11.0, 38.0, 11.0, 36.0);
	
	// draw mass, top hook
	xyGraph.drawLineSegment(x, y, x, y - 2);

	// draw mass
	xyGraph.setAreaColor('red');
	xyGraph.drawAreaRectangle(x - 3, y - 2, 6, 4);
	xyGraph.drawLineRectangle(x - 3, y - 2, 6, 4);

	// draw mass, bottom platform
	xyGraph.drawLineSegment(x - 5, y - 6, x + 5, y - 6);

	// draw spring
	// top coil
	xyGraph.drawLineSegment(9, 36, 13, 36);
	// draw coils
	var yCoil  = 36;
	var dyCoil = (36 - y) / numCoils;
	for(var i = 0; i < numCoils; i++)
	{
		xyGraph.drawLineSegment(9, yCoil, 13, yCoil - (dyCoil / 2));
		xyGraph.drawLineSegment(13, yCoil - (dyCoil / 2), 9, yCoil - dyCoil);

		yCoil -= dyCoil;
	}
	// draw bottom coil
	xyGraph.drawLineSegment(9, y, 13, y);

	// draw message
	if(y > 30)
	{
		displayTopMessage();
	}
	if(y < 24 && y > 20)
	{
		displayMiddleMessage();
	}
	if(y < 14)
	{
		displayBottomMessage();
	}
};


displayBottomMessage = function()
{
	messageDiv.html(bottomHTML);
};


displayMiddleMessage = function()
{
	messageDiv.html(middleHTML);
};


displayTopMessage = function()
{
	messageDiv.html(topHTML);
};


onClickPauseResumeButton = function(event)
{
	if(event.target.value == 'Pause')
	{
		event.target.value = 'Resume';
		
		isPaused = true;
	}
	else
	{
		event.target.value = 'Pause';
		
		isPaused = false;
	}
};

The different levels for the spring potential, gravitational potential, and kinetic energies are highlighted at the appropriate times during the motion.

At the top of the motion:

The spring is stretched the least, so, the potential energy of the spring is at a minimum.

The mass is lifted as high as it will go, so, the potential energy due to gravity is at a maximum.

The mass is stopped, so, its kinetic energy is zero.

In the middle of the motion:

Some energy is stored in the spring, since it is stretched to some degree; that is, there is some potential energy in the spring.

Some energy is stored in the gravitational field, since the object is lifted above ground; that is, there is some potential energy due to gravity.

The mass has reached its maximum speed; so, the kinetic energy of the mass is at a maximum.

At the bottom of the motion:

The potential energy of the spring is at a maximum since the spring is stretched at its maximum extension.

The potential energy due to gravity is at a minimum, since the mass is lifted the least amount above ground. In fact, if ground level is imagined at the bottom of the motion, the potential energy due to gravity is zero at this point of the motion.

The kinetic energy of the mass is zero, since the mass is temporarily stopped.

So, while the mass moves up and down energy changes forms between potential energy due to the spring, potential energy due to gravity, and kinetic energy. However, the total energy of the system will remain constant, according to the law of the conservation of energy.

Of course, for a real mass moving with a real spring, the motion will eventually come to a stop. This is because energy is slowly radiated by the system as heat. Over time this 'energy leak' will drain energy from the system, and the mass will quit moving.