First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Alex Nino (yoambulante) | Website: http://www.yoambulante.com/

Elastic Collisions Inspiration...

Hi there,

Last weekend I had some spare time for writing an article I got in mind from long time ago, this is about Elastic Collisions, pretty much simple concept but apparently there are some people implementing it in the wrong way (I heard about some crazy exceptions, many bugs and problems people have) and in most of these cases it is because of they are detecting collisions in a wrong workflow. When we speak about elastic collisions we are speaking about the response of it after the collision happens and not when it actually happens (its detection), you must be careful in the way how you detect when the collisions occur, one think is detecting when the collision happens and other completely different is what happen after it.

First time I worked with elastic collisions was using action script 2, after many tests I did the performance of all these formulas were quite good due to its simplicity of how it works. The main concept is quite simple; an elastic collision is a collision between two objects (bodies which have mass) where the total momentum of the objects colliding are preserved. In other words, none of the energy involved in the collision is lost; it is distributed between the action objects depending on their mass and speed they got when the collision happened.

If you google about "elastic collisions" you may find thousands of articles and information around but unfortunately not all of this is correct, there are many people out there "as usual" explaining things in the most complicated way. I didn?t find any simple website where we can find out and understand about it easily or maybe I wasn?t lucky enough. I recommend to you take a look on the content published in Wikipedia if you want to know a bit more about it, it is really simple and well explained over there, they tell you how it works and also covers some aspects of 2 and 3 dimension collisions, the link is Elastic collision, note that the elastic collision formulas always deal with the response once the collision happens, you have to detect when the collision happen by yourself which is not hard but can be tricky to sort out when you?re facing many objects colliding at the same time.

Anyway the formula applied in one dimension (linear) is pretty much this:

Elastic collision formula and Elastic collision formula

Wait!! Don?t run away! It is so simple to interpret it, basically what it says is; if we have two objects A and B and the object A has a mass of 3 Kilograms and it is moving with a speed of 1 meter/sec and the Object B which has a mass of 1 Kilogram is moving at 2 meters/sec, What will happen when these two objects collide? Which are the new forces (speed) for each? easy...

mass1 = 3 //mass of object A
vel1 = -1 //speed of object A (negative because of collision, opposite direction against object B)
mass2 = 1 //mass of object B
vel2 = 2 //speed of object B
bothmass = mass1 + mass2
newvel1 = (vel1 * (mass1 - mass2) + (2 * mass2 * vel2)) / bothmass
newvel2 = (vel2 * (mass2 - mass1) + (2 * mass1 * vel1)) / bothmass
//newvel1 = 0.5
//newvel2 = 2.5

That?s all you need to know about it. Departing from this point I have made the following example using Flash Develop and the Open Source Flex SDK, the source of it is here download sourcecode. This example shows how the elastic collision can be implemented in flash in a very, very simple way; the whole program doesn?t have more than 30 instructions, I think that it really worth to have a go with it.

And then here is something interesting I found by chance at the science museum in London one day I was walking nearby and I decided to take a quick look inside. I met a machine that made me come back later with my camera and make a short video of it. This is a short video (no longer than 2 minutes) but I think enough for explaining what it is about and its connection with elastic collisions. After you watch it, you will be able to understand what the next experiment is about:

Well, when I saw that crazy machine (Energy ring by soda.co.uk) the first thing that came to my mind was if it was actually using elastic collision or not, and I was wondering if it is possible to simulate its behaviour in flash using simply elastic collisions. My approach on this experiment is totally oriented to the movement algorithm and the collision between the blocks you can see on the video, so things like the small particles flying around and the text on the display panel are not begin treated here, this is 100% oriented to the collision behaviour applying some gravity on the objects inside a circular path, I hope you see my point. Here is the sourcecode if you want to take a look on it. I think this source code is pretty much the same of the previous example apart of moving objects in a circle rather than on the x axis and colliding between these two limits (the walls), here they just collide between them and also I?m applying gravity taking advantage of the sine curve. Does it look similar to the video? I think that it is quite much what we can achieve using elastic collisions.

What about 2D elastic collisions?

Another approach of this elastic collision concept could be the collisions between balls, think about a billar pool game, the collision between the balls of a pool game is pretty much an authentic elastic collision with some extra factors that makes everything harder to achieve when coding a game such as; the friction of balls with air and on the table surface plus the spinning effect that they could have when moving that alters completely the collision response. I've been working long time ago on a game that unfortunately I never got the chance of finish. It is about an "8 ball" pool game using 15 balls and handling elastic collisions between them (without ball effects). So, here is what I have done so far, in this unfinished version I?m not making any validations about the game, it is just a free table all the time, hit what ever you want and then if put the white ball in a pocket I just put it back to the table behind the line. Unfortunately the source code is quite old, rusty and messy and is not available for downloading but I promise it will be as soon as I have a chance to tidy it up a bit. Take a look on it.

