The Physics Department

Click animation to restart.

Click to see the animation code.

Mechanics

Waves

Light

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. Can you figure out how to make the animation run a one frame per second?

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

//////////
// Start: bouncingBall1 (x, y) graph canvas
//////////

var bouncingBall1Canvas;
var bouncingBall1GC; // Graphics 2D context


bouncingBall1XYGraphInitialize = function()
{
	bouncingBall1Canvas = document.getElementById('bouncingBall1CanvasId');
	
	bouncingBall1GC = bouncingBall1Canvas.getContext('2d');
};


var bouncingBall1WorldXMin = -10;
var bouncingBall1WorldXMax = 10;
var bouncingBall1WorldYMin = -10;
var bouncingBall1WorldYMax = 10;

var bouncingBall1DeviceWidth  = 400;
var bouncingBall1DeviceHeight = 400;

var bouncingBall1DeviceHeightPlus1 = bouncingBall1DeviceHeight + 1;
var bouncingBall1DeviceWidthPlus1  = bouncingBall1DeviceWidth  + 1;

var bouncingBall1WorldPerDeviceX = (bouncingBall1WorldXMax - bouncingBall1WorldXMin) / (bouncingBall1DeviceWidth);
var bouncingBall1WorldPerDeviceY = (bouncingBall1WorldYMax - bouncingBall1WorldYMin) / (bouncingBall1DeviceHeight);

var bouncingBall1DevicePerWorldX = (bouncingBall1DeviceWidth)  / (bouncingBall1WorldXMax - bouncingBall1WorldXMin);
var bouncingBall1DevicePerWorldY = (bouncingBall1DeviceHeight) / (bouncingBall1WorldYMax - bouncingBall1WorldYMin);

var	bouncingBall1IsAngleMeasurementInDegrees = true;

var	bouncingBall1RadiansPerDegree = Math.PI / 180.0;

var bouncingBall1TwoPi = 2.0 * Math.PI;

var bouncingBall1IsBigPoints = true;

var bouncingBall1BigPointsAreaColor = 'yellow';
var bouncingBall1BigPointsLineColor = 'black';
var bouncingBall1BigPointsRadius    = 5; // Pixels;

var bouncingBall1AxisThickness = 3;
var bouncingBall1XAxisColor    = 'rgb(255,   0,   0)';
var bouncingBall1YAxisColor    = 'rgb(  0, 255,   0)';

var bouncingBall1OriginColor = 'rgb(255, 255, 255)';

var bouncingBall1GridColor     = 'rgb(200, 200, 200)';
var bouncingBall1GridThickness = 1;
var bouncingBall1GridDeltaX    = 1.0;
var bouncingBall1GridDeltaY    = 1.0;

var bouncingBall1TurtleX         = 0.0;
var bouncingBall1TurtleY         = 0.0;
var bouncingBall1TurtleHeading   = 0.0;
var bouncingBall1TurtleIsPenDown = true;




bouncingBall1SetupGraph = function()
{
	bouncingBall1ClearGraph();
	bouncingBall1DrawGrid();
	bouncingBall1DrawAxes();
	bouncingBall1DrawOrigin();
	
	bouncingBall1SetAreaColor('yellow');
	
	bouncingBall1SetLineThickness(2);
	bouncingBall1SetLineColor('black');
};




bouncingBall1ClearGraph = function()
{
	bouncingBall1GC.clearRect(0, 0, bouncingBall1DeviceWidthPlus1, bouncingBall1DeviceHeightPlus1);
};




bouncingBall1WorldToDeviceX = function(worldX)
{
	return Math.round(bouncingBall1DevicePerWorldX * (worldX - bouncingBall1WorldXMin));
};




bouncingBall1WorldToDeviceY = function(worldY)
{
	return Math.round(bouncingBall1DeviceHeight - (bouncingBall1DevicePerWorldY * (worldY - bouncingBall1WorldYMin)));
};




bouncingBall1SetLineThickness = function(thickness)
{
	bouncingBall1GC.lineWidth = thickness;
};




bouncingBall1SetLineCap = function(capStyle) // 'butt', 'round', or 'square'
{
	bouncingBall1GC.lineCap = capStyle;
};




