1

I'm trying to animate some bitmaps out in relation to a center point. They don't all start at that center point, but I want them to fly out as though a force from that center point slammed into them and pushed them outwards radially, such that they fly completely off the stage.

So: I know the center point, and the x and y position of each bitmap arranged around it. For each one I can draw a line from the center to that x,y point. I should then be able to get the angle formed by that line to the horizontal, and then set a destination point farther out on that line. The bitmap will be tweened out to that point. I believe that that is what Math.atan2 is for.

Here's what I've got as I iterate through the array of bitmaps (i is an object):

var angle:Number = Math.atan2(i.bitmap.y - centerY, i.bitmap.x - centerX) * 180 / Math.PI;
var dist:Number = 200;              //arbitrary number, just to test
 destX = centerX  + dist * Math.cos(angle);  //destination x
 destY = centerY  + dist * Math.sin(angle);  //destination y

Instead of these things gliding out radially, they're jumping around.

I'm having trouble understanding atan2 and exactly what I'm doing wrong.

Thanks,

David

David
  • 703
  • 1
  • 15
  • 31
  • Just to add to the answers, if possible, you could make use of the MatrixTransformer helper class: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/fl/motion/MatrixTransformer.html for it's rotateAroundExternalPoint() and rotateAroundInternalPoint() methods – George Profenza May 09 '11 at 22:27

4 Answers4

1

You can achieve the same effect without trigonometric functions using just vector operations:

var dist:Number = 200;              //arbitrary number, just to test
var dx:Number = i.bitmap.x - centerX;
var dy:Number = i.bitmap.y - centerY;
var length:Number = Math.sqrt( dx*dx + dy*dy );
var normalizeddx:Number = dx / length;
var normalizeddy:Number = dy / length;
 destX = centerX  + dist * normalizeddx;  //destination x
 destY = centerY  + dist * normalizeddy;  //destination y

This should be much faster, than using trigonometric functions. I don't know the language specifics of actionscript, so probably this can be optimized more.

Thies Heidecke
  • 2,497
  • 1
  • 23
  • 25
0

You have to get rid of the *180/Math.PI part. The angle has to be in radians. So the first line would look like
var angle:Number = Math.atan2(i.bitmap.y - centerY, i.bitmap.x - centerX); The rest should be fine.

0e4ef622
  • 460
  • 4
  • 14
0

atan2 could work in this situation I suppose but I would just use atan:

var angle:Number = Math.atan((i.bitmap.y - centerY) / (i.bitmap.x - centerX));

ADDITION:

Code I just saw on another forum that appears to do what you want (there's only a slight difference from what you wrote in the first place)

var angle:Number = Math.atan2(mouseX,mouseY-180)-Math.PI/2;
var xNew:Number = 20*Math.cos(angle);
var yNew:Number = -20*Math.sin(angle);
jhocking
  • 5,527
  • 1
  • 24
  • 38
  • I think you meant Math.atan(... which I tried, but something is still wrong. They're jiggling around. Also you need Math.atan2 if you want the behavior to be consistent in all four quadrants (negative and positive, x and y). – David May 10 '11 at 00:55
  • Also i think the parameters for atan2 are y,x not x,y – 0e4ef622 Apr 29 '14 at 05:10
0

Try removing the *180/PI to keep the angle in radians.

var angle:Number = Math.atan2(i.bitmap.y-centerY, i.bitmap.x - centerX);

Then change destX and destY to 

destX = i.bitmap.x  + dist * Math.cos(angle);
destY = i.bitmap.y  + dist * Math.sin(angle);
dagge
  • 1,145
  • 9
  • 13
  • I don't know if I should add a new question or what, but... as I've worked with this I've realized it's no good to hard-code dist as a negative number. The whole point is that these things should animate out from the center point. If we think of the center point as the origin, then if a bitmap's x is > centerX then it should move right; if < centerX it should move left; if y>centerY it should move down, and if y – David May 29 '11 at 22:55