Elastic Collision

29 July 2007

A small tutorial on how to create bouncing balls with ActionScript source code. A couple of years back I was creating some interactive sites using bouncing balls as navigation. These needed to behave in a believable manner so I spent some time looking at rigid body dynamics code.

Rigid Body Dynamics

There are many approaches to solids-based simulation on a computer. The most realistic involve running a simulation in relatively large slices of time (say 1/60 second) until a collision occurs, and then ‘rewinding’ the simulation in smaller slices of time until the exact moment of impact. This ensures that no objects are ever seen to overlap, and the simulation then continues from the exact moment at which they touch. This is computationally intensive and a little overkill for what I wanted.

The second method is a little more ‘relaxed’ and doesn’t strive for perfection. You can get a reasonable result using springs to resolve collisions.

Elastic Collision

I already had some spring code so I hooked up a system as follows;


Figure 1 is a system with balls bouncing around under gravity. The system checks whether two balls overlap. Figure 2 shows what happens when two balls overlap. All we have to do is measure the overlap. We temporarily create a spring which is attached to the centre of each ball between a and b.


The spring’s resting length is then set such that, when fully relaxed, it would allow the balls to touch exactly. This means that the spring is under compression; it tries its best to get back to its resting length and in doing so forces the balls apart as shown in Figure 3.

Nervous Energy

This worked really well for what I needed as the balls bounce around nicely and it’s a lot of fun. However the lack of precision shows when you try and contain the balls too tightly. The system becomes a little unstable as the balls try to break free from each other but are constrained by the walls.

However the same code is used the in Magnetic example which is able to resolve itself as there is plenty of space for the balls to move into.


[ZIP] Download Elastic Collision source code


Click and drag to move the balls around


5 comments so far
Leave a comment →

Hey Simon!

That’s great! Check out Yugop’s approach at http://yugop.com/

23 April 2008


Simply PERFECT !!! very good Design,
nice mechanism ! PRG for reference
good Job ! when for Iphone ?
I will be there ….

7 August 2008


about my previous request for WC for Iphone…I intendend to find it in App Store…..easy and I am happy also to pay…!
Ciao dall’Italia

7 August 2008


Hi lamberto – yes good idea would be nice on iPhone. I have applied for a license to publish in the Apple AppStore, but who knows when or if I will get a license? If I do, I will let you know on the site. Best, Simon

7 August 2008


Maybe adding a little damping would kill the nervous movement? Spring + damper are
always more realistic than just a spring.

17 August 2008


Leave a comment

(will not be published) (required)