bouncingBall1SetLineJoin = function(joinStyle) // 'round', 'bevel', or 'miter''
{
	bouncingBall1GC.lineJoin = joinStyle;
};




bouncingBall1SetLineColor = function(color)
{
	bouncingBall1GC.strokeStyle = color;
};




bouncingBall1SetAreaColor =  function(color)
{
	bouncingBall1GC.fillStyle = color;
};




bouncingBall1DrawPoint = function(worldX, worldY)
{
	if(bouncingBall1IsBigPoints)
	{
		bouncingBall1GC.beginPath();
		bouncingBall1GC.arc(Math.round(bouncingBall1DevicePerWorldX * (worldX - bouncingBall1WorldXMin)),
				Math.round(bouncingBall1DeviceHeight - (bouncingBall1DevicePerWorldY * (worldY - bouncingBall1WorldYMin))),
				bouncingBall1BigPointsRadius, 0.0, bouncingBall1TwoPi, true);
		bouncingBall1GC.fill();
		bouncingBall1GC.stroke();
	}
	else
	{
		bouncingBall1GC.beginPath();
		bouncingBall1GC.moveTo(Math.round(bouncingBall1DevicePerWorldX * (worldX - bouncingBall1WorldXMin)),
								Math.round(bouncingBall1DeviceHeight - (bouncingBall1DevicePerWorldY * (worldY - bouncingBall1WorldYMin))));
		bouncingBall1GC.lineTo(Math.round(bouncingBall1DevicePerWorldX * (worldX - bouncingBall1WorldXMin)),
								Math.round(bouncingBall1DeviceHeight - (bouncingBall1DevicePerWorldY * (worldY - bouncingBall1WorldYMin))));
		bouncingBall1GC.stroke();
	}
};




bouncingBall1DrawLineSegment = function(worldX1, worldY1, worldX2, worldY2)
{
	bouncingBall1GC.beginPath();
	bouncingBall1GC.moveTo(Math.round(bouncingBall1DevicePerWorldX * (worldX1 - bouncingBall1WorldXMin)),
							Math.round(bouncingBall1DeviceHeight - (bouncingBall1DevicePerWorldY * (worldY1 - bouncingBall1WorldYMin))));
	bouncingBall1GC.lineTo(Math.round(bouncingBall1DevicePerWorldX * (worldX2 - bouncingBall1WorldXMin)),
							Math.round(bouncingBall1DeviceHeight - (bouncingBall1DevicePerWorldY * (worldY2 - bouncingBall1WorldYMin))));
	bouncingBall1GC.stroke();
};




bouncingBall1DrawArcLine = function(x, y, r, angle1, angle2) // World.
{
	r = Math.round(bouncingBall1DevicePerWorldX * r); // x- and y-axes must be scaled the same.
	
	x = bouncingBall1WorldToDeviceX(x);
	y = bouncingBall1WorldToDeviceY(y);
	
	if(bouncingBall1IsAngleMeasurementInDegrees)
	{
		angle1 *= bouncingBall1RadiansPerDegree;
	}

	while(angle1 < 0.0)
	{
		angle1 += bouncingBall1TwoPi;
	}

	while(angle1 > bouncingBall1TwoPi)
	{
		angle1 -= bouncingBall1TwoPi;
	}

	if(bouncingBall1IsAngleMeasurementInDegrees)
	{
		angle2 *= bouncingBall1RadiansPerDegree;
	}

	while(angle2 < 0.0)
	{
		angle2 += bouncingBall1TwoPi;
	}

	while(angle2 > bouncingBall1TwoPi)
	{
		angle2 -= bouncingBall1TwoPi;
	}

	bouncingBall1GC.beginPath();
	bouncingBall1GC.arc(x, y, r, angle1, -angle2, true);
	bouncingBall1GC.stroke();
};




bouncingBall1RectangleArea = function(x, y, width, height) // World.
{
	bouncingBall1GC.fillRect(Math.round(bouncingBall1DevicePerWorldX * (x - bouncingBall1WorldXMin)),
							Math.round(bouncingBall1DeviceHeight - (bouncingBall1DevicePerWorldY * (y - bouncingBall1WorldYMin))),
							Math.round(bouncingBall1DevicePerWorldX * (width)),
							Math.round(bouncingBall1DevicePerWorldY * (height)));
};




