Moving objects in a circular path, and also moving the whole group

Question

I have eight elements distributed in a circle, with a common center.

All of them move along a circular path, just like the poster in this question asked:

Moving an object in a circular path

This solves half of my question, however I also need to oscillate the whole group of units from side to side, with an easing, or linearly, depending on the design.

I've been playing around with it, but I can't figure how to add or modify what I assign to the X and Y value so the objects move like if they were contained inside a Sprite, and I would be moving that Sprite.

Edit.:

I found that this:

var newX:Number = Math.cos(_angle) * 100;
var newY:Number = Math.sin(_angle) * 100;

y = _startingY + newY;

x = _startingX + newX + _incrementX;

_angle += 2 * Math.PI / 180;

_incrementX += 1 + Math.sin(_angle);

Gets close enough to what I need, however it still doesn't work. In theory, if I subtract the sin f the angle it should fix the rotation compensation.

Edit2: The stars moving in circle:

What happens when I just add a linear increment to each element: (it would represent in the code above doing _incrementX++)

Answer 1

This is the concept: You add "rotation movement" and "linear movement" together, and you get "rolling movement". Once you calculated all vectors for rotation movement, then you can simply add linear vectors to your results.

Answer 2

All you have to do to be able to freely move your items in a circle around the screen is:

1. Measure the x and y distance from 0, 0 to the center of the circle. Put the values into variables.

2. Set the x and y positions based off of the sin and cos values.

3. Add the x and y from the first step to the current positions.

Is this what you're looking for?

Answer 3

Check this out, it may help: http://gizma.com/easing/

The best way to do this, if you're not changing the destinations every frame, is to once calculate the positions, and store it in an array. Then use the values from that array. This is a great optimization because you won't have to call the math functions every frame.

Answer 4

I note that your stars appear one after the other on your second animation. It suggests you indeed create them at different time, and let that be the cause of your objects be at different angles at some time.

Unfortunately, that means they will have individual _incrementX values. You made _incrementX be a function (mathematically speaking) of the angle, while you want it to be a function over time, and have each object have its own time-to-angle relationship.

Try initializing them all at the same time, but with different values for _angle.

If that doesn't work for you, I suggest you introduce an invisible 'group center' that provides base (x,y) coordinates and each object then does

y = _center.Y + newY;
x = _center.X + newX;

and let _center.X be the things that increments over time.