making an object move in a circle

[erbsland]

hello
does anybody know how to make an object moving in a smooth circle?

I guess its not much of code but I just dont get there...

thanks in advance

[jbum]

Sin and Cosine are your friends.

Basic circlular motion is given by the following formula:

x = cx + Math.sin(time)*rad;
y = cy + Math.cos(time)*rad;

cx,cy are the center of the circle and

rad is the radius of the circle.

As time goes from 0 to 2*PI (or multiples thereof), the x,y values will describe a complete circle.


Here is an example of using this formula. Attach this script to the object you wish to move.

onClipEvent(load)
{
  cx = Stage.width/2; // coords of center of circle (center of screen, in this case)
  cy = Stage.height/2;

  rad = 100; // radius of circle

  speed = 6; // speed of travel (seconds to make a complete circuit)
  speedScale = (0.001*2*Math.PI)/speed;
}

onClipEvent(enterFrame)
{
  var angle = getTimer()*speedScale;
  this._x = cx + Math.sin(angle)*rad;
  this._y = cy + Math.cos(angle)*rad;
}

For an example of using sin and cosine to move text in a curvy pattern, see this thread:

text effect

[brintcorb]

hey jim,

do you have or know where i can find motion for elipses?

thanks,
brint

[catbert303]

Hi,

you could scale the values of the sin and cos parts in the equations,

eg,

this._x = cx + 1.5 * Math.sin(angle)*rad;
this._y = cy + Math.cos(angle)*rad;

here the clip would move further from the origin in the x direction than it does in the y direction

[jbum]

To get an ellipse, use separate radii for the horizontal and vertical coordinates.

radA = 100;
radB = 50;
.
.
.

this._x = cx + Math.sin(angle)*radA;
this._y = cy + Math.cos(angle)*radB;

- Jim

Edit: Whoops, crossposted with catbert. We're basically saying the same thing. Catbert is defining radA in terms of it's relationship to radB (aspect ratio = 1.5).

[brintcorb]

thanks guys that was 2 ez

[erbsland]

hey thanks a million for the help. it really IS kinda easy

[bmcc81]

Hi,

I'm trying to put my icons in a circle. I'm using this code for a straight line.

var spacing = 10 + count * 113.15 ;//left spacing +i*item._width

var t = home.menuHolder.attachMovie("item","item"+count, count+16, {_x:spacing, _y:0, _xscale:75, _yscale:75, _alpha:0});

Is there away to get this into a circle?

[whitnelson]

Here is a tutorial I put together about this:

AS3 Circular Movement

[bmcc81]

very cool!