bouncingBall1RectangleLine = function(x, y, width, height) // World.
{
	bouncingBall1GC.strokeRect(Math.round(bouncingBall1DevicePerWorldX * (x - bouncingBall1WorldXMin)),
								Math.round(bouncingBall1DeviceHeight - (bouncingBall1DevicePerWorldY * (y - bouncingBall1WorldYMin))),
								Math.round(bouncingBall1DevicePerWorldX * (width)),
								Math.round(bouncingBall1DevicePerWorldY * (height)));
};




bouncingBall1RectangleClear = function(x, y, width, height) // World.
{
	bouncingBall1GC.clearRect(Math.round(bouncingBall1DevicePerWorldX * (x - bouncingBall1WorldXMin)),
								Math.round(bouncingBall1DeviceHeight - (bouncingBall1DevicePerWorldY * (y - bouncingBall1WorldYMin))),
								Math.round(bouncingBall1DevicePerWorldX * (width)),
								Math.round(bouncingBall1DevicePerWorldY * (height)));
};




bouncingBall1DrawAxes = function()
{
	bouncingBall1SetLineThickness(bouncingBall1AxisThickness);
	
	bouncingBall1SetLineColor(bouncingBall1XAxisColor);
	bouncingBall1DrawLineSegment(bouncingBall1WorldXMin, 0.0, bouncingBall1WorldXMax, 0.0);

	bouncingBall1SetLineColor(bouncingBall1YAxisColor);
	bouncingBall1DrawLineSegment(0.0, bouncingBall1WorldYMin, 0.0, bouncingBall1WorldYMax);

	bouncingBall1SetLineColor(bouncingBall1OriginColor);
	bouncingBall1DrawPoint(0.0, 0.0);
};




bouncingBall1DrawOrigin = function()
{
	bouncingBall1SetLineThickness(bouncingBall1OriginLineThickness);
	
	bouncingBall1SetLineColor(bouncingBall1OriginLineColor);
	bouncingBall1SetAreaColor(bouncingBall1OriginAreaColor);
	
	var x = bouncingBall1WorldToDeviceX(0) - 2;
	var y = bouncingBall1WorldToDeviceY(0) - 2;
	
	bouncingBall1GC.fillRect(x, y, 4, 4);
	bouncingBall1GC.strokeRect(x, y, 4, 4);
};




bouncingBall1DrawGrid = function()
{
	bouncingBall1SetLineThickness(bouncingBall1GridThickness);
	bouncingBall1SetLineColor(bouncingBall1GridColor);
	
	var x, y;
	
	for(x = 0.0; x <= bouncingBall1WorldXMax; x += bouncingBall1GridDeltaX)
	{
		bouncingBall1DrawLineSegment(x, bouncingBall1WorldYMin, x, bouncingBall1WorldYMax);
	}
	for(x = 0.0; x >= bouncingBall1WorldXMin; x -= bouncingBall1GridDeltaX)
	{
		bouncingBall1DrawLineSegment(x, bouncingBall1WorldYMin, x, bouncingBall1WorldYMax);
	}
	for(y = 0.0; y <= bouncingBall1WorldYMax; y += bouncingBall1GridDeltaY)
	{
		bouncingBall1DrawLineSegment(bouncingBall1WorldXMin, y, bouncingBall1WorldXMax, y);
	}
	for(y = 0.0; y >= bouncingBall1WorldYMin; y -= bouncingBall1GridDeltaY)
	{
		bouncingBall1DrawLineSegment(bouncingBall1WorldXMin, y, bouncingBall1WorldXMax, y);
	}
};




bouncingBall1SetBounds = function(worldXMin, worldXMax, worldYMin, worldYMax)
{
	bouncingBall1WorldXMin = worldXMin;
	bouncingBall1WorldXMax = worldXMax;
	bouncingBall1WorldYMin = worldYMin;
	bouncingBall1WorldYMax = worldYMax;

	bouncingBall1WorldPerDeviceX = (bouncingBall1WorldXMax - bouncingBall1WorldXMin) / (bouncingBall1DeviceWidth);
	bouncingBall1WorldPerDeviceY = (bouncingBall1WorldYMax - bouncingBall1WorldYMin) / (bouncingBall1DeviceHeight);

	bouncingBall1DevicePerWorldX = (bouncingBall1DeviceWidth)  / (bouncingBall1WorldXMax - bouncingBall1WorldXMin);
	bouncingBall1DevicePerWorldY = (bouncingBall1DeviceHeight) / (bouncingBall1WorldYMax - bouncingBall1WorldYMin);
};




