Simple Coordinate Rotation

Although I covered the technique for simple coordinate rotation in Chapter 3s discussion of trigonometry, lets do a quick recap. You have a center point, an object, a radius, and an angle. You just keep increasing or decreasing the angle, and use basic trigonometry to place the object around the center point. You can set a variable such as vr (velocity of rotation) to control how much the angle is increased or decreased. And dont forget that the angle is in radians.

The structure of the code would be something like this pseudocode:

 vr = 0.1; angle = 0; radius = 100; centerX = 250; centerY = 200; // and in an enterFrame handler:    mc._x = centerX + cos(angle) * radius;    mc._y = centerY + sin(angle) * radius;    angle += vr; 

Youre just using basic trig to set the _x and _y properties of the object based on the angle and the radius, and changing the angle on each frame. Lets make a couple of sample Flash movies to demonstrate this in action.

This first example just has a movie clip on stage named ball and the following code on the main time-line ( ch10_01.fla ):

 var angle:Number = 0; var radius:Number = 150; var vr:Number = .05; function onEnterFrame():Void {       ball._x = Stage.width / 2 + Math.cos(angle) * radius;       ball._y = Stage.height / 2 + Math.sin(angle) * radius;       angle += vr; } 

As you can see, this has nothing brand new to you in terms of code. Go ahead and try it out. This approach works great when you know or specify the angle and radius from a center point.

But what if all you have is the position of the object and the center point. Well, naturally it isnt too hard to calculate the current angle and radius based on the x and y positions . Once you have them, you can carry on as before. It looks something like this ( ch10_02.fla ):

 var dx:Number = ball._x - Stage.width / 2; var dy:Number = ball._y - Stage.height / 2; var angle:Number = Math.atan2(dy, dx); var radius:Number = Math.sqrt(dx * dx + dy * dy); var vr:Number = .05; function onEnterFrame():Void {       ball._x = Stage.width / 2 + Math.cos(angle) * radius;       ball._y = Stage.height / 2 + Math.sin(angle) * radius;       angle += vr; } 

Try moving the ball to different spots on the stage before testing. Youll see that its starting position and distance from the center are both based on where you first place the ball.

This method of rotation based on coordinates might be fine for a single object, especially in a situation where you are just determining the angle and radius the one time. But in a more dynamic example, you could have many objects to rotate, and their relative positions to the center rotation point could be changing. So, for each object, you would need to compute its distance, angle, and radius, then add the vr to the angle, and calculate the new x, y position, on each frame. Thats not too elegant, and probably not too efficient. Fortunately, there is a better way.



Foundation ActionScript. Animation. Making Things Move
Foundation Actionscript 3.0 Animation: Making Things Move!
ISBN: 1590597915
EAN: 2147483647
Year: 2005
Pages: 137
Authors: Keith Peters

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net