Simple physics simulation example: a bouncing ball

By dev3 Comments

In this post, I’d like to share with you just how easy it is to produce a realistic bouncing ball simulation using only a few lines of ActionScript code. It’s the first example from my recently published ActionScript physics book.

Although simple, this example is instructive because it employs a few key physics animation coding techniques. I regard it as a minimal yet non-trivial “hello world” example of physics programming.

The Physics

At the simplest level, there are only two pieces of physics to understand and apply:

Gravity and acceleration

The physics that governs the motion of a bouncing ball is quite simple. The ball is pulled downward by gravity, which causes it to accelerate vertically downward. Acceleration means that its velocity changes with time. In turn, its velocity makes the ball change position in time. Because gravity acts downwards it does not affect the horizontal motion of the ball. Hence, the horizontal component of velocity does not change.

Bouncing

Each time the ball hits a surface such as a floor or a wall it experiences a force that pushes it back, making it bounce off the surface. The effect of this force is to reverse the velocity component perpendicular to the wall; for example, a floor reverses the vertical component of velocity. The magnitude of the velocity also decreases as it bounces off, since it loses some energy due to the impact.

The Code

Let’s take a look at some AS3 code that implements this piece of physics:

package {
	import flash.display.Sprite;
	import flash.events.Event;

	public class BouncingBall extends Sprite {
		private var g:Number = 0.1;
		private var vx:Number = 2;
		private var vy:Number = 0;
		private var ball:Ball;

		public function BouncingBall() {
			ball = new Ball();
			ball.x = 50;
			ball.y = 75;
			addChild(ball);
			addEventListener(Event.ENTER_FRAME,onEachTimestep);
		}

		private function onEachTimestep(evt:Event):void{
			vy += g;      

			ball.x += vx;
			ball.y += vy; 

			if (ball.y > 350){
				vy *= -0.8;
			}
		}
	}
}

As you can see, the code is very simple. We begin by setting the values of the acceleration produced by gravity g and the horizontal and vertical velocity components vx and vy. In the constructor we create a Ball instance (in this case we have a movie clip in the Flash library with a class name of Ball) and set its initial position. The real physics is in the onEachTimestep() method, which runs well, on each time step.

The first line of code in onEachTimestep() increments the vertical velocity by an amount equal to the acceleration due to gravity. Note that the horizontal velocity is not incremented, since gravity does not affect it. The next two lines of code then increment the horizontal and vertical position of the ball by an amount equal to the respective velocity components.

Bouncing is handled by the if logic, which reverses and reduces the vertical velocity component each time the ball hits the ground.

That’s all. You can download the source files here.  Here’s a screenshot of what you should see.

Bouncing ball

A simple bouncing ball simulation

 

Other things to consider

It’s amazing how realistic the animation looks with so little physics and code. It’s fairly straightforward to add other environmental effects and forces for added realism, such as air resistance (drag), ground friction, wind and so on. But we’ll leave these for another post.

 

ActionScript, Animation, Game Physics, Simulation

3 comments on “Simple physics simulation example: a bouncing ball

  1. Pingback: Bouncing ball physics simulation in HTML5/JavaScript | physicscodes.com

  2. Why do you set the variable grav to 0.1 and not 9.8? thanks!

    • Hello Harry, thanks for stopping by. That’s a good question. The short answer is that, although g = 9.8 m/s/s, here we are using different units for distance and time: distance is in pixels rather than meters and time is in ‘frames’ rather than seconds. I might elaborate on this in a future post.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.

Blue Taste Theme created by Jabox