bouncingBall1ShowBounds = function()
{
	// TODO: Present graph bounds.
};




bouncingBall1InitializeTurtle = function()
{
	bouncingBall1TurtleX         = 0.0;
	bouncingBall1TurtleY         = 0.0;
	bouncingBall1TurtleHeading   = 0.0;
	bouncingBall1TurtleIsPenDown = true;
};




bouncingBall1PenUp = function()
{
	bouncingBall1TurtleIsPenDown = false;
};




bouncingBall1PenDown = function()
{
	bouncingBall1TurtleIsPenDown = true;
};




bouncingBall1SetH = function(a)
{
	if(bouncingBall1IsAngleMeasurementInDegrees)
	{
		a *= bouncingBall1RadiansPerDegree;
	}

	while(a < 0.0)
	{
		a += bouncingBall1TwoPi;
	}

	while(a > bouncingBall1TwoPi)
	{
		a -= bouncingBall1TwoPi;
	}

	bouncingBall1TurtleHeading = a;
};




bouncingBall1Home = function()
{
	bouncingBall1TurtleX       = 0.0;
	bouncingBall1TurtleY       = 0.0;
	bouncingBall1TurtleHeading = 0.0;
};




bouncingBall1Forward = function(d)
{
	var turtleNewX;
	var turtleNewY;

	turtleNewX = bouncingBall1TurtleX + d * Math.cos(bouncingBall1TurtleHeading);
	turtleNewY = bouncingBall1TurtleY + d * Math.sin(bouncingBall1TurtleHeading);

	if(bouncingBall1TurtleIsPenDown)
	{
		bouncingBall1DrawLineSegment(bouncingBall1TurtleX, bouncingBall1TurtleY, turtleNewX, turtleNewY);
	}

	bouncingBall1TurtleX = turtleNewX;
	bouncingBall1TurtleY = turtleNewY;
};




bouncingBall1Back = function(d)
{
	bouncingBall1Forward(-d);
};




bouncingBall1Right = function(a)
{
	var turtleNewHeading;

	if(bouncingBall1IsAngleMeasurementInDegrees)
	{
		a *= bouncingBall1RadiansPerDegree;
	}

	turtleNewHeading = bouncingBall1TurtleHeading - a;

	while(turtleNewHeading < 0.0)
	{
		turtleNewHeading += bouncingBall1TwoPi;
	}

	while(turtleNewHeading > bouncingBall1TwoPi)
	{
		turtleNewHeading -= bouncingBall1TwoPi;
	}

	bouncingBall1TurtleHeading = turtleNewHeading;
};




bouncingBall1Left = function(a)
{
        bouncingBall1Right(-a);
};




bouncingBall1SetX = function(x)
{
	if(bouncingBall1TurtleIsPenDown)
	{
		bouncingBall1DrawLineSegment(bouncingBall1TurtleX, bouncingBall1TurtleY, x, bouncingBall1TurtleY);
	}

	bouncingBall1TurtleX = x;
};




bouncingBall1SetY = function(y)
{
	if(bouncingBall1TurtleIsPenDown)
	{
		bouncingBall1DrawLineSegment(bouncingBall1TurtleX, bouncingBall1TurtleY, bouncingBall1TurtleX, y);
	}

	bouncingBall1TurtleY = y;
};




bouncingBall1SetXY = function(x, y)
{
	if(bouncingBall1TurtleIsPenDown)
	{
		bouncingBall1DrawLineSegment(bouncingBall1TurtleX, bouncingBall1TurtleY, x, y);
	}

	bouncingBall1TurtleX = x;
	bouncingBall1TurtleY = y;
};




bouncingBall1SetDegrees = function()
{
	bouncingBall1IsAngleMeasurementInDegrees = true;
};