When we are speaking about physics, may be the most important thing about it, is to know when things exactly happen. It is quite important detect collisions in the right way, fast (in terms of performance) and highly responsible in terms of accuracy. The way how I'm detecting the balls collisions in the previous experiment is using the following function that by the way It doesn't use Math.sin and Math.cos functions at all which makes everything runs much faster.

static public function findTimeUntilCollide(b1:Ball, b2:Ball):Number {
   //note that Ball properties vx and vy are the speed in x and y axis.
   var collision_time:Number = -1;
   // Compute parts of quadratic formula
   // a = (v2x - v1x) ^ 2 + (v2y - v1y) ^ 2
   var a:Number = Math.pow(b2.vx - b1.vx, 2) + Math.pow(b2.vy - b1.vy, 2);
   // b = 2 * ((x20 - x10) * (v2x - v1x) + (y20 - y10) * (v2y - v1y))
   var b:Number = 2. * ((b2.x - b1.x) * (b2.vx - b1.vx) + (b2.y - b1.y) * (b2.vy - b1.vy));
   // c = (x20 - x10) ^ 2 + (y20 - y10) ^ 2 - (r1 + r2) ^ 2
   var c:Number = Math.pow(b2.x - b1.x, 2) + Math.pow(b2.y - b1.y, 2) - Math.pow(b1.r + b2.r, 2);
   // Determinant = b^2 - 4ac
   var det:Number = Math.pow(b,2) - (4 * a * c);
   if (a != 0.) { // If a == 0 then v2x==v1x and v2y==v1y and there will be no collision
      var t:Number = (-b - Math.sqrt(det)) / (2. * a); // Quadratic formula. t = time to collision
      if (t >= 0.) { // If collision occurs...
         collision_time = t;
   return collision_time; //if it is less or equal 1 it means that will be in contact before next frame

Here is this function in practice... drag and drop components to find out how does it work.

And then if you?re wondering what the response of the collision using elastic collisions is, here is the function I used for it and also for predicting the white ball path before you hit it:

static public function doElasticCollision(b1:Ball,b2:Ball){
   // Compute unit normal and unit tangent vectors
   // v_n = normal vec. - a vector normal to the collision surface
   var v_n:Point = new Point(b2.x-b1.x, b2.y-b1.y);
   var hyp:Number = getHypotenuse(v_n.x,v_n.y); //distance between dots
   var v_un:Point = new Point(v_n.x/hyp, v_n.y/hyp); // unit normal vector
   var v_ut:Point = new Point(-v_un.y, v_un.x); // unit tangent vector
   // Compute scalar projections of velocities onto v_un and v_ut
   var v1n:Number = v_un.x * b1.vx + v_un.y * b1.vy;
   var v1tPrime:Number = v_ut.x * b1.vx + v_ut.y * b1.vy;
   var v2n:Number = v_un.x * b2.vx + v_un.y * b2.vy;
   var v2tPrime:Number = v_ut.x * b2.vx + v_ut.y * b2.vy;
   // Compute new velocities using one-dimensional elastic collision equations in the normal direction
   // Division by zero avoided. See early return above.
   var v1nPrime:Number = (v1n * (b1.m - b2.m) + 2. * b2.m * v2n) / (b1.m + b2.m);
   var v2nPrime:Number = (v2n * (b2.m - b1.m) + 2. * b1.m * v1n) / (b1.m + b2.m);
   // Compute new normal and tangential velocity vectors
   var v_v1nPrime:Point = new Point(v_un.x*v1nPrime, v_un.y*v1nPrime);
   var v_v1tPrime:Point = new Point(v_ut.x*v1tPrime, v_ut.y*v1tPrime);
   var v_v2nPrime:Point = new Point(v_un.x*v2nPrime, v_un.y*v2nPrime);
   var v_v2tPrime:Point = new Point(v_ut.x*v2tPrime, v_ut.y*v2tPrime);
   //update velocities.
   b1.vx = v_v1nPrime.x + v_v1tPrime.x;
   b1.vy = v_v1nPrime.y + v_v1tPrime.y;
   b2.vx = v_v2nPrime.x + v_v2tPrime.x;
   b2.vy = v_v2nPrime.y + v_v2tPrime.y;

These functions are quite fast in term of performance, they don?t use Math.sin and Math.cos at all, I hope this article is useful to someone, visit yoambulante.com to find out more info, cheers!

» Level Intermediate

Added: 2010-04-20
Rating: 8.31 Votes: 13
» Author
I'm a Flash programmer based in london - uk making experiments in my spare time.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.