Random Movement in AS3 - Page 6

by kirupa  |  24 December 2010

  Have questions? Discuss this Flash / ActionScript tutorial with others on the forums.

In the previous page, you started to receive the inside scoop on how our MoveCircle function helps move the circle along its randomly chosen path. In this page, we will look at the SetNewPosition function which gets called once our circle has reached its destination.

Looking at the Code behind the Magic (Continued)
Once our circle has hit its destination, the next thing is to pick a new destination that the circle can happily bounce off to. The picking of the new destination is controlled by the SetNewPosition function:

private function SetNewPosition()
{
this.newX = GetRandomXPosition();
this.newY = GetRandomYPosition();
 
this.totalDistance = GetDistance();
 
var time:Number = this.totalDistance / this.speed;
 
speedX = (this.newX - this.x)/time;
speedY = (this.newY - this.y)/time;
}

This function is basically responsible for specifying the new destination and resetting any variables needed to get there. Obviously, the first two things we do in a function called SetNewPosition is specify a new X and Y position:

this.newX = GetRandomXPosition();
this.newY = GetRandomYPosition();

This uses the GetRandomXPosition and GetRandomYPosition functions that you briefly saw earlier to get you the new destination.

Next, now that we set the new X and Y positions, it is time to calculate the total distance from where you are now to where you need to be going:

this.totalDistance = this.GetDistance();

That is handled by the GetDistance function that uses the Pythagorean theorem to get you to your destination, and the value returned by the GetDistance function is stored in the totalDistance variable.

With your distance now calculated, you can figure out what the total time will be by using your pre-existing value of speed:

var time:Number = this.totalDistance / this.speed;

By now, all of this should look very familiar. You saw a higher-level overview of this when describing the algorithm used to make the circle actually move. The algorithm materializes to a large degree here!

The next two lines are where speedX and speedY are calculated:

speedX = (this.newX - this.x)/time;
speedY = (this.newY - this.y)/time;

They correspond to the following two images you saw earlier:

Our MoveCircle function is where the position changes are actually made. The SetNewPosition function is what sets the various variables used by MoveCircle to make it all move. Putting them both together, you get a well-oiled machine that can moves your circles around randomly.

Conclusion
Well, that's all there is to this tutorial...well, deconstruction. As you can see, making things move to a random position seems difficult, but like most things, is actually quite simple once you have a basic understanding of how it all works.

This is one of my favorite examples to showcase how you can use code to create some beautiful motion, and hopefully you found learning how this all works to be equally as rewarding as I found it fun to write.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!


1 | 2 | 3 | 4 | 5 | 6




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.