bouncingBall1SetRadians = function()
{
	bouncingBall1IsAngleMeasurementInDegrees = false;
};




bouncingBall1Sine = function(a)
{
	return Math.sin((bouncingBall1IsAngleMeasurementInDegrees) ? (a * bouncingBall1RadiansPerDegree) : a);
};


bouncingBall1Cosine = function(a)
{
	return Math.cos((bouncingBall1IsAngleMeasurementInDegrees) ? (a * bouncingBall1RadiansPerDegree) : a);
};


bouncingBall1Tangent = function(a)
{
	return Math.tan((bouncingBall1IsAngleMeasurementInDegrees) ? (a * bouncingBall1RadiansPerDegree) : a);
};




bouncingBall1RandomX = function()
{
	return bouncingBall1WorldXMin + (Math.random() * (bouncingBall1WorldXMax - bouncingBall1WorldXMin));
};


bouncingBall1RandomY = function()
{
	return bouncingBall1WorldYMin + (Math.random() * (bouncingBall1WorldYMax - bouncingBall1WorldYMin));
};

//////////
// End: bouncingBall1 (x, y) graph canvas
//////////

//////////
// Start: bouncingBall1 animation timeline
//////////

var bouncingBall1Fps = 6;

var bouncingBall1FrameIndex = 0;

var bouncingBall1UserEventHandler   = null;
var bouncingBall1SystemEventHandler = null;

var bouncingBall1Done = false;

var bouncingBall1Timeout = null;
var bouncingBall1TimeoutPeriod = 1000 / bouncingBall1Fps;




bouncingBall1TimelineInitialize = function()
{
};




bouncingBall1Start = function()
{
	clearTimeout(bouncingBall1Timeout);
	bouncingBall1Timeout = null;

	bouncingBall1UserEventHandler   = null;
	bouncingBall1SystemEventHandler = null;

	bouncingBall1Done = false;
	
	bouncingBall1FrameIndex = 0;
	
	bouncingBall1SetUp();
	
	bouncingBall1NextFrame();
};




bouncingBall1Resume = function()
{
	bouncingBall1Done = false;
		
	bouncingBall1NextFrame();
};




bouncingBall1Pause = function()
{
	clearTimeout(bouncingBall1Timeout);
	bouncingBall1Timeout = null;

	bouncingBall1Done = true;
};




bouncingBall1Stop = function()
{
	clearTimeout(bouncingBall1Timeout);
	bouncingBall1Timeout = null;

	bouncingBall1UserEventHandler   = null;
	bouncingBall1SystemEventHandler = null;

	bouncingBall1Done = true;

	bouncingBall1SetDown();
};




bouncingBall1GotoFrame = function(frameIndex)
{
	bouncingBall1FrameIndex = frameIndex;
};




bouncingBall1SetUp = function()
{
};




bouncingBall1SetDown = function()
{
};




bouncingBall1NextFrame = function()
{
	/*
	if(bouncingBall1UserEventHandler)
	{
		bouncingBall1UserEventHandler();
		
		bouncingBall1UserEventHandler = null;
	}
	
	if(bouncingBall1SystemEventHandler)
	{
		bouncingBall1SystemEventHandler();
		
		bouncingBall1SystemEventHandler = null;
	}
	*/
	
	bouncingBall1EveryFrameHandler();
	//bouncingBall1SpecificFrameHandler();
	
	if(!bouncingBall1Done)
	{
		bouncingBall1FrameIndex++;
		
		bouncingBall1Timeout = setTimeout(bouncingBall1NextFrame, bouncingBall1TimeoutPeriod);
	}
};




bouncingBall1EveryFrameHandler = function()
{
	// Every frame code goes here.
};




bouncingBall1SpecificFrameHandler = function()
{
	return; // Remove for use.
	
	//switch(bouncingBall1FrameIndex)
	//{
	//	case 0 :
	//	
	//		// Specific frame code goes here.
	//		
	//		break;
	//}
};

//////////
// End: bouncingBall1 animation timeline
//////////

//////////
// Start: bouncingBall1 particle motion
//////////

// Mass.
var bouncingBall1M   = 1.0;

