Emanuele Feronato

Talking about Flash.

Some of you in this On the horizon post requested a Ragdoll tutorial, so I started reading and experimenting until I got something good.

But it’s not easy nor intuitive.

If you want to follow me in this jouney, open flash and prepare an huge amount of aspirin, you’re going to feel a real headache.

Ok, let’s start.

The first thing we need to consider is that a ragdoll, or a simple ball, is a particle system in the space.

We’ll start with a single particle in the space: a ball.

Let’s define the attributes of a particle in the space:

Position: The (x,y,z) position in the space. From now on, we are going to consider a 2d space so we’ll have a (x,y) position

Velocity: The speed the particle moves in the space. If we split the speed in x speed and y speed, we can know its direction too. At the moment, it’s not so important.

Acceleration: The acceleration (if any, positive or negative) of the particle.

Knowing all this attributes, we can determine new position and velocity in this way:

Nx = x + vx * Dt
Ny = y + vy * Dt
Nvx = vx + a * Dt
Nvy = vy + a * Dt

That sounds like this: The new x position Nx is determined by the last known x position x plus the x velocity vx multiplied by the time interval Dt. Same thing for y velocity, then the new x velocity Nvx is determined by the last known x velocity vx plus the acceleration a multiplied by the time interval Dt. Same thing for the y velocity.

This is better know as Euler integration or Euler method

From Wikipedia: In mathematics and computational science, the Euler method, named after Leonhard Euler, is a numerical procedure for solving ordinary differential equations (ODEs) with a given initial value. It is the most basic kind of explicit method for numerical integration for ordinary differential equations.

While this formula may fit our needs in a space with few particles, the large amount of trigonometry involved in splitting velocity into x and y velocities just to determine once again the angle of movement would crash the system in case we are going to simulate a space with lot of particles.

Even with a supercomputer, where the CPU does not represent a problem, the large amount of equations needed to solve all the problems we are going to solve (all in all we are talking about ragdolls!) would be too complex to be solved with the single use of trigonometry.

Moreover, this kind of integration suffers from many problems as discusses on Wikipedia that I won’t explain since this is not the aim of this tutorial.

To reduce the errors, we need another integration scheme where velocity is not considered.

Of course, we can use a velocity-less integration scheme only if we can assume that we have regular time intervals. The question is: do we have regular time intervals? Yes, we have… that’s what us flashers call “frame”.

Now that we know that we have a fixed time interval, it’s time to introduce the Verlet integration.

From Wikipedia: Verlet integration is a method for calculating the trajectories of particles in molecular dynamics simulations. The verlet integrator offers greater stability than the much simpler Euler integration methods, as well as other properties that are important in physical systems such as time-reversibility and area preserving properties. Stability of the technique depends fairly heavily upon either a uniform update rate, or the ability to accurately identify positions at a small time delta into the past.

As said, “uniform update rate” is what we have. The Verlet integration reduces the level of errors introduced into the integration by calculating the position at the next time step from the positions at the previous and current time steps, without using the velocity.

We can now calculate the new position in this way:

Nx = 2x – Ox + a
Ny = 2y – Oy + a
Ox = x
Oy = y

And sounds like this: the new x position Nx is calculated from the actual x position multiplied by 2 minus the previous x position Ox plus the acceleration a. Then, the previous x position Ox will be the actual x position.
Same thing for the y position.

As you can see, there is not velocity in this integration.

When I firstly saw this integration, I was tempted to give up saying it was not possible. And I ran out of aspirin!

But, believe or not, it works… and it’s time to put some actionscript in action

Start creating two movieclips defined and linked in this way:

The red ball is the “Euler” ball, while the green one is the “Verlet” ball.

Then, for this first example, we are considering only an y-axis movement, controlled by the “gravity”.

The actionscript in the first frame is:

gravity = 0.5;
yspeed = 0;
attachMovie("euler", "euler", 1, {_x:166, _y:20});
attachMovie("verlet", "verlet", 2, {_x:334, _y:20});
euler.onEnterFrame = function() {
	yspeed += gravity;
	this._y += yspeed;
};
previous_y = 20;
verlet.onEnterFrame = function() {
	save_y = this._y;
	this._y = 2*this._y-previous_y+gravity;
	previous_y = save_y;
};

Line 1: Defining the gravity, the y acceleration.

Line 2: Defining yspeed to zero (for Euler method)

Lines 3-4: Placing the movieclips on the stage

Line 5: Beginning of the routine to be executed at every frame for the euler particle

Line 6: Adding the gravity to yspeed

Line 7: Updating euler _y position according to its yspeed. Notice that this method is the same as seen in this tutorial. Anyway, people still call it Euler method instead of Feronato method.

Line 9: Defining the previous_y position for the verlet particle. It’s 20 because it’s its starting position as you can see at line 4

Line 10: Beginning of the routine to be executed at every frame for the verlet particle

Line 11: Saving the actual _y position

Line 12: Applying Verlet integration

Line 13: Updating the previous_y variable with the _y position of the verlet particle

As you can see, one method is a quite good approximation of the other one. You may need to reload the page to see the code in action (if can we call “action” two falling balls). Even if in normal purposes I will continue preferring the Feron.. ehm Euler method, you’ll see how the Verlet integration will be very useful when we’ll start to make our ragdoll.

At the time it’s over, open a window and take a deep breath, it’s over at the moment. In next tutorial we’ll see how to “link” one particle to another to create a body.

Download the source code and give me feedback