// X-axis.
var bouncingBall1Xo  = 0.0;
var bouncingBall1Vxo = 0.0;
var bouncingBall1Axo = 0.0;
var bouncingBall1X1  = 0.0;
var bouncingBall1X2  = 0.0;
var bouncingBall1Vx1 = 0.0;
var bouncingBall1Vx2 = 0.0;
var bouncingBall1Ax1 = 0.0;
var bouncingBall1Ax2 = 0.0;
var bouncingBall1Fx  = 0.0;
var bouncingBall1XMin = -10.0;
var bouncingBall1XMax =  10.0;

// Y-axis.
var bouncingBall1Yo  = 0.0;
var bouncingBall1Vyo = 0.0;
var bouncingBall1Ayo = 0.0;
var bouncingBall1Y1  = 0.0;
var bouncingBall1Y2  = 0.0;
var bouncingBall1Vy1 = 0.0;
var bouncingBall1Vy2 = 0.0;
var bouncingBall1Ay1 = 0.0;
var bouncingBall1Ay2 = 0.0;
var bouncingBall1Fy  = 0.0;
var bouncingBall1YMin = -10.0;
var bouncingBall1YMax =  10.0;

// Z-axis.
//var bouncingBall1Zo  = 0.0;
//var bouncingBall1Vzo = 0.0;
//var bouncingBall1Azo = 0.0;
//var bouncingBall1Z1  = 0.0;
//var bouncingBall1Z2  = 0.0;
//var bouncingBall1Vz1 = 0.0;
//var bouncingBall1Vz2 = 0.0;
//var bouncingBall1Az1 = 0.0;
//var bouncingBall1Az2 = 0.0;
//var bouncingBall1Fz  = 0.0;
//var bouncingBall1ZMin = -10.0;
//var bouncingBall1ZMax =  10.0;

// Time interval per advance.
var bouncingBall1Dt = 0.1;

// Current time.
var bouncingBall1T = 0.0;




bouncingBall1ParticleMotionInitialize = function()
{
};



bouncingBall1SetOriginals = function()
{
	bouncingBall1X1  = bouncingBall1X2  = bouncingBall1Xo;
	bouncingBall1Vx1 = bouncingBall1Vx2 = bouncingBall1Vxo;
	bouncingBall1Ax1 = bouncingBall1Ax2 = bouncingBall1Axo;

	bouncingBall1Y1  = bouncingBall1Y2  = bouncingBall1Yo;
	bouncingBall1Vy1 = bouncingBall1Vy2 = bouncingBall1Vyo;
	bouncingBall1Ay1 = bouncingBall1Ay2 = bouncingBall1Ayo;

	//bouncingBall1Z1  = bouncingBall1Z2  = bouncingBall1Zo;
	//bouncingBall1Vz1 = bouncingBall1Vz2 = bouncingBall1Vzo;
	//bouncingBall1Az1 = bouncingBall1Az2 = bouncingBall1Azo;
	
	bouncingBall1T = 0.0;
};




bouncingBall1Advance = function()
{
	// New position.
	bouncingBall1X2 = bouncingBall1X1 + (bouncingBall1Vx1 * bouncingBall1Dt) + (0.5 * bouncingBall1Ax1 * bouncingBall1Dt * bouncingBall1Dt);
	bouncingBall1Y2 = bouncingBall1Y1 + (bouncingBall1Vy1 * bouncingBall1Dt) + (0.5 * bouncingBall1Ay1 * bouncingBall1Dt * bouncingBall1Dt);
	//bouncingBall1Z2 = bouncingBall1Z1 + (bouncingBall1Vz1 * bouncingBall1Dt) + (0.5 * bouncingBall1Az1 * bouncingBall1Dt * bouncingBall1Dt);

	// New force.
	//bouncingBall1Fx = 1.0;
	//bouncingBall1Fy = 1.0;
	//bouncingBall1Fz = 1.0;
	
	// New acceleration.
	bouncingBall1Ax2 = bouncingBall1Ax1;
	bouncingBall1Ay2 = bouncingBall1Ay1;
	//bouncingBall1Az2 = bouncingBall1Az1;
	//bouncingBall1Ax2 = bouncingBall1Fx / bouncingBall1M;
	//bouncingBall1Ay2 = bouncingBall1Fy / bouncingBall1M;
	//bouncingBall1Az2 = bouncingBall1Fy / bouncingBall1M;

	// New Velocity.
	bouncingBall1Vx2 = bouncingBall1Vx1 + (((bouncingBall1Ax1 + bouncingBall1Ax2) / 2.0) * bouncingBall1Dt);
	bouncingBall1Vy2 = bouncingBall1Vy1 + (((bouncingBall1Ay1 + bouncingBall1Ay2) / 2.0) * bouncingBall1Dt);
	//bouncingBall1Vz2 = bouncingBall1Vz1 + (((bouncingBall1Az1 + bouncingBall1Az2) / 2.0) * bouncingBall1Dt);
	
	// X Bounce
	if(bouncingBall1X2 > bouncingBall1XMax)
	{
		//bouncingBall1X2 = (2 * bouncingBall1XMax) - bouncingBall1X2;
		
		bouncingBall1Vx2 = -bouncingBall1Vx2;
	}
	else if(bouncingBall1X2 < bouncingBall1XMin)
	{
		//bouncingBall1X2 = (2 * bouncingBall1XMin) - bouncingBall1X2;	
		
		bouncingBall1Vx2 = -bouncingBall1Vx2;
	}
	
	// Y Bounce
	if(bouncingBall1Y2 > bouncingBall1YMax)
	{
		bouncingBall1Vy2 = -bouncingBall1Vy2;
	}
	else if(bouncingBall1Y2 < bouncingBall1YMin)
	{
		bouncingBall1Vy2 = -bouncingBall1Vy2;
	}
	
	// Z Bounce
	//if(bouncingBall1Z2 > bouncingBall1ZMax)
	//{
	//	bouncingBall1Vz2 = -bouncingBall1Vz2;
	//}
	//else if(bouncingBall1Z2 < bouncingBall1ZMin)
	//{
	//	bouncingBall1Vz2 = -bouncingBall1Vz2;
	//}
	
	// Tic-toc.
	bouncingBall1T += bouncingBall1Dt;
};




bouncingBall1NewToOld = function()
{
	// Position.
	bouncingBall1X1 = bouncingBall1X2;
	bouncingBall1Y1 = bouncingBall1Y2;
	//bouncingBall1Z1 = bouncingBall1Z2;

	// Velocity.
	bouncingBall1Vx1 = bouncingBall1Vx2;
	bouncingBall1Vy1 = bouncingBall1Vy2;
	//bouncingBall1Vz1 = bouncingBall1Vz2;

	// Acceleration.
	bouncingBall1Ax1 = bouncingBall1Ax2;
	bouncingBall1Ay1 = bouncingBall1Ay2;
	//bouncingBall1Az1 = bouncingBall1Az2;
};

//////////
// End: bouncingBall1 particle motion
//////////

// bouncingBall1_ main animation file

var bouncingBall1TrailsX = new Array();
var bouncingBall1TrailsY = new Array();

var bouncingBall1TrailsColor = new Array();

var bouncingBall1NumTrails = 7;

bouncingBall1TrailsColor[0] = '#222222';
bouncingBall1TrailsColor[1] = '#444444';
bouncingBall1TrailsColor[2] = '#666666';
bouncingBall1TrailsColor[3] = '#888888';
bouncingBall1TrailsColor[4] = '#aaaaaa';
bouncingBall1TrailsColor[5] = '#cccccc';
bouncingBall1TrailsColor[6] = '#eeeeee';


bouncingBall1Initialize = function()
{
	bouncingBall1Xo = bouncingBall1RandomX();
	bouncingBall1Vxo = 5.0 + Math.random() * 5.0;
	bouncingBall1Vxo = Math.random() < 0.5 ? bouncingBall1Vxo : -bouncingBall1Vxo;
	bouncingBall1Axo = 0.0;
	
	bouncingBall1Yo = bouncingBall1WorldYMin;
	bouncingBall1Vyo = 10.0 + Math.random() * 10.0;
	//bouncingBall1Vyo = Math.random() < 0.5 ? bouncingBall1Vyo : -bouncingBall1Vyo;
	bouncingBall1Ayo = -9.8;
};




bouncingBall1SetUp = function()
{
	bouncingBall1SetOriginals();
	
	for(var i = 0; i < bouncingBall1NumTrails; i++)
	{
		bouncingBall1TrailsX[i] = bouncingBall1X1;
		bouncingBall1TrailsY[i] = bouncingBall1Y1;
	}
};




bouncingBall1SetDown = function()
{
};




bouncingBall1EveryFrameHandler = function()
{
	bouncingBall1ClearGraph();
	
	bouncingBall1Advance();
	bouncingBall1NewToOld();
	
	bouncingBall1TrailsX.pop();
	bouncingBall1TrailsX.unshift(bouncingBall1X1);
	bouncingBall1TrailsY.pop();
	bouncingBall1TrailsY.unshift(bouncingBall1Y1);
	
	for(var i = 0; i < bouncingBall1NumTrails; i++)
	{
		bouncingBall1SetLineColor(bouncingBall1TrailsColor[i]);
		bouncingBall1DrawLineSegment(bouncingBall1WorldXMin, bouncingBall1TrailsY[i], bouncingBall1WorldXMax, bouncingBall1TrailsY[i]);
		bouncingBall1DrawLineSegment(bouncingBall1TrailsX[i], bouncingBall1WorldYMin, bouncingBall1TrailsX[i], bouncingBall1WorldYMax);
	}
	
	for(var i = 0; i < bouncingBall1NumTrails - 1; i++)
	{
		bouncingBall1SetLineColor(bouncingBall1TrailsColor[i]);
		bouncingBall1DrawLineSegment(bouncingBall1TrailsX[i], bouncingBall1TrailsY[i], bouncingBall1TrailsX[i+1], bouncingBall1TrailsY[i+1]);
	}
	
	bouncingBall1SetLineColor('black');
	bouncingBall1DrawLineSegment(bouncingBall1WorldXMin, bouncingBall1Y1, bouncingBall1WorldXMax, bouncingBall1Y1);
	bouncingBall1DrawLineSegment(bouncingBall1X1, bouncingBall1WorldYMin, bouncingBall1X1, bouncingBall1WorldYMax);
	
	bouncingBall1DrawPoint(bouncingBall1X1, bouncingBall1Y1);
};

Welcome to the Physics Department of Zona Land Education. Here most of the material you will find relates to classical physics regarding motion and forces, to waves, and to light ray optics.

The above animation shows an object bouncing around within the bounds of a box. The animation is programed to mimic gravity, it is a projectile motion animation with no air resistance. Click the 'Code' button above it you want to study the JavaScript computer language code that drives this animation. This code demonstrates a substantive library of routines for HTML5 graphics, animation loops, and particle motion under the influence of forces. If you are learning to program and want some ideas about how to create an animation like this one, click the 'Code' button. Following is an explanation of this animation:

The animation is updated with a new frame at a regular frequency several times per second. So, the time interval between frames is constant. The frames click like a clock.

The black disk is the object, the black vertical and horizontal lines mark the x- and y-positions of the object respectively. Check that: The horizontal line, that is lined up like an x-axis, actually marks the y-position, or y-coordinate, of the object. And the vertical line might look like a y-axis, but its actually showing the x-position, or x-coordinate, of the object.

The gray trailing lines mark the last several positions of the object during the last several time intervals of the animation. Since the time intervals between the frames is constant, if the spacing between these trailing lines has been growing, then the speed of the object has been increasing, and if the spacing has been shrinking, then the speed has been decreasing.

Gravity is a force that acts vertically downward. That is, it pulls the object downward. The object accelerates downward due to the pull of gravity.

Note in the animation that when the object is moving downward the spacing in the horizontal (y-coordinate) trailing lines grows. This shows that the downward speed is increasing due to the downward pull of gravity.

Note that when the object is moving up the spacing between the horizontal trailing lines shrinks. This shows that the upward speed is decreasing due to the downward pull of gravity.

Note that the vertical (x-coordinate) trailing line spacing never changes. Since the vertical lines are always separated by the same distance, the horizontal speed of the object does not change. There is no horizontal acceleration. That makes sense, since there is no horizontal force. Gravity pulls vertically, not horizontally.